Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

CSS Layout w/ HTML5 & CSS3

Avatar for Cesar Cesar
August 14, 2015
Programming
2
100

CSS Layout w/ HTML5 & CSS3

Avatar for Cesar

Cesar

August 14, 2015
Tweet

More Decks by Cesar

See All by Cesar
Webpack
Avatar for Cesar cesar2535
1
460
Front-End workflows
Avatar for Cesar cesar2535
0
83

Other Decks in Programming

See All in Programming
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
Avatar for IKEDA Yasunobu clockmaker
18
7.2k
まだ間に合う！Claude Code元年をふりかえる
Avatar for nogu nogu66
3
410
「コードは上から下へ読むのが一番」と思った時に、思い出してほしい話
Avatar for HideyukiKitao panda728
PRO
38
25k
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
120
LLM Çağında Backend Olmak: 10 Milyon Prompt'u Milisaniyede Sorgulamak
Avatar for Selçuk Usta selcukusta
0
110
Context is King？ 〜Verifiability時代とコンテキスト設計 / Beyond "Context is King"
Avatar for r-kagaya rkaga
6
1k
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
28k
從冷知識到漏洞，你不懂的 Web，駭客懂 - Huli @ WebConf Taiwan 2025
Avatar for Huli aszx87410
1
810
sbt 2
Avatar for kenji yoshida xuwei_k
0
260
開発に寄りそう自動テストの実現
Avatar for Hiroki Iseri goyoki
1
760
Rediscover the Console - SymfonyCon Amsterdam 2025
Avatar for Robin Chalas chalasr
2
160
STYLE
Avatar for Koichi ITO koic
0
150

Featured

See All Featured
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.8k
Visualization
Avatar for Eitan Lees eitanlees
150
16k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.5k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.9k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
58
6.1k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9k

Transcript

  1. CSS Layout WITH

  2. HTML5 The 5th revision of HTML CSS3 New JavaScript APIs

    + +

  3. CSS3

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

  5. Semantics Connectivity Offline & Storage Multimedia 3D graphics & effects

    Performance & Integration Device Access Styling https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

  6. Semantics Styling

  7. Semantics Styling <header>, <footer>, <article>, <section>, <aside>, <nav>, <figure>, <audio>,

    <video>, …

  8. 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

  9. Semantics Styling <!DOCTYPE html> Simplified DOCTYPE

  10. 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”> Simplified DOCTYPE

  11. Semantics Styling

  12. Semantics Styling

  13. Semantics Styling

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

  15. • Selector • Box Model • Backgrounds & Border •

    Text Effects • 2D/3D Transformations • Animations • Multiple Column Layout

  16. box-radius: 5px; Box radius

  17. box-radius: 50%; Box radius

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

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

    shadow

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

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

    elements

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

    “PilGi”; } Hello Web fonts

  23. #container { background: #fff; display: flex; width: 900px; height: 400px;

    } Flexible Boxes #container

  24. Flexible Boxes #container #main { background: pink; } #right-col {

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

  25. Flexible Boxes #container #main { background: pink; width: 600px; }

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

  26. 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; }

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

    }

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

    }

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

    div:hover { width: 800px; }

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

    div:hover { width: 800px; }

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

  32. Don’t forget vendor prefixes -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg); transform: rotate(45deg);

  33. Preprocessors

  34. Preprocessors .css .css .styl .sass .scss .less Myth Less Sass

    Stylus Postcss

  35. Preprocessors

  36. Question?

  37. CSS Layout

  38. FLEXBOX

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

  40. 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.

  41. TERMINOLOGY Flex Container 1 2 3 Flex Items

  42. 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

  43. 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

  44. WITHOUT FLEXBOX 1 2 3

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

  46. FLEX-CONTAINER PROPERTIES

  47. flex-direction 1 2 3 row default 3 2 1 row-reverse

  48. flex-direction 1 2 3 column 3 2 1 column-reverse

  49. flex-wrap nowrap default 1 2 3 4 5 6 wrap

    1 2 3 4 5 6 wrap-reverse 1 2 3 4 5 6

  50. flex-flow row nowrap default 1 2 3 4 5 6

    flex-direction

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

  52. justify-content flex-start default 1 2 3 4 flex-end 1 2

    3 4

  53. justify-content center 1 2 3 4

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

    4

  55. align-items stretch default 1 2 3 4 flex-start 1 2

    3 4

  56. align-items flex-end center 1 2 3 4 1 2 3

    4

  57. align-items baseline 1 2 3 4

  58. align-content stretch default 1 2 3 4 5 6 7

    8 9

  59. align-content flex-start 1 2 3 4 5 6 7 8

  60. align-content flex-end 1 2 3 4 5 6 7 8

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

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

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

  64. 1 2 3 FLEX-ITEMS PROPERTIES

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

    }

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

    }

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

    }

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

    }

  69. flex {number} 1 2 3 4 .item { flex: 0

    1 auto; } flex-grow

  70. 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

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

  72. 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

  73. Question? THANK!