Skip to content

Instantly share code, notes, and snippets.

@mirisuzanne
Last active December 14, 2015 23:29
Show Gist options
  • Save mirisuzanne/5165786 to your computer and use it in GitHub Desktop.
Save mirisuzanne/5165786 to your computer and use it in GitHub Desktop.
// ----------------------------------------------
// I want to define the important layout settings
// $columns: <integer> | <list>;
$columns: 12;
// $gutters: <ratio>;
$gutters: .25;
// $column-width: auto | <length>;
$column-width: auto;
// $container: auto | <length>;
$container: auto;
// -----------------------------------------------------
// I want to store an entire layout in a single variable
//
// - [container], columns, spacing
// - container is an (optional) length
// - columns can be an integer or list
// - spacing defines column-to-gutter size as two lengths, or single float ratio
// (these can be used to set $column-width and $gutters)
$symmetrical: 4 .25;
$symmetrical-specific: 960px 12 (60px 20px);
$symmetrical-extended: (1 1 1 1) .25;
$asymmetrical: (1 3 5 2 1) .25;
$asymmetrical-specific: 80% (1 3 5 2 1) (3em 1em);
// --------------------------------------------------
// I want to override all the global settings at once
$any-layout: 660px 12 (60px 20px);
@include set-layout($any-layout);
// ------------------------------------------
// I want to use explicit breakpoint handling
//
// - set a breakpoint (using breakpoint plugin)
// - set a layout
$breakpoint: 50em;
$large: 12 .25;
@include breakpoint($break) {
@include layout($large) {
/* do what I want */
}
}
// ---------------------------------------
// I to return the width of a column-group
//
// - columns
// - [optional] context
// - [optional] location
$width: span(3);
$nested: span(3 of 6);
$asymmetric: span(3 at 3 of (1 3 5 4 2));
$shortcut: span(last 3 of (1 3 5 4 2));
// ---------------------------------------------
// I want to return the width of a single gutter
//
// - [optional] context
$gutter: gutter();
$gutter: gutter(6);
$gutter: gutter(1 3 5 6 4 2);
@mirisuzanne
Copy link
Author

static wouldn't be on the same level as float/isolate/flexbox of course - that would be a different thing, but still an output-related setting.

Now that I think about it, I wonder what flexbox grids actually would look like. I don't really know. Has anyone done a lot of work on that?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment