GSS - Layouts Not Possible Even with Tomorrow_s CSS Using Polyfills from the Future Presentation
GSS - Layouts Not Possible Even with Tomorrow_s CSS Using Polyfills from the Future Presentation
GSS - Layouts Not Possible Even with Tomorrow_s CSS Using Polyfills from the Future Presentation
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
<strong>Layouts</strong> not possible w/<br />
tomorrow’s <strong>CSS</strong> using<br />
polyfills <strong>from</strong> <strong>the</strong> future
Demo
@D4Tocchini
<strong>GSS</strong><br />
GridStyleSheets.org
<strong>GSS</strong> reimagines <strong>CSS</strong> layout & replaces <strong>the</strong><br />
browser’s layout engine <strong>with</strong> one that<br />
harnesses <strong>the</strong> Cassowary Constraint Solver —<br />
<strong>the</strong> same algorithm Apple uses to compute<br />
native layout.
Seriously, <br />
what is <strong>GSS</strong>
Like Less, Sass, Stylus<br />
<strong>Not</strong> really...
Preprocessor<br />
Flavored <strong>CSS</strong> → Compiler → Vanilla <strong>CSS</strong>
<strong>GSS</strong><br />
DOM<br />
→<br />
Flavored <strong>CSS</strong> → Compiler → JSON → Layout Engine<br />
→ →→<br />
Solver
Kewl... <br />
but why
Center Alignment...
Absolute Centering<br />
CAVEATS:<br />
• Height must be statically declared<br />
• Recommend setting overflow: auto to prevent content spillover<br />
• Doesn’t work on Windows Phone
!<br />
Negative Margins<br />
CAVEATS:<br />
• <strong>Not</strong> responsive. Doesn’t work for percentage based dimensions and can’t set min-/max-<br />
• Content can overflow <strong>the</strong> container<br />
• Have to compensate for padding or use box-sizing: border-box
Negative Translation<br />
CAVEATS:<br />
• Won’t work in IE8<br />
• Need vendor prefixes<br />
• Can interfere <strong>with</strong> o<strong>the</strong>r transform effects<br />
• Results in blurry rendering of edges and text in some cases
CAVEATS:<br />
• Non-semantic markup!<br />
Table Cell
Inline-Block<br />
CAVEATS:<br />
• Requires a container<br />
• Relies on margin-left:<br />
-0.25em; to horizontally<br />
center correctly, but<br />
may need to be<br />
adjusted for different<br />
fonts/sizes<br />
• Content block’s width<br />
must be declared to be<br />
no wider than 100% of<br />
<strong>the</strong> container minus<br />
0.25em.
CAVEATS:<br />
• No IE8-9 support<br />
• Requires a container or<br />
styles on <strong>the</strong> body<br />
• Requires many vendor<br />
prefixes <strong>with</strong> different<br />
syntaxes to work on<br />
modern browsers<br />
• <strong>Possible</strong> performance<br />
issues<br />
Flexbox
"As websites evolved...<br />
floats, were not necessarily<br />
well suited for application<br />
layout."<br />
- W3C Grid Layout Module (working draft)
#thing[center] == #o<strong>the</strong>r[center];
I can haz Relative<br />
Positioning & Sizing<br />
NO!<br />
Why<br />
Cyclic Dependencies
Cyclic Dependencies<br />
naturally occur
Cassowary Linear Arithmetic<br />
Constraint Solver
Cassowary resolves cyclic<br />
dependencies in layout<br />
arithmetic
Greg Badros
C<strong>CSS</strong><br />
Constraint <strong>CSS</strong>
C<strong>CSS</strong><br />
Relative property constraints<br />
w/ Strength & Weight<br />
#article[font-size] == #box[height] / 12 !strong
Alex Russell<br />
Cassowary.js
10 years after<br />
Cassowary
Cocoa Auto Layout
Property constraints get verbose
VFL<br />
Visual Format Language
VFL<br />
1-D alignement
<strong>GSS</strong> Modernizes & Webifies VFL
<strong>GSS</strong> Modernizes C<strong>CSS</strong>
The Apple Demo
True Source-Order<br />
Independence Demo
Hardware-Accelerated Layout Vars
Custom Variables
Custom Element Variables
Special Pseudo Selectors
Intrinsic Size & Text Reflow
VFL Connections
VFL Cushions
VFL Cushions
VFL Chains
Advanced VFL Chains
@if @else<br />
@media queries are a hack
@if @else vs. @media
Element-level Responsiveness
Gotchas
Ambiguity<br />
Add more constraints!
Constraints are 2-way<br />
takes practice thinking in constraints
Constraints must be<br />
linear
Roadmap
Precompilation<br />
<strong>GSS</strong> will work on any* browser<br />
!
VGL<br />
Visual Grid Language
Units & Values<br />
<br />
!
Animation &<br />
Physics<br />
<br />
!
@D4Tocchini<br />
D4@TheGrid.io<br />
!<br />
we’re hiring...
Change language