CSS Layout w/ HTML5 & CSS3

CSS Layout WITH

HTML5 The 5th revision of HTML CSS3 New JavaScript APIs
+ +

https://en.wikipedia.org/wiki/HTML5

Semantics Connectivity Ofﬂine & Storage Multimedia 3D graphics & effects
Performance & Integration Device Access Styling https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

Semantics Styling

Semantics Styling <header>, <footer>, <article>, <section>, <aside>, <nav>, <figure>, <audio>,
<video>, …

Semantics Styling body div id=“header” div id=“sidebar” div id=“content” div
class=“article” div class=“article” div id=“footer” body header aside section article article footer HTML4 HTML5

Semantics Styling <!DOCTYPE html> Simpliﬁed DOCTYPE

Semantics Styling <!DOCTYPE html> Compare with HTML 4.01: <!DOCTYPE HTML
PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3c.org/TR/html4/strict.dtd”> Simpliﬁed DOCTYPE

Semantics Styling

https://en.wikipedia.org/wiki/Cascading_Style_Sheets

• Selector • Box Model • Backgrounds & Border •
Text Effects • 2D/3D Transformations • Animations • Multiple Column Layout

box-radius: 5px; Box radius

box-radius: 50%; Box radius

box-shadow: 1px 1px 0px pink; Box shadow

box-shadow: 1px 1px 0px pink, -1px -1px 0px green; Box
shadow

text-shadow: 1px 1px 0px pink; Hello Hello Text shadow

h1:before, h1:after { content: “*”; color: pink; } *Hello* Pseudo
elements

@font-face { font-family: “PilGi”; src: “PilGi.otf”; } h1 { font-family:
“PilGi”; } Hello Web fonts

#container { background: #fff; display: flex; width: 900px; height: 400px;
} Flexible Boxes #container

Flexible Boxes #container #main { background: pink; } #right-col {
background: green; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }

Flexible Boxes #container #main { background: pink; width: 600px; }
#right-col { background: green; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }

Flexible Boxes #container #main { background: pink; width: 600px; }
#right-col { background: green; flex: 1; } #main #right-col #container { background: #fff; display: flex; width: 900px; height: 400px; }

Transitions div { width: 100px; } div:hover { width: 800px;
}

Transitions div { width: 100px; transition: width 2s ease-in-out; }
div:hover { width: 800px; }

Transforms Hi div { transform: rotate(45deg); }

Don’t forget vendor preﬁxes -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);
-o-transform: rotate(45deg); transform: rotate(45deg);

Preprocessors

Preprocessors .css .css .styl .sass .scss .less Myth Less Sass
Stylus Postcss

Preprocessors

Question?

CSS Layout

FLEXBOX

10+ 22+ 21+ 6.1+ 12.1+ http://caniuse.com/#search=ﬂexbox -webkit-

DEFINITION The main idea is to give the “container” the
ability to change the width & height of its children to best fill the blank space and prevent overflow.

TERMINOLOGY Flex Container 1 2 3 Flex Items

PROPERTIES Flex Container Flex Item ✦ display ✦ flex-direction ✦
flex-wrap ✦ flex-flow ✦ justify-content ✦ align-items ✦ … ✦ order ✦ flex-grow ✦ flex-shrink ✦ flex-basis ✦ align-self

GET STARTED <div class=“container”> <div class=“item”>1</div> <div class=“item”>2</div> <div class=“item”>3</div>
</div> Flex Items Flex Container

WITHOUT FLEXBOX 1 2 3

WITH FLEXBOX .container { display: flex; } 1 2 3

FLEX-CONTAINER PROPERTIES

ﬂex-direction 1 2 3 row default 3 2 1 row-reverse

ﬂex-direction 1 2 3 column 3 2 1 column-reverse

ﬂex-wrap nowrap default 1 2 3 4 5 6 wrap
1 2 3 4 5 6 wrap-reverse 1 2 3 4 5 6

ﬂex-ﬂow row nowrap default 1 2 3 4 5 6
flex-direction

ALIGMENT align-items justify-content cross-axis main-axis

justify-content ﬂex-start default 1 2 3 4 ﬂex-end 1 2
3 4

justify-content center 1 2 3 4

justify-content space-between 1 2 3 4 space-around 1 2 3
4

align-items stretch default 1 2 3 4 ﬂex-start 1 2
3 4

align-items ﬂex-end center 1 2 3 4 1 2 3
4

align-items baseline 1 2 3 4

align-content stretch default 1 2 3 4 5 6 7
8 9

align-content ﬂex-start 1 2 3 4 5 6 7 8

align-content ﬂex-end 1 2 3 4 5 6 7 8

align-content center 1 2 3 4 5 6 7 8

align-content space-between 1 2 3 4 5 6 7 8

align-content space-around 1 2 3 4 5 6 7 8

1 2 3 FLEX-ITEMS PROPERTIES

order {number} 3 1 2 4 .item3 { order: -1;
}

ﬂex-grow {number} 1 2 3 4 .item2 { flex-grow: 2;
}

ﬂex-shrink {number} 1 2 3 4 .item2 { flex-shrink: 2;
}

ﬂex-basis {size} 1 2 3 4 .item1 { flex-basis: 20px;
}

ﬂex {number} 1 2 3 4 .item { flex: 0
1 auto; } flex-grow

align-self 1 2 3 4 .item1 { align-self: flex-start; }
.item2 { align-self: stretch; } .item3 { align-self: flex-end; } .item4 { align-self: center; } default:auto

Header Footer Body Aside 1 Aside 2 http://codepen.io/cesar2535/pen/KpYqwd

RESOURCES Learn • https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties • https://css-tricks.com/snippets/css/a-guide-to-flexbox/ • http://heydesigner.com/flexbox/ • http://philipwalton.github.io/solved-by-flexbox/
• http://sixrevisions.com/css/learn-flexbox/ Bugs • https://github.com/philipwalton/flexbugs

Question? THANK!

CSS Layout w/ HTML5 & CSS3

CSS Layout w/ HTML5 & CSS3

More Decks by Cesar

Other Decks in Programming

Featured

Transcript