Avec la généralisation des technologies JS, CSS3 et HTML5, il est aujourd'hui possible de faire des sites Web qui n'ont rien à envier aux interfaces des logiciels que l'on peut trouver sur nos machines. Le revers de la médaille est une complexité croissante qui nécessite de faire appel à des professionnels . Quand vous devez faire un site personnel ou pour une association, il est difficile, à moins de s'appeler Cresus, de passer par un Web designer.
Heureusement
des frameworks libres permettent avec un minimum d'investissement et de
connaissances de bâtir des sites Web dans les règles de l'art. Nous
allons dans ce billet parler du plus médiatique d'entre eux: Bootstrap.
L'idée n'est pas de traduire la documentation officielle qui est par
ailleurs très bien faite, mais de partager avec-vous mes méthodes que je
suis en train d'utiliser pour développer le prochain thème du Blog de
Nicolargo qui sera, vous l'avez compris largement basé sur Bootstrap.
Créer l'arborescence de son projet
Nous
allons commencer par créer l'arborescence générale de notre site qui
sera stocké, pour illustrer ce billet, dans le répertoire ~/projet de
notre disque dur. On y télécharge&&décompresse la dernière
version stable de Bootstrap.
En plus de Bootstrap, j'ajoute également la dernière version du projet Font Awesome qui met à notre disposition un nombre important et varié d'icônes jusqu'à une résolution de 280 pixels.
On a donc l'arborescence suivante:
On peut ensuite commencer à éditer la premier page de son site en utilisant son éditeur de texte de prédilection (moi c'est geany ou vim selon les jours):
Jusque
là rien d’exceptionnel... Vous devriez voir s'afficher "Hello
Bootstrap" en chargeant votre page dans un navigateur HTML. C'est à
partir de maintenant que l'on va profiter de la puissance de Bootstrap !
Définir vos grilles
Par défaut, Bootstrap utilise un système avec une grille de 12 colonnes (voir le site 960.gs
pour une explication de cette dernière phrase). Votre fenêtre de
navigateur est ainsi divisée en 12 sections de tailles équivalentes.
Vous pouvez l'adapter à votre besoin en gardant ce chiffre à l'esprit.
Par exemple pour créer une page Web avec 2 colonnes, il suffit d'ajouter
les lignes suivantes entre les balises <body> ... </body>
de votre fichier HTML.
On utilise ici une disposition fluide (row-fluid) qui permet d'adapter dynamique la largeur de vos deux colonnes en fonctions de la taille de votre écran. Si vous voulez une taille de colonne fixe, il suffit de remplacer la classe container-fluid par container.
Bootstrap
génère par défaut des espaces entre deux colonnes (environ 20 pixels
pour une dic container). Il est possible de générer des espaces
supplémentaire avant ou entre vos colonnes en utilisant le paramètre de
classe offset. Par exemple pour créer un espace de taille 1/12 d'écran
entre vos deux colonnes, il suffit de modifier votre code de la manière
suivante:
Noter bien que la somme des span8 + offset1 + span3 est toujours égale à 12.
Pour être tout à fait précis, la somme doit être égale à la taille de
votre grille dans lequel votre balise row-fluid est imbriquée. Comme
nous l'avons vu la grille par défaut à une valeur de 12. Mais il est
possible d'utiliser une autre valeur en définissant une div chapeau.
Par exemple pour définir une grille de 6 et y créer deux colonnes de 4
et de 2, on doit utiliser le code suivant:
"Responsive design" en une ligne
Le tableau suivant donne la liste des tags que l'on peut utiliser pour rendre son site compatible avec les différents supports:
Source: http://twitter.github.com/bootstrap/scaffolding.html#layouts
Affichage sur un PC ou une tablette (ou un écran > à 767 pixels):
Affichage sur un smartphone (ou un écran de largeur <= à 767 pixels):
Magique non ?
Passons aux contenues de vos pages
Nous avons maintenant une belle grille "responsive" qu'il va falloir remplir.
En plus des éléments de bases (texte, images, icônes, formulaire), Bootstrap propose des composants avancées (barre de navigation, menu, aperçu d'image, pagination, barre de progression) mais également un système de plugins avec des composants dynamiques en JavaScript
(carrousel, popup, menu en accordéon, formulaire dynamique...). Je vous
invite à consulter les liens données dans ce chapitre. Des idées pour
votre prochain site viendront d'elles même.
Sources utilisées:
Aucun commentaire:
Enregistrer un commentaire