Le Wagon - UI components design
40 likes26,786 views
The document discusses essential CSS components for app design, highlighting 5 to 10 key components that can significantly enhance UI design. It covers various UI elements such as forms, buttons, and tabs, alongside advanced CSS techniques like gradient filters and positioning methods. The document also provides links to examples and resources for further learning and practical coding exercises.
Le Wagon - UI components design
- 2. Components 101 Easy CSS tricks Advanced patterns
- 3. UI components == Elementary blocks of app design
- 4. 5 to 10 components to master 90% of your app design
- 5. Which UI components do you know?
- 7. Buttons Write a story Free trial Start now SIGN UP Twitter Google Medium treehouse
- 8. Forms Login form (treehouse) Search form (airbnb)
- 12. Banners
- 13. Cards
- 14. Cards
- 15. Cards
- 16. Lists
- 17. Dropdown
- 18. Setup
- 19. Starting Boilerplate https://github.com/Papillard/UI-sprint Download ZIP or clone
- 20. Easy CSS examples Let’s code together - Avatars - Buttons - Dropdowns
- 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. Relative position - Offset from initial position - A way to pin an element Let’s offset logo on https://www.lewagon.com/
- 25. Absolute position - Offset from 1st positioned parent - If no pinned parent => body
- 26. Relative / Absolute pattern #relative { position: relative; }
- 27. Relative / Absolute pattern #relative { position: relative; } #absolute { position: absolute; }
- 28. Relative / Absolute pattern #relative { position: relative; } #absolute { position: absolute; bottom: 10px; left: 10px; }
- 29. Relative / Absolute pattern #relative { position: relative; } #absolute { position: absolute; top: 10px; right: 10px; }
- 30. Relative / Absolute pattern card design
- 31. Relative / Absolute pattern badge design
- 32. Flexbox - Vocabulary flexboxflex items
- 33. Flexbox
- 34. Flexbox
- 35. Flexbox
- 36. Flexbox
- 37. Flexbox
- 38. Flexbox example Banner design (centering on horizontal & vertical axis)
- 40. Flexbox example list item design
- 41. Small gift lewagon.github.io/ui-components/ Go further http://lewagon.com/london
- 42. Thank you!