Susy

¯\_(ツ)_/¯

Another F*cking Grid System

It's only a flashback

Flashback: The History of Web Layout

Chapter 1: Tables

1994

Young OddBirds

Tables

“Tables Are For Data

👎

Strict (non-linear) Markup

👎

Limited Styling

👎

Accessibility Nightmare

(when used for layout)

(Also An SEO/Legal Problem)

do it for the robot lawyers!

Code is Communication

—Sarah Drasner

Meaningful to Humans & Machines

Table Layouts Destroy Meaning

for everyone involved

(╯°□°)╯┻━┻

Chapter 2: CSS Is Awesome

1996 / 2000

The End

CSS is Awesome

(this is a feature)

don’t be fooled…

Declarative Syntax != Static Results

Dynamic Relationships

How Will This Change…?

…when the content changes?

(auto height & width)

…when the viewport changes?

(fluid layouts & media-queries)

…when the context changes?

(the cascade)

Design Implicit Relationships

Client Control Over Final Results

you’re not in a print shop any more…

All the devices

that’s, like, a small fraction of your audience?

!= 👨

Chapter 3: Layout Concepts

» The Box Model (is broken)

Default: Content-Box

box = width|height + borders + padding

content-box sizing

Limited Uses

containers?

Border-Box

box = width|height

border-box sizing

Fix It Everywhere

*, ::before, ::after {
  box-sizing: border-box;
}

👎

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
}

Would you inherit margins?

» Go With The Flow

Avoid Tightly Coupled Elements

components respond to unexpected changes

Chapter 4: Positioning!?

Position: Relative

Position Relative

Similar to transform: translate()

(based on flow, but has no effect)

¯\_(ツ)_/¯

Only For Establishing Context

Position: Absolute/Fixed

Position Absolute

Removed From The Flow Entirely…

relative to positioned ancestor (absolute) or viewport (fixed)…

¯\_(ツ)_/¯

Only For Overlays

off-canvas, modals, menus, tooltips, etc…

Chapter 5: Floats!

Floated images in text

Kinda Flows…?

This Makes Sense For Text-Wrap

Floated images in text

Add a ClearFix (Hack)!

// "Micro" Clearfix Class
.clearfix::after {
    clear: both;
    content: ' ';
    display: table;
}

display: flow-root

the new clearfix alternative

Poor browser support

Overflow: Hidden

(Hack) for fluid columns, and clearing containers


(be careful)

¯\_(ツ)_/¯

not the worst hacks

👍

Flexible Markup & Nesting!

<section>
  <div class="float">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis laudantium ea tenetur quas incidunt. Voluptatibus veritatis, rerum vitae illum, recusandae quis. Recusandae quisquam sunt id, eius debitis quos animi hic.
  </div>
  <div>
    <div class="next">Next! (overflow hack)</div>
    <div> <!-- They all collapse! -->
      <div>
        <div>
          <div>
            <div>
              <div>
                <div>
                  <div class="last">Last! (floating)</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

👎

Explicit Widths

floats aren’t very smart about context…

Sub-Pixel Rounding?

Don’t Worry

What is 25% of 50px… in 2008?


Old subpixel rounding diagram

demo by John Resig

Chapter 6: Inline Block!

👎

Don’t Bother

invasive and confusing!

Chapter 7: Display-Table?

no margins, use border-padding

¯\_(ツ)_/¯

Kinda Nifty Hack?

Chapter 8: Grid Systems

a detour…

Columns & Gutters

grid demo

Horizontal Spans

span demo

2007: Blueprint CSS

fixed width, margin gutters on the right…

.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;}

(Olav Bjorkoy)

Remove The Last Gutter

grid demo

(or left-margins, removed on the first column)

Classes Are The API

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

2010: 960 Grids

gutters split left and right

.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;
}

(Nathan Smith)

Split [Margin] Gutters

demo

No Edge Cases

demo

<article class="grid_6">Article</article>

2009: Object Oriented CSS

simple fractions, no gutters

/* CSS Grids */
/* **************** GRIDS ***************** */
.line, .lastunit {overflow: hidden; _overflow: visible; zoom:1;width:auto !important;}
.unit{float:left;zoom:1;}
.size1on1{float:none;}
.size1on1{float:none;}
.size1on2{width:50%;_width:49.9% !important;}
.size1on3{width:33.33333%;_width:33.25% !important;}
.size2on3{width:66.66666%;_width:66.65% !important;}
.size1on4{width:25%;_width:24.95% !important;}
.size3on4{width:75%;_width:74.95% !important;}
.size1on5{width:20%;_width:19.95% !important;}
.size2on5{width:40%;_width:39.95% !important;}
.size3on5{width:60%;_width:59.95% !important;}
.size4on5{width:80%;_width:79.95% !important;}
.lastunit {float:none;_float:right;}

(Nicole Sullivan)

No Margin Gutters

technically, no grid

inside demo

<article class="unit size3on4 lastunit">Article</article>

👍

Shared Browser Hacks

(maybe the driving force)

👍

Consistent Patterns

👍

Developers Can Ignore CSS

👎

Developers Ignore CSS

👎

Frameworks Lock You In

fine until you try something new…

Are You MailForce or InstaFace?

Mina Campaign Rally

