Le petit journal du web des CSS : Bootstrap, Responsive, Triangle, Etc.

Dans ce petit journal du web vous trouverez des liens bien frais pour 1) faire ce que vous voulez avec Bootstrap, 2) avoir un aperçu du rendu de votre site dans différents formats mobiles, 3) copier-coller quelques règles CSS pour obtenir des triangles orientés dans les quatre directions sans image, 4) suivre un tutoriel pour intégrer un prototype de page directement dans le navigateur avec le framework CSS Zurb Fondation.

Style Bootstrap — Une page web pour styler visuellement tous les composants de Bootstrap : typographie, boutons, formulaires, etc.
Responsinator— Entrez l’URL de votre choix et admirez (ou pas) l’affichage de votre page dans les formats mobiles suivants :
- iPhone portrait 320 x 480
- iPhone landscape 480 x 320
- Crappy Android portrait 240 x 320
- Crappy Android landscape 320 x 240
- Nicer Android portrait 295 x 515
- Nicer Android landscape 515 x 295
- iPad portrait 768 x 1024
- iPad landscape 1024 x 768
- Kindle portrait 600 x 1024
- Kindle landscape 1024 x 600

Triangles CSSS— Quatre exemples de code CSS pour faire des triangles sans image :

.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid black;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
}
.arrow-right {
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid green;
}
.arrow-left {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid blue;
}

→ Voir Des bulles de dialogue en CSS3 sans image pour aller plus loin.

Dive into Responsive Prototyping with Foundation — Article didactique qui présente la mise en œuvre du framework Zurb Fondation avec un exemple de prototype.
Responsive.is — Ajoutez votre URL dans le champs adéquat et sélectionnez les périphériques mobiles : Tablet Landscape, Tablet Portrait, Smartphone Landscape, Smartphone Portrait. L’interface s’adapte progressivement aux différentes dimensions.