Fatigué du HTML ennuyeux et simple et du CSS éternellement long ? Rencontrez Skeleton, le parfait, léger, ajout CSS au reste du code boilerplate que vous incluez déjà comme point de départ de tout projet.
Le code boilerplate est tout code répétitif qui apparaît encore et encore pour obtenir un certain résultat qui semble devoir être beaucoup plus simple. Et simple, le stylisme de base du HTML devrait être beaucoup plus simple.
La plupart des bibliothèques ou des frameworks de stylisme frontaux fonctionnent en définissant des styles sur des classes qui nécessitent que l’utilisateur se souvienne des noms de classe pour ajouter du style aux éléments HTML. Skeleton fonctionne en appliquant la majorité du style directement aux balises HTML. Tableaux, formulaires, listes, boutons, vous le nommez, ils le stylisent.
Pour commencer
Skeleton vous recommande d’aller sur leur site web et de télécharger le fichier CSS commodément noté, non minifié et prêt à l’emploi afin que vous puissiez jeter un coup d’œil vous-même sous le capot. Skeleton compte au total moins de 400 lignes de code ! Il existe également un lien CDN pratique pour une installation encore plus rapide lorsque la personnalisation n’est pas essentielle à votre projet. Quelle que soit la manière dont vous choisissez de l’inclure, une fois que vous avez lié la feuille de style dans l’en-tête de votre document, vous êtes prêt à partir !
La grille à 12 colonnes
Le succès de Skeleton réside dans le fait de prendre les attributs que d’autres frameworks CSS fournissent et de les simplifier à mort. En utilisant le système de grille, la mise en page de votre navigateur reste fluide et s’adapte automatiquement à la taille de la fenêtre. Pour utiliser les colonnes, utilisez un numéro et une classe de ‘colonne’ ou ‘colonnes’, ou une méthode abrégée de ‘un tiers’, ‘une moitié’, etc.
Skeleton définit la largeur maximale à 960px, ce qui s’adapte automatiquement aux grands, petits et moyens écrans. Si vous le souhaitez, vous pouvez modifier la largeur maximale avec une ligne de CSS, et toutes les colonnes seront redimensionnées en conséquence !
Typographie
Le type dans Skeleton est défini sur rems pour être dimensionné de manière réactive en fonction d’une seule propriété <html> font-size. La police de base est Raleway, définie à 15rem sur une hauteur de ligne de 1,6 (15px et 24px respectivement).
Les titres ont leur dimensionnement distinct avec un espacement entre les lettres, une hauteur de ligne et des marges spécifiques.
Les boutons ont deux options. Le style de bouton standard existe de manière inhérente pour la balise <button> (et tout autre élément de formulaire approprié), tandis que la deuxième option de bouton, plus vivante, peut être appliquée avec une classe ‘.button-primary’.
Quand dois-je utiliser Skeleton?
Skeleton est une bibliothèque CSS légère, réactive et hautement personnalisable construite avec le mobile en tête. Il n’y a aucune compilation ou installation nécessaire, et il fonctionne bien avec des feuilles de style CSS supplémentaires et des Frameworks frontaux. Utilisez le squelette pour un CSS rapide et opérationnel, idéal pour les démos ou les MVPs. Et comme il fait moins de 12 Ko pour la version minifiée, il est également parfait pour les situations où la vitesse est primordiale. N’oubliez pas que Skeleton est, à la base, un squelette de composants et de styles purs. Avec un seul lien, vous pouvez transformer un HTML ennuyeux en une page entièrement stylisée sans avoir besoin de sacrifier la vitesse ou de mémoriser une bibliothèque de noms de classes.