OddBird now

OddBird

Small Team, Outside Consulting

CSS Systems by Natalie Downe

Consistent Systems

Custom Grids

“Tiny Bootstraps For Every Client

—Dave Rupert (not the spy)

(ClearLeft is an Agency)

Questions

Static, fluid, elastic, or a combo?

equal columns, or asymmetrical? how many?

gutters in padding, left, right, or split-margins?

responsive in what ways?

👍

Adaptive Before Media-Queries

fluid (%) grids, with elastic (em) containers

👍

Project-Defined Restrictions

👍

Project-Defined API

👎

Can Be Ugly 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%
}

Susy

just add meaning

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

Susy first commit

👍

Any Grid System, On Demand

$blueprint: (
  'columns': susy-repeat(12, 30px),
  'gutters': 10px,
  'spread': 'narrow',
  'container-spread': 'narrow',
);
$960: (
  'columns': susy-repeat(12, 60px),
  'gutters': 20px,
  'spread': 'narrow',
  'container-spread': 'wide',
);

👎

Grid Systems Are Still Overkill

Chapter 9: DIY Grids

with any technique…

Fluid Math

target / context == multiplier

Span 6 of 12

Grid Math

Sass Math

width: percentage(target / context)

CSS Math

width: calc(target / context)

Gutters Ruin The Math

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

No More Gutters

.element {
  width: percentage(3/12);
}
.element {
  width: calc(3 / 12 * 100%);
}

👍

CSS Systems + OOCSS + Susy

simple math, open system, no framework

👍

Works With Any Technique

float, flexbox, display-table, etc…

👍

Padding Gutters As Needed

Chapter 10: Custom Properties

(aka CSS Variables)

--property-name: any value;

var( --property-name , fallback)

custom property support

calc( var( --span ) / var( --columns ) * 100% )

calc support

Inheritance & Media Queries

/* define the grid in one place */
:root {
  --columns: 3;
  --gutters: 0.5em;

  @media (min-width: 50em) {
    --columns: 6;
    --gutters: 1em;
  }
}

Basic Span Mixin

/* these properties don't inherit */
* {
  --width: calc(var(--span) / var(--columns) * 100%);
  width: var(--width, initial);
}

Complete Grid System

.item {
  --span: 1;
  float: left;
  padding: var(--gutters);
}

👍

Plain Old CSS

👍

Very Little Code

👍

Understands The DOM

👎

Implicit Relationships > Explicit Grids

let the browser figure it out…

Chapter 11: Flexbox!

Flexbox

👍

Finally Not a Hack!!

kinda like floats+display-table…

All About Relationships

how to use leftover space

flex: 2 1 20em

relative & ideal sizing

justify-content: space-between

distributed white space

¯\_(ツ)_/¯

Single-Axis Layout

(with line wrapping)

Flexbox Axis

flex-direction: row-reverse

control the axis

align-items: stretch

cross-axis alignment

Equal-Height Columns, Vertical-Centering, etc!

order: 2

flexible source-order

👎

Nesting Matters Too Much

We need display: contents

👍

Relationships & Control!

👎

Poor Performance on Full Pages

Chapter 12: OMG CSS Grid

why did we even talk about anything else?

OMG Mina

Actual, Real, Layout In The Browser

this is not a drill

Caniuse Grids

Nothing like it, at all

The Spec is Complex

Getting Started Is Not

Using CSS Grid in the Real World

5:00pm - Brenda Storer

Grid Talk

Grids Defined On Containers

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 1fr;
  grid-gap: 10px;
}

% defines a fraction of total space

vw defines a fraction of the viewport

fr defines a fraction of remaining space

1fr == minmax(auto, 1fr)

use minmax(0, 1fr) to allow shrinking

Lines 1-indexed

Grid Lines

Also: Negative 1-indexed

Grid Lines (negative)

Column/Row Gaps

Grid gap

Placement of Grid-Items

.red {
  grid-column: 1 / 4;
  grid-row: 2 / span 2;
}
.green {
  grid-column: 2 / -1;
  grid-row: 1 / -2;
}

Placing grid items

Named Grid Areas

Grid area desire

body {
  grid-template-areas: 'header header'
                       'nav    main'
                       'footer footer';
}

h1 { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }

👍

Data-Driven Layouts

<div style=" --start: 30; --duration: 60;">

Schedule grid

👍

Two Dimensions!

columns & rows

Grid Axis

👍

Flexible Markup Order!

👎

Nesting Still Matters

We need subgrid and display: contents

👍

All Kindsa’ Cool Shit

Autofill, Named Lines, Implicit Grids…

gridbyexample.com

usable templates, with fallbacks already written…


Rachel Andrew and Jen Simmons

Click it all together
Put your helmet on

Dragon!

Use @supports For Fallbacks

/* fallback layout… */ 

@supports (display: grid) { 
  /* grid layout… */ 
}

Epilogue: Avoiding Grid Systems

Start With CSS Grid

it’s the only real layout option…

Layouts So Easy

…You Have Time For The Fallback!

Fix the Box Model

Stay In The Flow

Think Dynamically

how do objects relate and change?

Remove Gutter Math

The world is ready for more than 12-columns

Epi-Epilogue: Going Too Far