Advertisement
  1. Web Design
  2. Inuit.css

Nasen reiben mit inuit.css

Scroll to top
Read Time: 11 min

German (Deutsch) translation by Valentina (you can also view the original English article)

inuit.css ist ein leistungsstarkes, skalierbares, Sass-basiertes BEM-OOCSS-Framework. Dieser Artikel ist eine kurze Einführung in inuit.css; wie es gebaut wurde, wer es verwenden sollte und warum.

Hey, ich bin Harry, der Schöpfer eines kürzlich überarbeiteten CSS-Frameworks namens inuit.css. Dieser Artikel sollte hoffentlich als kurze Einführung in inuit.css dienen, warum es anders ist und wie Sie es sofort verwenden können ...


Ein weiteres CSS-Framework ist geboren

Zunächst einmal weiß ich, was Sie denken; ein anderes CSS-Framework?! Die kurze Antwort lautet "Ja". Die lange Antwort lautet "Ja, aber es gibt einen Grund für diese ...".

CSS-Frameworks kosten derzeit nur zehn Cent, und viele Leute veröffentlichen ihre Meinung zum CSS-Framework regelmäßig. Das Problem bei den meisten dieser Frameworks ist, dass sie sehr einfühlsam sind. CSS ist eine Styling-Sprache, daher befasst sich jedes CSS-Framework von Natur aus mit Kosmetik und Look-and-Feel. inuit.css jedoch nicht.

Ein CSS-Framework, das viele Designentscheidungen trifft, ist großartig, wenn Sie ein Entwickler sind, der jemanden oder etwas anderes benötigt, um das Design für Sie zu erledigen. Was ist, wenn Sie ein Designer sind, der eine Hand mit CSS benötigt? Die Verwendung eines Frameworks würde bedeuten, dass Sie sich entweder mit den Entwurfsentscheidungen und Meinungen anderer zufrieden geben oder mit dem Löschen von Code beginnen müssen. oder beides! Das Design eines anderen ist wahrscheinlich für Ihr Projekt völlig ungeeignet, was es fast völlig sinnlos macht. Dies ist alles andere als ideal. Wir benötigen ein CSS-Framework, das kein Styling ausführt. Ein Rahmen, der viel schweres Heben leistet.

inuit.css logoinuit.css logoinuit.css logo

inuit.css ist eine leistungsstarke kleine Sammlung von designfreien Objekten und Abstraktionen, die das Grundgerüst jeder Site bilden, über die Sie dann Ihr Design legen können. inuit.css arbeitet auf OOCSS-Weise, dh Sie können alles in Struktur und Haut aufteilen. inuit.css macht die Struktur und Sie können Ihre eigene Kosmetik übertrieben auftragen!

Inuit.css verfügt außerdem über eine Datei mit Variablen, mit der der typografische Maßstab Ihres gesamten Projekts festgelegt wird. Sie liegen ganz bei Ihnen und werden verwendet, um eine ganze Reihe von Komponenten um Werte Ihrer Wahl herum aufzubauen.

inuit.css löst viele Styling-Kopfschmerzen aus, aber Sie haben die vollständige Kontrolle über das Styling selbst…

Was ist mit Bootstrap?

Der Hauptkonkurrent für jeden auf dem CSS-Framework-Markt ist natürlich der Bootstrap von Twitter. Bootstrap ist hervorragend geeignet, wenn Sie etwas benötigen, um das Design zu verbessern. Es ist schnell einzurichten und Sie können alle Arten von vorgefertigten Komponenten nach Belieben in ein Projekt einfügen. Perfekt für Entwickler mit Designproblemen, die schnell ein Front-End zusammenstellen müssen, aber keinen Sinn für einen Designer haben, der eine eigene Vorstellung von Kosmetik hat, aber Hilfe bei einigen der schwierigeren Teile von CSS benötigt.

Wenn Sie Design oder eine schnelle Standardlösung benötigen, verwenden Sie Boostrap! Wenn Sie kreative Freiheit benötigen, aber einen skalierbaren, designfreien, erweiterbaren und leistungsstarken Helfer, sollten Sie vielleicht inuit.css in Betracht ziehen…


Die Prinzipien von inuit.css

inuit.css ist ein winziges Framework für Websites aller Größen. Von einfachen One-Pagern bis hin zu gigantischen, inhaltsverwalteten Giganten, die wachsen und wachsen müssen.

inuit.css eignet sich ideal für große Websites und große Teams und basiert auf einigen wenigen Prinzipien, um diesen Entwicklungsstil zu unterstützen.

