¯\_(ツ)_/¯
Grids + Systems
The Past
remember tables?
It’s a hack!
(obvs)
👍
Clear Grid + Two Dimensions (kinda)
See the Pen Tables by Miriam Suzanne (@mirisuzanne) on CodePen.
👎
Limited Styling + Strict Markup
👎
Accessibility Nightmare
Hey look, CSS!
Everything is going to be OK…
The Box Model
IE got it right!
See the Pen Box Model by Miriam Suzanne (@mirisuzanne) on CodePen.
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
See the Pen Flow! by Miriam Suzanne (@mirisuzanne) on CodePen.
See the Pen !Flow by Miriam Suzanne (@mirisuzanne) on CodePen.
Whenever You Can…
Go With The Flow
CSS Floats?
Not the worst option…
👎
It’s a Hack!
See the Pen Proper Floating by Miriam Suzanne (@mirisuzanne) on CodePen.
👍
Kinda Flows…
See the Pen Flow: Kinda by Miriam Suzanne (@mirisuzanne) on CodePen.
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…
See the Pen Overflow: Hidden (Hack) by Miriam Suzanne (@mirisuzanne) on CodePen.
👍
Nesting Freedom!
See the Pen Nesting Freedom by Miriam Suzanne (@mirisuzanne) on CodePen.
Full-height with Floats
kinda fragile…
See the Pen Full-height Floats by Miriam Suzanne (@mirisuzanne) on CodePen.
👎
Sub-Pixel Rounding
Not as bad as before…
Backgrounds Still Round Badly
See the Pen SubPixel Rounding by Miriam Suzanne (@mirisuzanne) on CodePen.
Float Isolation?
Usually overkill…
See the Pen Float Isolation by Miriam Suzanne (@mirisuzanne) on CodePen.
An (Old) Isolation Trick
See the Pen Responsive CSS Tabs by Miriam Suzanne (@mirisuzanne) on CodePen.
-
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>
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()
See the Pen Padding or Calc() by Miriam Suzanne (@mirisuzanne) on CodePen.
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();
}
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.
Flexbox?
Kinda like floats, but usually better…
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;
}
Full-Height with Flexbox
things flex & flow!
See the Pen Full-height Flexbox by Miriam Suzanne (@mirisuzanne) on CodePen.
👍
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…
See the Pen Full-height Grid by Miriam Suzanne (@mirisuzanne) on CodePen.
See the Pen Scenario Detail Grid Concept by Miriam Suzanne (@mirisuzanne) on CodePen.
👍
Two Dimensions!
👍
(Mostly) Flexible Markup Order!
👎
Nesting Matters Still
Wish List (Coming Soon to CSS)
subgrid for nested grids
display: contents for nested everything…
