Don’t Use My Grid System

https://oddbooksapp.com/book/css-layout

@MiriSuzanne | @OddBird | @SassSusy

¯\_(ツ)_/¯

Another F*cking Grid System

Flashback: The History of Web Layout…

Chapter 1: Tables

1994

“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

(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…

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

Limited Uses

containers?

Border-Box

box = width|height

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

See the Pen Flow! by Miriam Suzanne (@mirisuzanne) on CodePen.

Avoid Tightly Coupled Elements

components respond to unexpected changes

See the Pen !Flow by Miriam Suzanne (@mirisuzanne) on CodePen.

See the Pen To Flow or Not To Flow by Miriam Suzanne (@mirisuzanne) on CodePen.

Chapter 4: Positioning!?

Position: Relative

Similar to transform: translate()

(based on flow, but has no effect)

¯\_(ツ)_/¯

Only For Establishing Context

Position: Absolute/Fixed

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!

Kinda Flows…?

See the Pen Flow: Kinda by Miriam Suzanne (@mirisuzanne) on CodePen.

This Makes Sense For Text-Wrap

Add a ClearFix (Hack)!

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

See the Pen Flow: Kinda (Clearfix) by Miriam Suzanne (@mirisuzanne) on CodePen.

display: flow-root

the new clearfix alternative…

Overflow: Hidden

(Hack) for fluid columns, and clearing containers…

See the Pen Overflow: Hidden (Hack) by Miriam Suzanne (@mirisuzanne) on CodePen.

¯\_(ツ)_/¯

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?

demo by John Resig

Modern Browsers

sub-pixel browser rendering vs. float isolation

See the Pen Don't bother with "isolation" in modern browsers by Miriam Suzanne (@mirisuzanne) on CodePen.

See Responsive Design’s Dirty Little Secret by John Albin Wilkins

Backgrounds Still Round Badly

(even if you try isolating them)

See the Pen SubPixel Rounding by Miriam Suzanne (@mirisuzanne) on CodePen.

Chapter 6: Inline Block!

👎

Don’t Bother

invasive and confusing!

Chapter 7: Display-Table?

One Row at a Time…

See the Pen Display Table by Miriam Suzanne (@mirisuzanne) on CodePen.

no margins, use border-padding

¯\_(ツ)_/¯

Kinda Nifty Hack?

Chapter 8: Grid Systems

a detour…

Columns & Gutters

Horizontal Spans

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

(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

No Edge Cases

<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…

<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…

See the Pen It depends by Rachel Smith (@rachsmith) on CodePen.

by Rachel Smith

Are You MailForce or InstaFace?

OddBird

Small Team, Outside Consulting

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

👍

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

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)

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

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!

👍

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)

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?

Actual, Real, Layout In The Browser

this is not a drill

Nothing like it, at all

The Spec is Complex…

Getting Started Is Not

Using CSS Grid in the Real World

5:00pm - Brenda Storer

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

Also: Negative 1-indexed

Column/Row Gaps

Placement of Grid-Items

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

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

Named Grid Areas

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;">

See the Pen Bar chart in CSS grid + variables by Miriam Suzanne (@mirisuzanne) on CodePen.

https://css-tricks.com/css-charts-grid-custom-properties/

👍

Two Dimensions!

columns & rows

👍

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

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…

So Don’t Use Grid Systems!

https://oddbooksapp.com/book/css-layout

@MiriSuzanne | @OddBird | @SassSusy

Epi-Epilogue: Going Too Far

Susy CSS (for fun)

See the Pen SusyCSS by Miriam Suzanne (@mirisuzanne) on CodePen.

See the Pen SusyCSS Demo by Miriam Suzanne (@mirisuzanne) on CodePen.

I’m Sorry, Web

https://oddbooksapp.com/book/css-layout

@MiriSuzanne | @OddBird | @SassSusy