le wagon - ui components design
TRANSCRIPT
![Page 1: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/1.jpg)
CSS components design
@bpapillard
![Page 2: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/2.jpg)
Components 101
Easy CSS tricks
Advanced patterns
![Page 3: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/3.jpg)
UI components ==
Elementary blocks of app design
![Page 4: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/4.jpg)
5 to 10 components to master
90% of your app design
![Page 5: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/5.jpg)
Which UI components do you know?
![Page 6: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/6.jpg)
Images
Avatar Thumbnail
![Page 7: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/7.jpg)
Buttons
Write a story
Free trial
Start now
SIGN UP
Medium
treehouse
![Page 8: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/8.jpg)
Forms
Login form (treehouse)
Search form (airbnb)
![Page 9: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/9.jpg)
Forms
Chatbox form (Intercom)
![Page 10: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/10.jpg)
Tabs / NavsMedium
ProductHunt
![Page 11: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/11.jpg)
Navbars
Medium
Github
![Page 12: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/12.jpg)
Banners
![Page 13: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/13.jpg)
Cards
![Page 14: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/14.jpg)
Cards
![Page 15: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/15.jpg)
Cards
![Page 16: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/16.jpg)
Lists
![Page 17: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/17.jpg)
Dropdown
![Page 18: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/18.jpg)
Setup
![Page 19: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/19.jpg)
Starting Boilerplate
https://github.com/Papillard/UI-sprint
Download ZIP or clone
![Page 20: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/20.jpg)
Easy CSS examples
Let’s code together
- Avatars - Buttons - Dropdowns
![Page 21: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/21.jpg)
CSS advanced patterns
![Page 22: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/22.jpg)
Gradient filter CSS
![Page 23: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/23.jpg)
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');
![Page 24: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/24.jpg)
Relative position
- Offset from initial position - A way to pin an element
Let’s offset logo on https://www.lewagon.com/
![Page 25: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/25.jpg)
Absolute position
- Offset from 1st positioned parent - If no pinned parent => body
![Page 26: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/26.jpg)
Relative / Absolute pattern
#relative { position: relative;}
![Page 27: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/27.jpg)
Relative / Absolute pattern
#relative { position: relative;}#absolute { position: absolute;}
![Page 28: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/28.jpg)
Relative / Absolute pattern
#relative { position: relative;}
#absolute { position: absolute; bottom: 10px; left: 10px;}
![Page 29: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/29.jpg)
Relative / Absolute pattern
#relative { position: relative;}
#absolute { position: absolute; top: 10px; right: 10px;}
![Page 30: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/30.jpg)
Relative / Absolute patterncard design
![Page 31: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/31.jpg)
Relative / Absolute patternbadge design
![Page 32: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/32.jpg)
Flexbox - Vocabulary
flexboxflex items
![Page 33: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/33.jpg)
Flexbox
![Page 34: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/34.jpg)
Flexbox
![Page 35: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/35.jpg)
Flexbox
![Page 36: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/36.jpg)
Flexbox
![Page 37: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/37.jpg)
Flexbox
![Page 38: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/38.jpg)
Flexbox exampleBanner design
(centering on horizontal & vertical axis)
![Page 39: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/39.jpg)
Flexbox exampletab design
![Page 40: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/40.jpg)
Flexbox examplelist item design
![Page 41: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/41.jpg)
Small gift lewagon.github.io/ui-components/
Go furtherhttp://lewagon.com/london
![Page 42: Le Wagon - UI components design](https://reader034.vdocuments.net/reader034/viewer/2022042617/5871ac441a28abda6a8b5a69/html5/thumbnails/42.jpg)
Thank you!