deutsch

TTS-Plugins

Take a look at our yummy self-cooked plugins for developers' everyday-needs. Annoyed by either oversized plugins or out-of-the-box-solutions that incapacitate us from taking full code-control according to best practices we decided to write our own plugins - so here it is: the TTS-plugins-lib.

The goal is to keep the code minimalistic simple (KISS - Keep It Simple, Stupid and DRY - Don't Repeat Yourself), build independent modules ready-to-wear and provide the plugins in a sort of API-style to secure plug'n'play-readiness.

TTS-Tab-Navigation

Accessible JavaScript-Tab-Navigation stripped to the bare minimum: no styling added, just some CSS to get the JavaScript running. Feel free to add your styles the way you like and your IDs and classes. The existing CSS is built as own namespace (everything TTS!) to avoid conflicts with already existing styles in your page and according to efficient selectors. We decided to use classes, so you can easily use more than one tab-navigation on a page and you are free to use whichever element you prefer. Simply add an ID to the containing elements nav and article to attach different styles, JavaScript behaviour will be all the same.
The HTML is pure HTML5 (semantics are based on the HTML5 doctor sectioning flowchart) and you won't find any inline-style such as style="display: block;" in the source. The hiding-mechanism for inactive tab-pages is accessible.

Requirements: jQuery (whatever version), HTML5

ZIP-Download

SASS inuit-grid-mixin

One of the CSS-grids I like best is inuit.css developed by Harry Roberts, @inuitcss. It's easy to use and minimalistic, independent from HTML-elements, sort of plug'n'play-ready. What I am missing is the possibility to have it generated on the fly via SASS to ease layout-changes and not having to regenerate the grid and re-import it.

Seems I'm not the only one, but I don't see any changes to be made to the inuit-grid, so the inuit-grid-mixin produces exactly the same output as the grid-generator does for the pixel grid (not the fluid grid). All the comments stay in SASS, so you can get rid of some extra-bytes.

To use the mixin simply put @include inuit_grid($columns, $col_width, $gutter_width) in your main SASS-file and replace $columns with the amount of columns your grid should have, $col_width with the width of a column in pixel, 20px for example, and $gutter_width with the pixels you want as space between the columns. And there you go.

I decided to use real SASS, not SCSS because SASS definitely spares us a bit more of the typing than SCSS does. For the use of the grid visit its site or take a look at a tutorial. However: have fun and thanks to Harry Roberts for the good work.

Download the SASS-file

@mixin inuit_grid($columns, $col_width, $gutter_width)
// Page wrapper. Apply to the body where possible, as per: http://csswizardry.com/2011/01/using-the-body-element-as-a-wrapper/
.wrapper
width: $columns * $col_width + $columns * $gutter_width - $gutter_width
margin: 0 auto
padding: 0 $gutter_width / 2
// Most frameworks rely on class="end" or similar to remove the margin from the last column in a row of grids. We don't want to do that so we use a combination of margin- and negative margin-left. It's clever...
// We also allow you to use grid items as stand alone columns or in a series of columns. To use a series just wrap them all in <div class="grids">...</div>
.grids
clear: both
max-width: $columns * $col_width + $columns * $gutter_width
margin: 0 0 0 0-$gutter_width
// So we can make grids out of lists
list-style: none
// Here we are using an attribute selector to detect the string 'grid-' in an element's class. This works by assuming that anything we call grid- we also want to be a grid item. It means less code and less for you to remember!
// Ensure any grid item's FIRST class is a grid- class. e.g.
// VALID: class="grid-4 text-centre"
// INVALID: class="left grid-4"
[class^="grid-"]
float: left
margin: 0 $gutter_width 0 0
.grids [class^="grid-"]
margin: 0 0 0 $gutter_width
// Allow nested grids:
[class^="grid-"] .grids
width: auto
margin: 0 0-$gutter_width
// create col classes
@for $i from 1 through $columns
.grid-#{$i}
width: $col_width * $i + ($i - 1) * $gutter_width
@if $i == $columns
margin: 0