OOCSS

Inuit.css ist in erster Linie ein OOCSS-Framework. Ich bin ein großer Befürworter der OO-Denkweise. Ich schreibe und spreche viel über OOCSS. OOCSS ist eine fantastische Möglichkeit, sich größeren Builds zu nähern. Wiederverwendung von Code basierend auf Funktionen, Abstrahieren allgemeiner/wiederholter Entwurfsmuster, Austrocknen von Code, Halten von Code effizient und portabel. All diese Ideen sind im Kern in inuit.css gebacken. Das Framework ist im Grunde nur eine Bibliothek nützlicher Objekte und Abstraktionen wie die Navi-Abstraktion, das Medienobjekt, das Inselobjekt und vieles mehr.

Diese Idee der Trennung von Struktur und Haut macht inuit.css so gut für Projekte geeignet, an denen ein Designer oder Designer beteiligt sind. inuit.css bietet designfreie, strukturelle Designmuster, die das Designteam darüber legt.

Die Ideen von Trockenheit, Effizienz und Abstraktion verleihen inuit.css so gut für große Websites. CSS bleibt schlank, Abstraktionen erweisen sich als nützlicher und Builds sind effizienter. Dies sind Dinge, die bei größeren Projekten wirklich hilfreich sind.

SMACSS

inuit.css wird SMACSSesque erstellt. Es ist nicht so detailliert oder vollständig (da inuit.css keine Module enthält und SMACSS sich nicht unbedingt mit Abstraktionen und OOCSS befasst), aber es teilt einige gemeinsame Prinzipien…

Die Idee, CSS in einer bestimmten Reihenfolge zu schreiben, wird von inuit.css sehr ernst genommen. Code, der sich über ein Projekt neu definiert oder rückgängig macht, ist normalerweise eine schlechte Nachricht. Daher ist es von größter Bedeutung, CSS so zu gestalten, dass dies vermieden wird, insbesondere bei größeren Builds. Die Dateistruktur von inuit.css bedeutet, dass jeder Regelsatz immer nur zu den vorherigen hinzugefügt wird und diese niemals rückgängig macht.

Zunächst beginnen wir mit unserem grundlegenden Zurücksetzen/Neustarten. inuit.css setzt Ränder und Auffüllungen zurück, definiert aber auch einige nützliche browserübergreifende Standardeinstellungen. Dies ist Ground Zero, Ihr Ausgangspunkt, der absolut grundlegendste.

Als nächstes importiert inuit.css nicht klassifizierte Elemente. Dies sind Dinge wie Überschriften (h1 - h6), die auf den vertikalen Rhythmus eingestellt sind, den Sie in Ihrer Variablendatei definiert haben... Mit diesen können Sie mit einfachen Vanille-HTML-Elementen beginnen, die alle im Stil sind gemäß den von Ihnen gewählten Variablen.

Danach fügen wir Objekte und Abstraktionen hinzu… Dies sind die Dinge, die Ihre HTML-Elemente (mithilfe von Klassen) erweitern und viel Gewicht aufbringen. Diese Objekte und Abstraktionen sind alle elementunabhängig und können daher auf fast alles angewendet werden. Dies hält sie unglaublich tragbar, wiederverwendbar und vor allem nützlich!

Sobald Sie begonnen haben, inuit.css zu erweitern, um an Ihrem eigenen Projekt zu arbeiten, importieren Sie als Nächstes Ihre Komponenten oder Module. Dies sind Dinge, die aus Objekten und Abstraktionen und ihren relevanten Erweiterungen aufgebaut sind (z. B. Verwandeln des Medienobjekts in ein Benutzerprofilbild und eine Biografie).

Schließlich zieht inuit.css alle Hilfsklassen und "Stiltrümpfe" ein. Dies sind Dinge wie Breiten- und Push/Pull-Klassen für Ihr Rastersystem, Ihre Markenfarbe und Ihr Gesicht als nützliche Klassen und sogar ein Debug-Modus für die Entwicklung.

BEM

BEM ist eine immens leistungsstarke Front-End-Methode, die von den Entwicklern von Yandex entwickelt wurde. BEM ist einfach eine Möglichkeit, CSS-Klassen zu benennen, um sie strenger, klarer und leistungsfähiger zu machen. inuit.css verwendet eine BEM-Methodik mit einer Namenskonvention, die auf Arbeiten von Nicolas Gallagher basiert.

BEM steht für Block, Element, Modifikator.

