Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Le Wagon - UI components design

18,609 views

Published on

10% of UI components makes 90% of your app design: this is the Pareto of frontend devs. Learn all the HTML/CSS tricks to design awesome components.

Published in: Technology

Le Wagon - UI components design

  1. 1. CSS components design @bpapillard
  2. 2. Components 101 Easy CSS tricks Advanced patterns
  3. 3. UI components == Elementary blocks of app design
  4. 4. 5 to 10 components to master 90% of your app design
  5. 5. Which UI components do you know?
  6. 6. Images Avatar Thumbnail
  7. 7. Buttons Write a story Free trial Start now SIGN UP Twitter Google Medium treehouse
  8. 8. Forms Login form (treehouse) Search form (airbnb)
  9. 9. Forms Chatbox form (Intercom)
  10. 10. Tabs / Navs Medium ProductHunt Twitter
  11. 11. Navbars Medium Twitter Github
  12. 12. Banners
  13. 13. Cards
  14. 14. Cards
  15. 15. Cards
  16. 16. Lists
  17. 17. Dropdown
  18. 18. Setup
  19. 19. Starting Boilerplate https://github.com/Papillard/UI-sprint Download ZIP or clone
  20. 20. Easy CSS examples Let’s code together - Avatars - Buttons - Dropdowns
  21. 21. CSS advanced patterns
  22. 22. Gradient filter CSS
  23. 23. Gradient filter CSS background: linear-gradient(angle, start_color start_point, end_color end_point), url('background.jpg'); background: linear-gradient(135deg, yellow 0%, green 50%), url('background.jpg');
  24. 24. Relative position - Offset from initial position - A way to pin an element Let’s offset logo on 
 https://www.lewagon.com/
  25. 25. Absolute position - Offset from 1st positioned parent - If no pinned parent => body
  26. 26. Relative / Absolute pattern #relative { position: relative; }
  27. 27. Relative / Absolute pattern #relative { position: relative; } #absolute { position: absolute; }
  28. 28. Relative / Absolute pattern #relative { position: relative; } #absolute { position: absolute; bottom: 10px; left: 10px; }
  29. 29. Relative / Absolute pattern #relative { position: relative; } #absolute { position: absolute; top: 10px; right: 10px; }
  30. 30. Relative / Absolute pattern card design
  31. 31. Relative / Absolute pattern badge design
  32. 32. Flexbox - Vocabulary flexboxflex items
  33. 33. Flexbox
  34. 34. Flexbox
  35. 35. Flexbox
  36. 36. Flexbox
  37. 37. Flexbox
  38. 38. Flexbox example Banner design 
 (centering on horizontal & vertical axis)
  39. 39. Flexbox example tab design
  40. 40. Flexbox example list item design
  41. 41. Small gift lewagon.github.io/ui-components/ Go further http://lewagon.com/london
  42. 42. Thank you!

×