A talk about creating the layout features we want - by hacking together the features we have and experimenting to create change.
View Slide
Hello Warszawa!
Hi, I’m Chris Wright@cwrightdesign
Sydney,Australia
https://emails.hteumeuleu.com/trying-to-make-sense-of-gmail-css-support-e88cd7995cea
layoutChangingthe game
How wesolve problems
create the features tomorrowFeatures today
Potential
Unique
Looking back
Complex
The clearfix hack
The media query
2001
Fluid image hackOne defined dimensionpreserves aspect ratio
Compressive imagesImages at double size with fullcompressionhttps://www.filamentgroup.com/lab/compressive-images.html
We make the craziest hacks
Hacks create impact
Compressive imagesFluid image hackClearfix hack
Compressive images Sizes, PictureFluid image hack Object-fitClearfix hack Display: flowroot
Hacks are our desire paths
hacksare a creative use of featuresBrilliant
Block padding is relativeto the width of the elementIntrinsic ratiopadding-top: 56.25%https://alistapart.com/article/creating-intrinsic-ratios-for-video
Quantity queriesCombining nth selectorwith general siblinghttps://alistapart.com/article/quantity-queries-for-css
Dirty hacksBrowser isolation
Hacks thatnever leave
Our needs oftengrow beyond our tools
Layout is always hacked
60+ lines of code to definecolumn behaviourFlexbox grid example
35+ lines of code anytimeyou touch a media queryFlexbox grid example
Now we have declarative grids
Total of 2 fr unitsEach is worth 1 / 2 fr units
Create white space
Across rows and columns
grid-column: span 2;
We can break out of the grid
Building up complex grids
Flexible complex grids
Simpler withVariables
Define how columns and spans collapse across viewports
Variables create relationships between values
Experimentation with values
Creating offsets
Quantity queries and Grid
Componentsmoving toward
From static pages to static devices
http://v3.danielmall.com/articles/content-display-patterns/
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/
Increased complexity,poorer maintainability
Average: 264 Media queriesOver 50 Websites
Media queries are restrictedto viewports and media types
Define once, use anywhere
Available space is the constraint
http://danielmall.com/articles/content-display-patterns/
Media queriesevolved
min-width (30 em)default component
Problems
Infinite loops
https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crpCSS Parsing
Autonomous layout
Flexbox
Flex wrap: Two fixed widths320px 480px = 800px+
Less than 800px space available
Flex-grow: 1
In practice
The flex-grow: 9999 varianthttp://joren.co/flex-grow-9999-hack/
flex: 99999flex: 1Only one has room to grow
flex: 99999flex: 1
Multi columns
Multi columnscolumn-width: 600px
Flexbox + Columns
columns: 300px
Grid: Auto-fit and auto-fill
Component based imagery
SVG has its owndocument context
SVG can also embed HTMLhttps://developer.mozilla.org/en/docs/Web/SVG/Element/foreignObject
http://jxnblk.com/fitter-happier-text/
Fluid Typography
https://www.smashingmagazine.com/2016/05/fluid-typography/
Font-size: 50ctw(not real CSS, I wish)
ResizeObserver
We can use CSS Variables to communicate
Getting variables via JS
Setting variables via JS
Container basedfluid typography
In the browser
The problem withreporting element size directly
CSS can’t range match a selector
Communicate shape
An preview might exist with different shapeshttp://lincolnloop.github.io/element-queries-example/
Feedback
Experiment
Make visible
Thank you
cwrightdesign
masayaaoyama
yusukebe
zoetrope
chatii
kubotak
blackbracken
hiro_y
yutootsuka
dicoding
star_zero
alexandresalome
sji
carmenintech
colly
maggiecrowley
denniskardys
garrettdimon
erikaheidi
myddelton
schacon
thoeni
addyosmani
rasmusluckow
samlambert