Ein Block ist wie eine Komponente, ein Element dient dazu, einen Block als Ganzes zu erstellen, und ein Modifikator ist eine Variation eines Blocks, zum Beispiel:

Hier haben wir einen .comment-Block, der ein Element namens .comment__body enthalten kann. Wir können auch sehen, dass es eine Variation von .comment gibt, die .comment--guest genannt wird. Allein aus den Klassen können wir herausfinden, was jedes Ding tut und welche Beziehungen sie zueinander haben. .comment__body muss in .comment leben, während .comment--guest eine Variation von .comment sein muss.

Die __, -- Notation sagt viel über ein Objekt aus. Dies ist besonders in größeren Teams nützlich, da hiermit kommuniziert wird, wie, wo und wann Klassen verwendet werden sollen.

Eine gute Analogie zur Funktionsweise von BEM könnte sein:

Hier können wir sehen, dass das grundlegende Objekt, das wir beschreiben, eine Person ist und dass ein anderer Personentyp eine Frau sein könnte. Wir können auch sehen, dass Menschen Hände haben; Dies sind Unterteile von Menschen, und es gibt wiederum verschiedene Variationen davon, wie links und rechts.

Sass

Sass wird aus einer Reihe von Gründen verwendet, hauptsächlich aus folgenden Gründen:

  • Wir können Dateien aufteilen, d.h. Sie können Objekte und Abstraktionen nach Bedarf aufrufen. Dies bedeutet, dass Ihr Code schlank bleibt und immer nur so viel verwendet, wie Sie benötigen.
  • Wir können Variablen verwenden, mit denen inuit.css eine gesamte typografische Skala und einen vertikalen Rhythmus um Ihre eigenen festgelegten Werte festlegen kann.
  • Code ist einfacher zu pflegen, da die vorkompilierte Quelle physisch weniger Code enthält.
  • Wir können CSS im Laufe der Zeit minimieren, was unglaublich wichtig ist, wenn man bedenkt, wie viele Kommentare inuit.css enthält!

Es war keine leichte Entscheidung, inuit.css auf einen Vorprozessor zu verschieben, aber ich bin froh, dass ich sie getroffen habe. Die Kombination von OOCSS mit Sass hat sich als von unschätzbarem Wert erwiesen. Die Verwendung von Variablen zum Einrichten Ihres benutzerdefinierten Projekts bedeutet, dass keine zwei inuit.css-Builds jemals gleich aussehen.


Anfangen

Das Einrichten eines Projekts auf inuit.css könnte nicht einfacher sein. Angenommen, Ihr Projekt hat eine sehr grundlegende Struktur wie folgt:

Initial directory structureInitial directory structureInitial directory structure

Dann ist Ihr erster Schritt, inuit.css in dieses CSS-Verzeichnis zu bekommen. Es gibt zwei Möglichkeiten, wie Sie dies tun können:

  1. Löschen Sie das CSS-Verzeichnis, die cd in das Projektverzeichnis und klonen Sie mit Git: git clone https://github.com/csswizardry/inuit.css.git css && cd css/ && rm -rf .git/ && cd ../. Dies bedeutet im Grunde: "Klonen Sie das inuit.css-Projekt in ein Verzeichnis namens css, gehen Sie dann in css/ und entfernen Sie die Git-Versionierung aus den inuit.css-Dateien und kehren Sie dann zum Projektverzeichnis zurück."
  2. Laden Sie die neueste zip-Datei inuit.css herunter und entpacken Sie sie in das CSS-Verzeichnis.
Cloning inuit.cssCloning inuit.cssCloning inuit.css

Sobald Sie dies getan haben, sollte Ihr Projekt ungefähr so aussehen:

Erstens können Sie README.md vollständig löschen. Benennen Sie als Nächstes your-project.scss nach Belieben um, z. B. style.scss.

inuit.css in placeinuit.css in placeinuit.css in place

Hinweis: Wenn Sie CodeKit oder eine andere Schnittstelle zum Kompilieren Ihres Sass verwenden, springen Sie zum Ende des Tutorials, wo wir uns kurz mit dem Einrichten eines inuit.css-Projekts auf diese Weise befassen.

Jetzt müssen Sie watch.sh öffnen, wo Sie so etwas finden sollten:

Hier müssen Sie jede Instanz von your-project.scss in den von Ihnen gewählten Namen ändern. Diese kleine Datei erleichtert das Betrachten von Sass-Dateien über die Befehlszeile.

Modified watch.shModified watch.shModified watch.sh

