framework, pros and cons

framework, pros

Framework, cons

different framework different purpose

foundation

less

css preprocessor 

css preprocessor?

css might get messy
as site go bigger

the pros using preprocessor

variables

@baseColor: #06f;
@baseBackground: #666;

button{
    color: @baseColor;
    background: @baseBackground;
}

button{
    color: #06f;
    background: #666;
}

mixins

.rounded(@x: 5px){
    -webkit-border-radius: @x;
    border-radius: @x;
}
button{
    .rounded();
}
div{
    .rounded(10px);
}

button{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

div{
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

nested rules

section{
    width: 200px;
    height: 100px;

    h2{
        font-family: georgia, serif;
    }
}

section{
    width: 200px;
    height: 100px;
}

section h2{
    font-family: georgia, serif;
}

nested rule cont.

a{
    color: blue;

    &:hover{
        color: lightblue;
    }

    &:active{
        color: darkblue;
    }
}

a{
    color: blue;
}
a:hover{
    color: lightblue;
}
a:active{
    color: darkblue;
}

nested rule cont.

section{
    padding: 1em;

    nav{
        color: #666;
        
        ul{
            list-style: none;

            li{
                display: inline-block;

                a{
                    color: #369;
                }
            }
        }
    }
}

nested rule cont.

section{...}
section nav{...}
section nav ul{...}
section nav ul li{...}
section nav ul li a{...}

max 3 level

header nav ul{...}

section aside h3{...}

functions and operations

@baseColor: #369;

a{
    color: @baseColor;

    &:hover{
        color: darken(@baseColor, 5%);
        background: @baseColor + #030;
    }
}

a{
    color: #369;
}

a:hover{
    color: #258;
    background: #399;
}

icon font

icon what?

retina display /
other high resolution display

icomoon

weloveiconfonts

cross browser compability

iE8 and below
is not the only problem

how can we fix this?

conditional comment

polyfill with modernizr

modernizr