Susy

¯\_(ツ)_/¯

Grids + Systems

The Past

remember tables?

Tables

It’s a hack!

(obvs)

👍

Clear Grid + Two Dimensions (kinda)

👎

Limited Styling + Strict Markup

👎

Accessibility Nightmare

Hey look, CSS!

Everything is going to be OK…

The Box Model

IE got it right!

Global Box-Sizing

/* Yep 👍 */
* {
  box-sizing: border-box;
}
/* Nope 👎 */
html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

👎

Relative Positioning?

All you can do is push things around…

Does Anyone Use Relative Positions?

For anything other than setting a context…

👎

Absolute Positioning?

No actual structure…

Great For Overlays… Only.

off-canvas, drop-downs, tooltips, modals, etc…

The Flow is Your Friend

Implicit Relationships

Whenever You Can…

Go With The Flow

CSS Floats?

Not the worst option…

👎

It’s a Hack!

👍

Kinda Flows

You’ll Need a ClearFix (Hack)

Apply to any container element…

// Mixin
@mixin clearfix {
  &:after {
    clear: both;
    content: ' ';
    display: table;
  }
}
// Class
.clearfix:after {
    clear: both;
    content: ' ';
    display: table;
}

Overflow Hidden (Hack)

For fluid columns…

👍

Nesting Freedom!

👎

Sub-Pixel Rounding

Not as bad as before…

Float Isolation?

Usually overkill…

  • Solves (outdated) sub-pixel rounding

  • Removes horizontal flow

  • Adds bloat

  • Uses up all your margins

Inline-Block?

Meh… 👎

Grid Systems!

Mostly using floats

2007: Blueprint CSS

.container {
  width: 950px;
  margin: 0 auto;
}
/* Sets up basic grid floating and margin. */
.column, 
.span-1, .span-2, .span-3, 
.span-4, .span-5, .span-6 {
  float: left;
  margin-right: 10px;
}

/* The last column in a row needs this class. */
.last { margin-right: 0; }

/* Use these classes to set the width of a column. */
.span-1 {width: 30px;}
.span-2 {width: 70px;}
.span-3 {width: 110px;}
.span-4 {width: 150px;}
.span-5 {width: 190px;}
.span-6 {width: 230px;}

2010: 960 Grids

.container_12,
.container_16 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
}
.grid_1, .grid_2, .grid_3,
.grid_4, .grid_5, .grid_6 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.container_12 .grid_1 {
  width: 60px;
}

.container_12 .grid_2 {
  width: 140px;
}

<article class="column col6of12 last">Article</article>

CSS Systems

Consistent Systems

Custom Patterns

tl;dr

Build Your Own Damn Grids

Grid built with percentages

Container confined with ems

target / context == multiplier

width: percentage(target / context)

👍

Super Flexible!

Shitty math…

.grid-span {
  width: percentage(((3*4em) + (2*1em)) / ((12*4em) + (11*1em))); // 23.7288136%
  margin-right: percentage(1em / ((12*4em) + (11*1em))); // 01.6949153%
  padding-left: percentage(((1*4em) + (1*1em)) / ((12*4em) + (11*1em))); // 08.4745763%
}

Patterns Add Meaning

.grid-span {
  width: span(3);
  margin-right: gutter();
  padding-left: span(1 wide);
}

Margin Gutters Ruin the Math

ditch 'em, or calc()

Susy 3 (coming within the week)

Only functions…

.container {
  width: span(all);
}

.item {
  float: left; /* or flexbox, or… */
  width: span(3);
  margin-left: span(1 wide);
  margin-right: gutter();
}

Flexbox?

Kinda like floats, but usually better

Flexbox

So Many Options

.container {
  align-items: stretch; /* equal-height! */
  display: flex;
  justify-content: space-between;
}
.container {
  align-items: center; /* vertical-centering! */
  display: flex;
  flex-direction: row-reverse;
}

👍

Flexing is Magic

👎

Still a Single Dimension

👎

Nesting Matters Too Much

👎

Not always great for page layouts

(but better than floats imho…)

👍

Super great for component layouts

CSS Grid!

Wow…

👍

Two Dimensions!

👍

(Mostly) Flexible Markup Order!

👎

Nesting Matters Still

Wish List (Coming Soon to CSS)

subgrid for nested grids

display: contents for nested everything…

Atomic Legos
Put your helmet on

Atomic Legos