O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Flexing Your WordPress Themes

Learn more about the CSS Flexible Layout module and how you can incorporate it into your WordPress themes.

  • Entre para ver os comentários

Flexing Your WordPress Themes

  1. 1. FLEXING YOUR WORDPRESS THEMES
  2. 2. Web Developer @ Endo Creative Developing in WordPress since 2014 Twitter: @tim_blodgett
  3. 3. WEB LAYOUT HISTORY
  4. 4. No Layout
  5. 5. No Layout
  6. 6. Table Layout
  7. 7. Table Layout
  8. 8. Float-Based Layout
  9. 9. Flexible Layout
  10. 10. Grid Layout
  11. 11. WHY NOW?
  12. 12. WHY NOW?
  13. 13. FLEXBOX COMPONENTS
  14. 14. Flex Container
  15. 15. Flex Items
  16. 16. <div class=“flex-container”> <div class=“flex-item”>lorem</div> <div class=“flex-item”>ipsum</div> <div class=“flex-item”>foobar</div> </div>
  17. 17. FLEX CONTAINER PROPERTIES
  18. 18. flex-direction row row-reverse column column-reverse
  19. 19. flex-wrap nowrap wrap wrap-reverse
  20. 20. flex-flow flex-direction flex-wrap flex-flow: row-reverse wrap;
  21. 21. justify-content flex-start flex-end center space-between space-around
  22. 22. align-items flex-start flex-end center stretch baseline
  23. 23. align-content flex-start flex-end center space-between space-around stretch
  24. 24. FLEX ITEM PROPERTIES
  25. 25. flex flex-grow flex-shrink flex-basis flex: 0 1 auto;
  26. 26. flex-grow a number that dictates what amount of the available space inside the container the item should take up (negative numbers are invalid)
  27. 27. flex-shrink a number that defines the ability for a flex item to shrink if necessary (negative numbers are invalid)
  28. 28. flex-basis a size value that defines the default size of an element before the remaining space is distributed
  29. 29. order a number that dictates the order in which the flex item is displayed (works similar to z-index)
  30. 30. align-self flex-start flex-end center stretch baseline
  31. 31. PERFECTLY CENTERED CONTENT
  32. 32. <p class=“flex-trick”>Center Me</p> .flex-trick { display: flex; align-items: center; justify-content: center; width: 100%; height: 20em; }
  33. 33. SET FOOTER TO BOTTOM OF PAGE
  34. 34. <div class=“site”> <header class=“site-header”>...</header> <div class=“site-content”>...</div> <footer class=“site-footer”>...</footer> </div>
  35. 35. html, body { height: 100% } .site { display: flex; flex-direction: column; justify-content: space-between; } .site-footer { margin-top: auto; }
  36. 36. CSS Flexible Box Layout Module Level 1 https://www.w3.org/TR/css-flexbox-1/ A Complete Guide to Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Flexbugs https://github.com/philipwalton/flexbugs Flexbox Froggy – A game for learning CSS flexbox http://flexboxfroggy.com/
  37. 37. THANK YOU!! Twitter: @tim_blodgett
  38. 38. QUESTIONS?

×