Mobile First

* Avoid starting from large and then shrinking down or hiding them. * Mobile first forces us to prioritize and focus on our content

by Leo Lanese

HTML

<body>

    <div id="container">
        <p></p>  
    </div>
        
</body>

CSS

/* Mobile-First styles: common code goes here */
/* We serve base styles no media querie because Symbian, RIM Blackberry <OS 6.0, Netfront, WP7 pre-Mango browser don't support media-queries */

#container {
    float:left;
    width:10em;
    height:10em;
    background:green;
   
    -webkit-animation-property: -webkit-width;
    -webkit-animation-property: -webkit-height;
    -webkit-transition-duration: 3s;
    -moz-animation-property: -moz-width;
    -moz-animation-property: -moz-height;
    -moz-transition-duration: 3s;
    -o-animation-property: -o-width;
    -o-animation-property: -o-height;
    -o-transition-duration: 3s; 
    
    /* borders */
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
p {
    left:50%;
    padding:1em;
    word-wrap: break-word; /* force unbreaking text to wrap instead of running in a single line */
}
p:after { 
    content:"< 640px";
}



@media screen and (min-width:640px) {
    #container { /* overwright id #container*/
        float: none; 
        width: 16em;
        margin: 0 auto; 
        background: blue;
        border:solid #000;
    }
    p { /* changed some values on p tag */
        font-family: Arial, sans-serif;
        font-size: 1.5em;
    }
    p:after { 
    content:"> 640px and < 800px";
    }
}


/* animation still here */
@media screen and (min-width:800px) {
    #container{ /* sobre escribimos clase #container */
        float: right; 
        background: red;
        width: 30em;
        height: 12em; 
    }
    p {
        font-family: Helvetica, sans-serif;
        text-transform: uppercase;
        font-size: 1.6em;
    }
    p:after { 
    content:"> 800px or more";
    }

}