Advanced
HTML / CSS concepts
OPT-IW011
http://bit.ly/optiw011
Slide 2
Slide 2 text
December 17, 1996
Slide 3
Slide 3 text
CSS - Programming language?
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
.sidebar .main
.wrapper
.footer
Slide 6
Slide 6 text
.sidebar .main
.wrapper
800px
200px
.footer
All 4 divs have padding 20px
Slide 7
Slide 7 text
.sidebar .main
.wrapper
Big Heading h1
Big Heading h1 : hover state
.footer
Slide 8
Slide 8 text
.sidebar .main
.wrapper
Big Heading h1
Big Heading h1 : hover state
.footer
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
.sidebar .main
.wrapper
900px
250px
.footer
All 4 divs have padding 25px
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
CSS at scale
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
No content
Slide 19
Slide 19 text
Evils at scale
Repetition
Inconsistency
No reusability
Bloat
Slide 20
Slide 20 text
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)
Slide 21
Slide 21 text
Importance of a styleguide
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
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
Slide 25
Slide 25 text
Philosophies
Slide 26
Slide 26 text
Philosophies
BEM
ITCSS
OOCSS
SMACSS
Slide 27
Slide 27 text
Common concepts
Consistency of style
Coding standards
Separation of Concerns
Single Responsibility Principle
Immutability
Slide 28
Slide 28 text
2009
Nicole
Sullivan
@stubbornella
Slide 29
Slide 29 text
OOCSS: Lego driven development
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
> global
reset.scss
grid.scss
colors.scss
typography.scss
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
> global
reset.scss
grid.scss
colors.scss
typography.scss
> elements
buttons.scss
inputs.scss
tables.scss
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
> 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
Coding guidelines
Consistency of code
Easier to read & understand
Predictable behavior
Airbnb’s coding guidelines
Github’s coding guidelines
Slide 40
Slide 40 text
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.
Slide 41
Slide 41 text
Comments
Useful comments say why (not what)
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
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)
Slide 44
Slide 44 text
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
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