OPT-IW011 Advanced CSS Concepts

Transcript

1. Advanced HTML / CSS concepts OPT-IW011 http://bit.ly/optiw011
2. December 17, 1996
3. CSS - Programming language?
5. .sidebar .main .wrapper .footer
6. .sidebar .main .wrapper 800px 200px .footer All 4 divs have padding 20px
7. .sidebar .main .wrapper Big Heading h1 Big Heading h1 : hover state .footer
8. .sidebar .main .wrapper Big Heading h1 Big Heading h1 : hover state .footer
11. .sidebar .main .wrapper 900px 250px .footer All 4 divs have padding 25px
16. CSS at scale
19. Evils at scale Repetition Inconsistency No reusability Bloat
20. Create your own micro framework 1. Create a micro framework for CSS a. Production version - minified CSS b. Development version (SCSS) - customizable variables and build CSS 2. Follow a coding standard (github/airbnb/etc)
21. Importance of a styleguide
22. Importance of a styleguide Set the standard for code quality across a codebase Promote consistency across the application Give developers a feeling of familiarity across codebases Increase speed of development
24. Core components of a framework Resets Grids Variables Colors Typography Elements - buttons, input boxes, tables, etc. Images Icons Components - navigation, cards, forms, popups, etc. Views - login form, etc. Theming
25. Philosophies
26. Philosophies BEM ITCSS OOCSS SMACSS
27. Common concepts Consistency of style Coding standards Separation of Concerns Single Responsibility Principle Immutability
28. 2009 Nicole Sullivan @stubbornella
29. OOCSS: Lego driven development
31. > global reset.scss grid.scss colors.scss typography.scss
33. > global reset.scss grid.scss colors.scss typography.scss > elements buttons.scss inputs.scss tables.scss
35. > global reset.scss grid.scss colors.scss typography.scss > elements buttons.scss inputs.scss tables.scss > components navigation.scss sidebar.scss list.scss card.scss
37. > global reset.scss grid.scss colors.scss typography.scss > elements buttons.scss inputs.scss tables.scss > components navigation.scss sidebar.scss list.scss card.scss > pages compose.scss chat.scss
38. Build tools Gulp + SASS
39. Coding guidelines Consistency of code Easier to read & understand Predictable behavior Airbnb’s coding guidelines Github’s coding guidelines
40. Coding guidelines Lint your code sass-lint gulp-sass-lint .selector { property: value; } div { width: 100px; padding:0 10px; } 1: warning at line 3, col 2 Using width with padding can sometimes make elements larger than you expect.
41. Comments Useful comments say why (not what)
43. Create your own micro framework 1. Create a micro framework for CSS a. Production version - minified CSS b. Development version (SCSS) - customizable variables and build CSS 2. Use it to make this page 3. Follow a popular coding standard (github/airbnb/etc)
44. Post reading list 1. Advanced CSS concepts 2. Importance of a styleguide 3. Let's write beautiful CSS comments 4. Extensive SASS Guide 5. Object Oriented CSS with SASS 6. Gulp + SASS 7. How other companies are writing their CSS: Medium's article on their CSS Github's article on their CSS Eventmobi's on their CSS Lonely planet's article on their CSS 8. CSS selector performance
45. That’s all folks kp@practo.com @siddharthkp
46. Pre reading list ? 1. CSS Basics: Reference for the most used properties Time required: 30 mins 2. Kicking Ass + Taking Names with Sass: Nathan Henderson's video about SASS Time required: 20 mins 3. Developer tools - Updating styles: Quick basic tutorial of styles in developer tools (only #1.2) Time required: 5 mins 4. Getting started with gulp: Zell Liew's Gulp 101 Time required: 30 mins