Um Ihre Projektdateien anzusehen, müssen Sie nur noch ein Terminalfenster öffnen, in das CSS-Verzeichnis des Projekts cd und einfach sh watch.sh ausführen. Voila, Ihr Projekt ist jetzt auf inuit.css eingerichtet.

Watching inuit.cssWatching inuit.cssWatching inuit.css

Variablen

Wie bereits erwähnt, enthält inuit.css eine Reihe von Variablen, die eine ganze Reihe von Aufgaben ausführen. Wenn Sie _vars.scss öffnen, sollten Sie alle anzeigen.

Der $debug-mode ist praktisch für Projekte in der Entwicklung. Dadurch wird das mit inuit.css gelieferte Debug-Plugin aufgerufen und im Browser visuell potenziell unzugänglicher oder problematischer Code gekennzeichnet.

$base-font-size und $base-line-height sind ziemlich selbsterklärend, aber unglaublich wichtig. Allein aufgrund dieser beiden Informationen kann inuit.css mit dem Einrichten Ihres gesamten vertikalen Rhythmus beginnen (weitere Informationen finden Sie im Mixin font-size() in _mixins.scss).

Die restlichen Variablen sind so ziemlich nur Schriftgrößen für Ihre Überschriften. Zusammen mit Ihren Variablen $base-font-size und $base-line-height vervollständigen diese Ihren vertikalen Rhythmus. Versuchen Sie, diese Variablen zu ändern und sehen Sie, was passiert!

Eine letzte Sache…

Der nächste Schritt ist einer, den ich sehr nützlich finde; Öffnen Sie inuit.scss und Sie finden ein riesiges Inhaltsverzeichnis und eine lange Liste importierter Partials. Es ist empfehlenswert, alle Objekte und Abstraktionen sofort zu kommentieren und nach Bedarf zu kommentieren. Dies bedeutet, dass Sie sie absichtlich anrufen müssen, wenn sie benötigt werden, und dass Sie nicht viel unbenutztes CSS bündeln.

Wenn Ihre Dateien überwacht, Ihre Variablen festgelegt und Ihre nicht verwendeten Objekte auskommentiert wurden, sind Sie alle auf inuit.css eingerichtet.


Arbeiten ohne Befehlszeile

Es besteht eine gute Chance, dass Sie nicht direkt mit der Befehlszeile arbeiten. In diesem Fall können Sie eine der vielen verfügbaren Anwendungen zum Kompilieren von Sass verwenden. CodeKit ist ein solches Beispiel und verhält sich (in Bezug auf das, wofür wir es hier benötigen) ähnlich wie jeder andere Compiler auf jeder Plattform, die Sie ausführen.

Um ein inuit.css-Projekt einzurichten, müssen Sie zuerst die Quelldateien aus dem GitHub-Repository abrufen:

inuit on githubinuit on githubinuit on github

Wenn Sie die Dateien entpackt haben, organisieren Sie sie in einem vertrauten Projektlayout, wie zum Beispiel:

inuitinuitinuit

Wie Sie sehen können, habe ich den Inhalt des Inuit-Quellordners in einen css-Ordner geworfen. Ich habe auch die Dateien README.md und watch.sh entfernt.

Öffnen Sie als Nächstes Ihren Compiler (in diesem Fall CodeKit) und weisen Sie ihn an, Ihren Projektordner zu überwachen. In den meisten OS X-Compilern müssen Sie lediglich Ihren Projektordner in das Anwendungsfenster ziehen. Wie Sie unten sehen können, überwacht CodeKit jetzt meinen Ordner inuit.css-master und hat die .scss-Dateien hervorgehoben, die direkt kompiliert werden. Jede Datei mit einem vorangestellten Unterstrich generiert keine eigene CSS-Datei, kann jedoch in andere Dateien importiert werden.

inuitinuitinuit

Ich habe in diesem Fall nichts umbenannt, aber Sie werden sehen, dass your-project.scss so eingestellt ist, dass es in seinen .css-Namensvetter kompiliert wird. Jetzt muss ich nur noch diese CSS-Datei mit meiner index.html verknüpfen:

Jedes Mal, wenn ich meine Projektdateien in einem Code-Editor speichere, kompiliert CodeKit das Projekt für mich neu und lädt das Browserfenster im laufenden Betrieb neu.


Inuit.css erweitern

Das Erweitern von inuit.css ist etwas, das wir im zweiten Teil dieses Tutorials behandeln können. Im Moment müssen Sie jedoch nur wissen, dass es so einfach ist, wie es your-project.scss Ihnen sagt:


Nützliches Zeug

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.