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.

1. CSS components
design
@bpapillard

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?

6. Images
Avatar Thumbnail

7. Buttons
Write a story
Free trial
Start now
SIGN UP
Twitter
Google
Medium
treehouse

8. Forms
Login form (treehouse)
Search form (airbnb)

9. Forms
Chatbox form (Intercom)

10. Tabs / Navs
Medium
ProductHunt
Twitter

11. Navbars
Medium
Twitter
Github

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

21. CSS advanced
patterns

22. Gradient filter CSS

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)

39. Flexbox example
tab design

40. Flexbox example
list item design

41. Small gift
lewagon.github.io/ui-components/
Go further
http://lewagon.com/london

42. Thank you!