TTYG — Talk To Your Grid v0.1.0

TTYG is an attempt at creating a smart SCSS grid mixin that understands human language.

Columns are on-demand, so no CSS is compiled until you ask for it through an @include command. Output is made DRY as possible, but it is advised to combine this mixin with a CSS minifier and/or mixin merger.

Demos

Browser support

Chrome (40+), Safari (8+), Firefox (35+), Opera (26+)

Is this working in older browsers? Edit the line above and send a PR.
Is this broken in a specific browser? Add an issue so it can be checked and fixed.

Contributing

TTYG opens up a lot of chaining possibilities. Below you'll find the most common use-cases, but the mixin might go haywire in complex situations. Please make an issue if you stumble upon such an exception so it can be fixed.

Roadmap aka TODO

Fork me on GitHub

Usage

To start using TTYG, include the contents of the sass folder somewhere in your project and import the base file.

@import 'ttyg';

Configuration

Configure TTYG by defining the settings map $ttyg, preferably somewhere at the top of your main stylesheet (or before the first usage of TTYG).

$ttyg(
  // Default context to use for column widths
  context: 12,

  // Default gutter spacing between columns
  // Set this to 0% for a no-gap layout
  gutter: 5%,

  // Default minimum reassembly point
  reassembly: 650px,

  // Default minimum width of a grid container
  grid-width: 1140px,

  // Default minimum padding on a page (when below grid-width)
  page-padding: 4%,

  // Font-size used to calculate em-based media-queries
  font-size: 16px
);

The keys listed above are all of the available settings and their default values.

Demos

Note:

  • Vertical spacing below was added for aesthetic reasons.
  • All demos that include a reassembly point or range are best viewed in a resizable browser.

Basic usage

Standard, auto-collapsing columns. Usage of edge signifies a column that ends a row.

@include col([number]);
12 edge
6
6 edge
4
4
4 edge
3
3
3
3 edge
2
2
2
2
2
2 edge
1
1
1
1
1
1
1
1
1
1
1
1 edge

Offset

Usage of offset (followed by an amount of columns) will push columns to the left.

@include col([number] offset [number]);
3
3 offset 6
2 offset 1
2 offset 4
2 offset 1

Centering

Good ol' margin: 0 auto; centering.

@include col([number] centered);
4 centered
8 centered

Non-reassembling

Usage of no-reassemble will not add any min-width media queries and thus columns will persist on smaller screens.

@include col([number] no-reassemble);
6 no-reassemble
6 no-reassemble
4
4
4

Push & Pull

Through usage of push and pull (followed by an amount of columns), column order can be flipped visually.

@include col();
6 push 6
First in DOM
6 pull 6
Last in DOM
3
First in DOM
3 push 6
Middle in DOM
6 pull 3
Last in DOM
4 push 8
First in DOM
4
Middle in DOM
4 pull 8
Last in DOM

Context

By using of, a different context can be used for calculating column widths.

@include col([number] of [number]);
3 of 5
2 of 5

Reassembly Point and Range

Start or end a layout on a specific point or assign it to a range by using from and to followed by a pixel value.
The latter one of the includes below would use the config reassembly point as from value.

@include col([number] from [pixel value];
@include col([number] from [pixel value] to [pixel value]);
@include col([number] to [pixel value]);
6
Default: from 650px
6 from 500px
6 to 800px
Default: from 650px
6 from 800px to 1000px

Layout Chaining

TTYG's true strength lies in the ability to chain together behaviours, by using the keyword then.
Notice how every behaviour has a specified edge? This value will be used for an :nth-child() selector in each reassembly points.

@include col([layout instruction] then [layout instruction] [...]);
6 to 800px edge 2 then 4 to 900px edge 3 then 3 edge 4
6 to 800px edge 2 then 4 to 900px edge 3 then 3 edge 4
6 to 800px edge 2 then 4 to 900px edge 3 then 3 edge 4
6 to 800px edge 2 then 4 to 900px edge 3 then 3 edge 4
6 to 800px edge 2 then 4 to 900px edge 3 then 3 edge 4
6 to 800px edge 2 then 4 to 900px edge 3 then 3 edge 4

Credits

This mixin was developed and tested on Sassmeister, a great tool that allows you to live-test Sass with both Libsass and Rubysass, and saves everything to a Github Gist.

A big thanks to Hugo Giraudel, as well as to the @import team. I borrowed quite a few of the helper functions they made available for this mixin!

And lastly, The Web's Grain by Frank Chimero really struck a chord, which is why you'll find no mentions to the word "breakpoint" (oops) in the docs of mixin comments.