Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Layout w/ HTML5 & CSS3

Avatar for Cesar Cesar
August 14, 2015
Programming
2
99

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
450
Front-End workflows
Avatar for Cesar cesar2535
0
79

Other Decks in Programming

See All in Programming
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
Avatar for RIZAPテクノロジーズ rizap_tech
0
7.7k
なんでRustの環境構築してないのにRust製のツールが動くの？ / Why Do Rust-Based Tools Run Without a Rust Environment?
Avatar for TOMIKAWA Sotaro ssssota
14
46k
Go言語はstack overflowの夢を見るか？
Avatar for Takuto Nagami logica0419
0
610
あなたとKaigi on Rails / Kaigi on Rails + You
Avatar for Hiroshi Shimoju shimoju
0
190
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
Avatar for mazrean mazrean
0
110
contribution to astral-sh/uv
Avatar for Shunsuke Tsuchiya shunsock
0
540
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
Avatar for Masahiro Nishimi masahiro_nishimi
4
16k
釣り地図SNSにおける有料機能の実装
Avatar for nokonoko1203 nokonoko1203
0
200
Ktorで簡単AIアプリケーション
Avatar for Keita Tsukamoto tsukakei
0
110
kiroとCodexで最高のSpec駆動開発を！！数時間で web3ネイティブなミニゲームを作ってみたよ！
Avatar for Haruki Kondo mashharuki
0
930
チームの境界をブチ抜いていけ
Avatar for tokai235 tokai235
0
230
pnpm に provenance のダウングレード を検出する PR を出してみた
Avatar for mattsuu ryo_manba
1
160

Featured

See All Featured
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
2.9k
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
7k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
Avatar for Michelle Schulp Hunt marktimemedia
31
2.6k
KATA
Avatar for Megan Lloyd mclloyd
PRO
32
15k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.5k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
44
7.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
22k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
23k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k

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!