CSS Layouting::putting things into place

Talk I gave @ Developers Boituva Meetup #1

Transcript

1. CSS layouting:: putting things into place felipe bernardes 24.07.2017
2. ~ $ whoami felipebernardes http://felipebernardes.github.io #votorantim http://tegra.me 3
3. codepen meetup brazil
4. sorocabacss
5. grupy sp sorocabacss guru sorocaba python sorocaba codepen meetup brazil semana da tecnologia @ fatec sorocaba
6. grupy sp sorocabacss guru sorocaba python sorocaba developers boituva codepen meetup brazil semana da tecnologia @ fatec sorocaba
7. layout noun. The way in which the parts of something are arranged or laid out. oxford english dictionary
8. properties • normal flow • float • display • position • transform • grid module • flexbox module
9. normal flow is the default positioning of html elements based on it's order and hierarchy.
10. float property specifies where an element should be placed, out of normal flow, along left or right side of its container, where text and inline elements will wrap around it. https://developer.mozilla.org/ en-US/docs/Web/CSS/float https://codepen.io/ felipebernardes/pen/JJyeMg
11. display property specifies the type of rendering box used for an element. https://developer.mozilla.org/ en-US/docs/Web/CSS/display https://codepen.io/ felipebernardes/pen/XgaPBd
12. position property chooses alternative rules for positioning elements. https://developer.mozilla.org /en-US/docs/Web/CSS/position https://codepen.io/ felipebernardes/pen/NgvEyw
13. transform property lets you modify the coordinate space of the element to be translated, rotated, scaled, and skewed. https://developer.mozilla.org /en-US/docs/Web/CSS/transform https://codepen.io/ felipebernardes/pen/BZdGOd
14. grid module is a shorthand property that sets all of the grid properties in a single declaration. https://developer.mozilla.org /en-US/docs/Web/CSS/grid https://codepen.io/ felipebernardes/pen/EWpaYb
15. flexbox module is a shorthand property specifying the ability to alter its dimensions to fill available space. https://developer.mozilla.org /en-US/docs/Web/CSS/flex https://codepen.io/ felipebernardes/pen/yXoQGR
16. references • w3c • mdn • csstricks • alistapart • learnlayout • codepen top 100 • redit.com/r/web_design
17. next steps • practice a little bit • teach what you know • practice a little bit • teach what you know • practice a little bit • teach wnat you know • practice a little bit
18. slides @ speakerdeck.com/felipebernardes
19. valeu! bernardes.flp@gmail.com felipebernardes.github.io