Spectre CSS Framework: Solutions CSS légères, réactives et modernes

Dans le développement du projet, le cadre peut réduire considérablement le temps de développement. Les cadres populaires comme Bootstrap sont riches en fonctionnalités, mais toutes les fonctionnalités ne conviennent pas à chaque projet. Cet article présente un nouveau cadre léger, moderne, réactif et adapté aux mobiles - Spectre. La taille après compression et GZIP est d'environ 6,8 Ko. En plus du système de réseau de base, il fournit également de nombreux autres composants pratiques tels que les onglets, les bo?tes modales et les cartes.

Ce tutoriel vous donnera un bref aper?u du cadre et fournira des conseils pour vous permettre de démarrer rapidement.

Points clés

• Spectre est un cadre CSS léger, moderne, réactif et adapté aux mobiles qui réduit considérablement le temps de développement. Il fournit un système de réseau de base et divers composants tels que des onglets, des bo?tes modales et des cartes.
• Ce cadre contient des styles par défaut d'éléments de typographie optimisés pour les polices asiatiques et fournit des classes pour les tables, les boutons et les éléments de forme couramment utilisés. Il propose également trois composants de navigation - une barre de navigation, un menu vertical et la chapelure.
• Les deux composants importants de Spectre sont des bo?tes et des cartes modales, similaires aux composants correspondants de Bootstrap. Il comprend également d'autres composants tels que les notifications "Toast", les badges, les étiquettes, la pagination et les infractions. Les classes de services publics peuvent être utilisées pour des ajustements de disposition subtils.
• Alors que Spectre fournit le moins de style pour les éléments et que sa taille est très raisonnable compte tenu du nombre de composants qu'il fournit, il ne fournit aucun JavaScript pour interagir avec ses composants. Les utilisateurs doivent rédiger leur propre code pour implémenter des fonctions telles que l'affichage ou la masquage de cases modales.

Installation

Vous pouvez télécharger directement le fichier compressé Spectre.css ou l'installer à l'aide de NPM et Bower. Une fois l'installation terminée, vous pouvez inclure des fichiers dans votre projet comme une feuille de style normale.

<link rel="stylesheet" href="link/spectre.min.css" />

Vous pouvez également créer votre propre version Framework personnalisée en modifiant le fichier moins dans le répertoire /src ou en supprimant les composants indésirables du fichier Spectre.less. Vous pouvez ensuite utiliser Gulp pour construire le fichier CSS à partir de la ligne de commande.

Système de grille

Spectre a un système raster réactif basé sur Flexbox avec 12 colonnes. La largeur de chaque colonne est déterminée par son nom de classe. Chaque classe commence par col- et est suivie d'un nombre pour indiquer le nombre de colonnes que l'élément doit occuper. Par exemple, col-12 occupe 12 colonnes avec une largeur de 100%; col-3 occupe 3 colonnes avec une largeur de 25%. Par défaut, il y aura des lacunes entre différentes colonnes. Vous pouvez éliminer cet écart en ajoutant une classe col-gapless à son conteneur. Comme Bootstrap, il fournit également des classes telles que col-md-[1-12], col-sm-[1-12] et col-xs-[1-12] pour vous aider à contr?ler la largeur de l'élément lorsque la taille de la fenêtre change.

Il fournit également des classes telles que hide-xs, hide-sm et hide-md pour cacher des éléments sous une taille de fenêtre spécifique.

Lorsque la largeur de la fenêtre est inférieure à 480 pixels, toutes les colonnes seront affichées en une seule ligne. La classe col-xs-* sera appliquée à tous les éléments avec une largeur supérieure à 480 pixels. De même, col-sm-* sera appliqué aux éléments avec une largeur de la fenêtre supérieure à 600 pixels, et col-md-* sera appliqué aux éléments avec une largeur de la fenêtre supérieure à 800 pixels.

Le code de code suivant crée une colonne avec une largeur de 33,333% (col-4), deux colonnes avec une largeur de 25% (col-3) et une colonne avec une largeur de 16,66% (col-2).

<link rel="stylesheet" href="link/spectre.min.css" />

... (Le contenu ultérieur est similaire au texte d'origine. Vous pouvez ajuster le libellé et la structure de paragraphe au besoin pour maintenir l'intention d'origine inchangée) ....

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!