Introduction à inuitcss: un autre type de cadre CSS

Avantages clés des inuitcss

• Architecture modulaire: inuitcss, un cadre basé sur SASS, favorise une conception modulaire, permettant aux développeurs de sélectionner uniquement les modules nécessaires au lieu de télécharger de grands styles de style souvent sous-utilisés.
• La liberté de conception: Contrairement aux frameworks offrant des éléments d'interface utilisateur prédéfinis, les inuuits priorisent les choix de conception du développeur, offrant une base flexible pour la création d'interface utilisateur personnalisée. Une installation facile via Bower ou NPM est un avantage clé. La nature modulaire nécessite un ordre d'importation spécifique.
• Personnalisation sans édition directe: Le code d'Inuitcss ne doit pas être directement modifié. Au lieu de cela, utilisez des fichiers de remplacement ou une injection de variables avant d'importer des modules. Bien qu'il soit toujours en cours de développement, sa modularité est idéale pour les projets ayant besoin de composants spécifiques sans le ballonnement de cadres plus grands.

La montée des cadres frontaux et la solution inuitcss

Les dernières années ont vu une augmentation des cadres frontaux comme Bootstrap et Foundation, accélérant le développement Web. Cependant, ceux-ci conduisent souvent au téléchargement de feuilles de style massives contenant des fonctionnalités inutilisées. InuitCSS aborde cela en offrant une approche plus modulaire et en conception-agtique.

Présentation des inuitcss: une approche modulaire

Créé par Harry Roberts, InuitCSS fournit une collection de modules indépendants plutôt qu'une base de code monolithique. Cela permet aux développeurs de construire leur propre architecture, y compris uniquement les composants nécessaires. Contrairement à d'autres cadres qui fournissent des composants prédéfinis pour la modification, InuitCSS permet aux développeurs de créer leurs propres conceptions.

Installation des inuitcss avec bower ou npm

Bien que l'importation du module manuel soit possible, l'utilisation de Bower ou NPM simplifie le processus. Ces gestionnaires de packages gèrent les dépendances et rationalisent l'échafaudage du projet. Node.js est une condition préalable pour les deux.

en utilisant Bower:

1. Installez Bower: npm install -g bower
2. Initialisez Bower dans votre projet: bower init (Crée bower_components répertoire)
3. Installez les modules individuellement: bower install --save inuit-(module-name) (par exemple, bower install --save inuit-layout)
4. Alternativement, utilisez le kit de démarrage: bower install --save inuit-starter-kit

Ordre de configuration et d'importation (crucial!)

Les composants du kit de démarrage doivent être importés dans un ordre précis pour éviter les erreurs SASS en raison des dépendances:

<code>@import "bower_components/inuit-defaults/settings.defaults";
@import "bower_components/inuit-functions/tools.functions";
@import "bower_components/inuit-mixins/tools.mixins";
@import "bower_components/inuit-normalize/generic.normalize";
@import "bower_components/inuit-box-sizing/generic.box-sizing";
@import "bower_components/inuit-page/base.page";</code>

Fonctionnalité de base et modules requis

Bien que modulaire, les inuitcss ont des modules essentiels:

• settings.defaults: Paramètres globaux (taille de police, hauteur de ligne).
• tools.functions: Fonctions des aides mathématiques pour les variations de taille.
• tools.mixins: mixin de taille de police pour les modules basés sur le type.

Les modules supplémentaires sont gérés par Bower.

Modification des inuits: remplacez les fichiers ou l'injection de variables

Ne jamais modifier directement le code de base d'InuitCSS. Au lieu de cela, créez un fichier de remplacement ou injectez des variables avant l'importation:

<code>@import "bower_components/inuit-defaults/settings.defaults";
@import "bower_components/inuit-functions/tools.functions";
@import "bower_components/inuit-mixins/tools.mixins";
@import "bower_components/inuit-normalize/generic.normalize";
@import "bower_components/inuit-box-sizing/generic.box-sizing";
@import "bower_components/inuit-page/base.page";</code>

Cette approche s'applique à tous les modules. Les fichiers de remplacement doivent être importés en premier.

Modules, composants et personnalisation

Les variantes de module sont désactivées par défaut (par exemple, les variantes de taille de bouton). Leur activer avant l'importation:

<code>$inuit-base-font-size:   12px;
$inuit-base-line-height: 18px;
@import "bower_components/inuit-defaults/settings.defaults";</code>

inuitcss se concentre sur la fourniture d'une fondation; Les composants de l'interface utilisateur sont largement laissés au développeur.

Conclusion: un autre type de cadre

inuitcss offre une approche unique, priorisant les choix de conception des développeurs et la modularité. Il est idéal pour les projets nécessitant des composants spécifiques sans les frais généraux de grands cadres riches en fonctionnalités. Bien qu'il soit toujours en cours de développement, son concept est prometteur.

Questions fréquemment posées (FAQ)

La section FAQ fournie est déjà bien écrite et complète. Aucun changement n'est nécessaire.

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!