Einführung in Inuitcss: Eine andere Art von CSS -Framework

wichtige Vorteile von Inuitcss

• Modulare Architektur: Inuitcss, ein SASS-basiertes Framework, fördert ein modulares Design, mit dem Entwickler nur die erforderlichen Module auswählen können, anstatt große, oft nicht genutzte Stylesheets herunterzuladen.
• Design Freiheit: Im Gegensatz zu Frameworks, die vorgefertigte UI-Elemente anbieten, priorisiert InuitCSS Entwicklerdesignoptionen und bietet eine flexible Grundlage für die kundenspezifische UI-Erstellung. Einfache Installation über Bower oder NPM ist ein wichtiger Vorteil. Die modulare Natur erfordert eine spezifische Importreihenfolge.
• Anpassung ohne direkte Bearbeitung: Inuitcss 'Code sollte nicht direkt geändert werden. Verwenden Sie stattdessen Überschreibungsdateien oder variable Injektionen, bevor Sie Module importieren. Während der Entwicklung ist seine Modularität ideal für Projekte, die bestimmte Komponenten ohne das Aufblähen größerer Frameworks benötigen.

Der Aufstieg von Front-End-Frameworks und der Inuitcss-Lösung

In den letzten Jahren wurden in Front-End-Frameworks wie Bootstrap und Foundation einen Anstieg verzeichnet, der die Webentwicklung beschleunigt. Diese führen jedoch häufig zum Herunterladen von massiven Stylesheets mit ungenutzten Funktionen. Inuitcss spricht dies an, indem er einen modulareren und design-agnostischen Ansatz anbietet.

Einführung inuitcss: ein modularer Ansatz

von Harry Roberts erstellt und bietet eine Sammlung unabhängiger Module anstelle einer monolithischen Codebasis. Auf diese Weise können Entwickler ihre eigene Architektur aufbauen, einschließlich nur der erforderlichen Komponenten. Im Gegensatz zu anderen Frameworks, die vorgefertigte Komponenten zur Änderung anbieten, ermöglicht Inuitcss Entwicklern, ihre eigenen Designs zu erstellen.

Inuitcss mit Bower oder NPM installieren

Während des manuellen Modulimports möglich ist, vereinfacht die Verwendung von Bower oder NPM den Prozess. Diese Paketmanager verwalten Abhängigkeiten und rationalisieren das Projektgerüst. Node.js ist eine Voraussetzung für beide.

Verwenden von Bower:

Bower installieren:
1. npm install -g bower
Initialisieren Sie die Bower in Ihrem Projekt:
2. (erstellt bower init Verzeichnis) bower_components
Module einzeln installieren:
3. (z. B. bower install --save inuit-(module-name)) bower install --save inuit-layout
Verwenden Sie alternativ das Starter -Kit:
4. bower install --save inuit-starter-kit

Setup und Import Order (entscheidend!)

Die Komponenten des Starter -Kits müssen genau importiert werden, um SASS -Fehler aufgrund von Abhängigkeiten zu vermeiden:

<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>

Kernfunktionalität und erforderliche Module

Während modular ist inuitcss essentielle Module:

• settings.defaults: Globale Einstellungen (Schriftgröße, Linienhöhe).
• tools.functions: Mathematik -Helferfunktionen für Größenschwankungen.
• tools.mixins: Schriftgröße Mixin für typenbasierte Module.

Zusätzliche Module werden von Bower verwaltet.

inuitcss ändern: Überschreiben von Dateien oder variable Injektion

Bearbeiten Sie den Kerncode von Inuitcss niemals direkt. Erstellen Sie stattdessen eine Überschreibungsdatei oder injizieren Sie Variablen vor dem Import:

<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>

Dieser Ansatz gilt für alle Module. Überschreibungsdateien sollten zuerst importiert werden.

Module, Komponenten und Anpassung

Modulvarianten werden standardmäßig deaktiviert (z. B. Varianten der Schaltflächengrößen). Aktivieren Sie sie vor dem Import:

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

Inuitcss konzentriert sich auf die Bereitstellung einer Grundlage; UI -Komponenten sind dem Entwickler weitgehend überlassen.

Schlussfolgerung: Eine andere Art von Rahmen

Inuitcss bietet einen einzigartigen Ansatz, der Entwicklerdesignentscheidungen und Modularität priorisieren. Es ist ideal für Projekte, die bestimmte Komponenten ohne den Aufwand großer, featurereicher Frameworks benötigen. Während der Entwicklung ist sein Konzept vielversprechend.

häufig gestellte Fragen (FAQ)

Der bereitgestellte FAQ-Abschnitt ist bereits gut geschrieben und umfassend. Es sind keine Änderungen erforderlich.

Das obige ist der detaillierte Inhalt vonEinführung in Inuitcss: Eine andere Art von CSS -Framework. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!