Night of the Living Style Guide
-
Upload
andy-richardson -
Category
Technology
-
view
325 -
download
2
Transcript of Night of the Living Style Guide
![Page 1: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/1.jpg)
![Page 2: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/2.jpg)
• Front-End Developer @kohactive
• Client Work
• Internal Projects
RELEVANT INFO:
![Page 3: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/3.jpg)
![Page 4: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/4.jpg)
• What are style guides?
• Why use style guides?
• How to implement style guides
![Page 5: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/5.jpg)
WHAT ARE STYLE GUIDES?
![Page 6: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/6.jpg)
CODE STYLE GUIDEhttps://github.com/airbnb/javascript
![Page 7: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/7.jpg)
CODE STYLE GUIDEhttps://github.com/airbnb/javascript
![Page 8: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/8.jpg)
![Page 9: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/9.jpg)
![Page 10: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/10.jpg)
![Page 11: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/11.jpg)
![Page 12: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/12.jpg)
PATTERN LIBRARYhttp://patternprimer.adactio.com/
![Page 13: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/13.jpg)
WHY USE STYLE GUIDES?
![Page 14: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/14.jpg)
CONSISTENCY & REUSE
![Page 15: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/15.jpg)
CONSISTENCY & REUSE
![Page 16: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/16.jpg)
CONSISTENCY & REUSE
![Page 17: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/17.jpg)
CONSISTENCY & REUSE
![Page 18: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/18.jpg)
QUICK LEARNING & REFRESHING
![Page 19: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/19.jpg)
HOW TO IMPLEMENT STYLE GUIDES
![Page 20: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/20.jpg)
1. STATIC
![Page 21: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/21.jpg)
1. STATIC
![Page 22: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/22.jpg)
2. KSShttp://warpspire.com/kss/
![Page 23: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/23.jpg)
2. KSS
![Page 24: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/24.jpg)
2. KSShttp://warpspire.com/kss/
• Knyle Style Sheets
• by Kyle Neath
• CSS, Sass(scss/sass), LESS
![Page 25: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/25.jpg)
2. KSShttp://warpspire.com/kss/
![Page 26: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/26.jpg)
2. KSShttp://warpspire.com/kss/
![Page 27: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/27.jpg)
2. KSShttp://warpspire.com/kss/
![Page 28: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/28.jpg)
3. HAUTE
ALPHA
![Page 29: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/29.jpg)
3. HAUTE
![Page 30: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/30.jpg)
DEMO!
![Page 31: Night of the Living Style Guide](https://reader034.fdocuments.in/reader034/viewer/2022042716/55be0bb8bb61ebb76f8b4696/html5/thumbnails/31.jpg)
• @and1mal
• andimal.co
• @kohactive
• kohactive.com
• https://github.com/airbnb/javascript
• http://patternprimer.adactio.com/
• http://warpspire.com/kss/
• http://kohactive.github.io/haute-osx