tech talks layout
TRANSCRIPT
An Intro to FlexboxAnd Post-Modern CSS Layout
Wait… Post Modern?
2015+
2012
1990
Post-Modern EraAs more CSS3 modules are adopted, Web layout is finally reaching the peak of where we can go with art direction and the web with things such as Transforms, Flexbox, Grid Layout, Web animations and more
The Modern EraWith full adoption of CSS2.1 and the beginnings of implementation of CSS3 modules, Web design experienced the first push into truly great design. Many elements from the Classical Era were lost in The Middle Ages leading to the rise of the front-end framework...
The Middle AgesThe advent of CSS1 and CSS2 sparked amazing advancements in web layout, but also made things incredibly inconsistent, hard to work with and often quite buggy.
Classical EraIn the early 90s, Tim Berners-Lee developed the first Web browser and Web server and the languages and protocols necessary to show content.
Pre-HistoryThe Advent of modems and the rise of bulletin board systems made way for what we know today as the internet.
94-2007
1980s
Eras of Web Layout
A VERY Brief History of CSS
A VERY Brief History of CSS
1994: CSS1 Spec starts 1996: CSS1 Spec complete (IE3 kinda adopts) 1998: CSS2 Spec published 2000: IE5 reaches 99% CSS1 adoption 2000-07: CSS2/2.1 turmoil and back and forth 2011: CSS2.1 Finally finished and published
A VERY Brief History of CSS
As a result, developers have always thought…
A VERY Brief History of CSS
A VERY Brief History of CSS
The Rise of the Frameworks
A VERY Brief History of CSS
The Rise of the Frameworks
Sour
ce: h
ttps:
//web
flow.
com
/blo
g/ex
ampl
es-o
f-uni
que-
web
site
-layo
uts
A VERY Brief History of CSS
CSS3 Did Things Differently And here’s what we get
A VERY Brief History of CSS
Flexible Box Layoutor Flexbox or Flex
Layout the old (2.1) way<index.html><div class="stripe"> <div class="container"> <div class="item"> ... </div> TIMES 3 </div></div><style.scss>.stripe { background-color: #ccc; width: 100%;}.container { width: 990px; margin: 0 auto;}// .container::after {// content: " ";// clear: both;// }.item { width: 330px; float: left; //break it with padding! and border!! //padding: 20px; //border: 1px solid}
<index.html><div class="stripe"> <div class="container"> <div class="item"> ... </div> TIMES 3 </div></div>
<style.scss>.stripe { background-color: #ccc; width: 100%;}.container { width: 990px; margin: 0 auto;}.container::after { content: " "; clear: both;}.item { width: 330px; float: left; //break it with padding! and border!! //padding: 20px; //border: 1px solid}
Layout the old (2.1) way
<index.html><div class="stripe"> <div class="container"> <div class="item"> ... </div> TIMES 3 </div></div>
<style.scss>.stripe { background-color: #ccc; width: 100%;}.container { width: 990px; margin: 0 auto;}.container::after { content: " "; clear: both;}.item { width: 330px; float: left; //break it with padding! and border!! padding: 20px; border: 1px solid;}
Layout the old (2.1) way
Simple Flex Layout<index.html><div class="stripe"> <div class="container"> <div class="item"> ... </div> TIMES 3 </div></div>
<style.scss>.stripe { background-color: #ccc; width: 100%;}.container { max-width: 990px; margin: 0 auto; display: flex;}.item { flex: 1; padding: 10px; }
Simple Flex Layout<index.html><div class="stripe"> <div class="container"> <div class="item"> ... </div> TIMES 3</div>
<style.scss>...
.item { flex: 1; padding: 10px 50px;}
Simple Flex Layout<index.html><div class="stripe"> <div class="container"> <div class="item"> ... </div> TIMES 5</div>
<style.scss>...
.item { flex: 1; padding: 10px 50px;}
Simple Flex Layout<div class="flex-parent"> <div class="flex-item flex1"> <p>...</p> </div> TIMES 3</div>
<style.scss>.flex-parent { display: flex;}.flex-item { flex: 1;}.flex3 { flex: 4;}
Other Flex examples: http://codepen.io/brob/pen/eZGXKm
index.html<div class="container"> <div class="center"> <h1>Hello there!</h1> </div></div>
style.css.container { height: 100vh; position: relative;}.center { position: absolute; height: 100px; width: 50px;
margin: auto; top: 0; bottom: 0; left: 0; right: 0;}
Vertical Centering (old)
index.html<div class="container"> <div class="center"> <h1>Hello there!</h1> </div></div>
new-style.css.container { height: 100vh; display: flex;}.center { margin: auto;}
Vertical Centering (flex)
Even the “holy grail”
Even the “holy grail”<div class="container">
<div class="header"><h1>A beautiful "Holy Grail" site</h1></div>
<div class="body">
<div class="left-column column"> CONTENT </div>
<div class="middle-column column"> CONTENT </div>
<div class="right-column column"> CONTENT </div>
<div class="footer"> © Some copyright info
</div>
</div>
Main CSS.body { display: flex; align-items: baseline;}
.column { margin: 0 10px;}.left-column, .right-column { width: 200px; }.middle-column { flex: 1;}
Extraneous CSSimg { max-width: 100%;}.container { margin: 0;}.header { background: blue; color: white; padding: 20px;}
.footer { background-color: #000; color: #e1e1e1; padding: 10px 0; text-align: center;}
Can I Use Flex?
http://caniuse.com/#feat=flexbox
Other Resources
• CSS Tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• Github repo of bugs and fixeshttp://www.flexbugs.com
• My Collection of Layout examples (ever Growing)http://codepen.io/collection/XvORkb/
• Jen Simmons’ inspirational layout talkhttps://vimeo.com/147950924
Other Layout Concepts to Research
• Viewport Units (vh, vw)
• CSS Transforms
• CSS Shapes
• CSS Multicolumn layout
• CSS gradients
Questions?Twitter: @brob, @memphisww
#memtech Slack: slack.memphistechnology.org