Skeleton est une librairie CSS qui permet la mise en place facile d’un responsive design dans une application web.
L’avantage que possède Skeleton par rapport à d’autres frameworks, réside dans son poids. Skeleton a été créé/pensé en css ce qui signifie qu’aucun fichier javascript n’est utilisé lors de sa mise en place. De plus le fichier css de Skeleton représente seulement 400 lignes.
Cet avantage est également son principal défaut : Skeleton à tout intérêt à être utilisé dans les petits projets web mais risque vite de s’avérer insuffisant dans des gros projets.
Mais Skeleton est un excellent framework pour faire ses premiers pas dans la mise en place d’une structure et la manipulation du html et css 😉
Installation
Si vous souhaitez commencer un projet web entièrement, que vous partez donc sans aucune ligne de code Skeleton offre une infrastructure vierge (d’où son nom). Pour cela il suffit de télécharger l’archive mise à disposition sur le site web dédié et que l’extraire. Cette archive contient :
- normalize.css, qui permet de modifier quelques balises html afin qu’elles soient plus proches des standards modernes.
- skeleton.css, qui est le fichier qui nous intéresse dans cet article
- une favicon (qui apparaît à coté du titre de la page dans un onglet de navigateur que nous pourrons modifier par la suite)
- un fichier html qui va nous permettre de mettre en place notre application web.
Ce fichier html contient quelques balises meta à modifier dans son en-tête. Si l’on souhaite incorporer Skeleton à une application web existante il suffit de récupérer les deux fichiers css et de les appeler dans notre application. Attention cependant l’appel vers la police utilisée par Skeleton se trouve dans l’en-tête du fichier html via une balise appelant les APIs de google fonts.
Utilisation
Le gros avantage de Skeleton c’est qu’il est quasiment invisible et ne cherche pas à changer votre façon de travailler. C’est pour cela qu’il va styliser plusieurs balises html sans que vous ayez quoi que ce soit à faire.
C’est le cas pour les balises de typographie (h1 – h6, p, strong, em, a, u), les listes, les formulaires ainsi que les tables.
Utilisation de la grille
La grille – qui ici se définit sur une base 12 – est clairement ce qui fait la force de Skeleton, c’est grâce à celle-ci que l’on va être capable de faire du responsive design.
L’idée derrière cette grille est d’imaginer notre page web comme un tableau, de définir un colonnage et un lignage (invisibles) nous permettant de structurer notre page.
Pour résumer, la feuille de style en skeleton.css, définit le comportement des colonnes, allant de 1 à 12 (1 représentant le 12ème de la largeur de la page – 12 représentant la largeur totale de la page), s’adaptant donc à la largeur de l’écran de votre terminal (écran de bureau, tablette et smartphone). Néanmoins, ces colonnes finiront toutes par prendre la largeur totale de votre écran pour permettre une meilleure lisibilité de vos propos sur des petits terminaux.
