Share
Inuit.css ist ein leistungsfähiges, skalierbares, auf Sass basierendes BEM, OOCSS-Framework. Dieser Artikel ist eine kurze Einführung in inuit.css. wie es gebaut wird, wer es verwenden soll und warum.
Ich bin Harry, der Schöpfer eines kürzlich neu geschriebenen CSS-Frameworks mit dem Namen inuit.css. Dieser Artikel sollte hoffentlich als schnelle Einführung in das, was inuit.css ist, warum es anders ist und wie Sie es sofort einsetzen können, dienen.
Zuerst weiß ich, was Sie denken. ein anderes CSS-Framework ?! Nun, die kurze Antwort lautet ja ... Die lange Antwort lautet: "Ja, aber es gibt einen Grund dafür ..."
CSS-Frameworks sind derzeit nur ein halbes Jahr. Viele Leute geben ihre CSS-Frameworks regelmäßig auf. Das Problem bei den meisten dieser Frameworks ist, dass sie sehr meinungsstark sind. CSS ist eine Styling-Sprache, daher befasst sich jedes CSS-Framework von Natur aus mit Kosmetika und mit Look & 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 mit dem Design für Sie umzugehen, aber was ist, wenn Sie ein Designer sind, der CSS-Unterstützung benötigt? Die Verwendung eines Frameworks würde bedeuten, dass Sie entweder mit den Designentscheidungen und Meinungen einer anderen Person zurechtkommen müssen oder eine Menge Code zu löschen. oder beides! Das Design einer anderen Person wird wahrscheinlich für Ihr Projekt völlig ungeeignet sein, was es fast völlig sinnlos macht. Dies ist alles andere als ideal. Was wir brauchen, ist ein CSS-Framework, das kein Styling vornimmt. ein Rahmen, der viel schweres Heben macht.
Inuit.css ist eine leistungsstarke kleine Sammlung von designfreien Objekten und Abstraktionen, die das Grundgerüst einer Site bilden, auf der Sie dann Ihr Design überlagern können. Inuit.css arbeitet auf OOCSS-Weise, dh Sie können alles in Struktur und Skin aufteilen. Inuit.css übernimmt die Struktur und Sie können Ihre eigenen Kosmetika darüber aufbringen!
Inuit.css enthält auch eine Datei mit Variablen, die die typografische Skala Ihres gesamten Projekts einrichtet. Sie liegen ganz bei Ihnen und werden verwendet, um eine Vielzahl von Komponenten um die Werte Ihrer Wahl herum aufzubauen.
Inuit.css sorgt für eine Menge Styling Kopfschmerzen, Sie haben jedoch die vollständige Kontrolle über das Styling selbst…
Natürlich ist der wichtigste Konkurrent für jedermann im CSS-Framework-Markt der Bootstrap von Twitter. Bootstrap ist ausgezeichnet ob Sie brauchen etwas, um mit der Design-Seite der Dinge umzugehen. Es ist schnell eingerichtet und Sie können alle Arten von vorgefertigten Komponenten beliebig in ein Projekt einfügen. Perfekt für Entwickler, die ein Design-Problem haben und schnell ein Frontend zusammenbringen müssen, aber für Designer, die ihre eigenen Vorstellungen von Kosmetik haben, aber mit ein paar kniffligen CSS-Elementen eine hilfreiche Hand brauchen.
Wenn Sie Design oder eine schnelle Standardlösung benötigen, verwenden Sie Boostrap! Wenn Sie kreative Freiheit, aber einen skalierbaren, designfreien, erweiterbaren und leistungsstarken Helfer benötigen, denken Sie vielleicht an inuit.css…
Inuit.css ist ein kleines Framework für Websites aller Größen. Von einfachen One-Pagers bis zu gigantischen, inhaltsverwalteten Giganten, die wachsen und wachsen müssen.
Inuit.css eignet sich ideal für umfangreiche Websites und große Teams und basiert auf einigen wenigen Prinzipien, um diesen Entwicklungsstil zu unterstützen.
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. Wiederverwenden von Code basierend auf der Funktion, Abstraktion allgemeiner / wiederholter Entwurfsmuster, TROCKNEN von Code, Halten von Code effizient und tragbar. Alle diese Ideen werden im Kern in inuit.css gebacken. Das Framework ist im Grunde nur eine Bibliothek mit nützlichen Objekten und Abstraktionen wie der Nav-Abstraktion, dem Medienobjekt, dem Inselobjekt und einem Menge Mehr.
Ist diese Idee der Trennung von Struktur und Skin inuit.css so gut geeignet für Projekte, an denen Designer oder Designer beteiligt sind. Inuit.css bietet designfreie, strukturelle Designmuster, die das Design-Team darauf legt.
Die Ideen von DRYness, Effizienz und Abstraktion machen inuit.css so gut auf großen Websites. CSS bleibt schlank, Abstraktionen erweisen sich als nützlicher und Builds sind effizienter. Dies sind Dinge, die bei größeren Projekten wirklich helfen.
Inuit.css ist auf SMACSSesque-Weise aufgebaut. Es ist nicht so granular oder vollständig (da inuit.css keine Module enthält und SMACSS keine Notwendig beschäftigen sich mit Abstraktionen und OOCSS), aber es teilt einige gemeinsame Prinzipien…
Die Idee, CSS in der Spezifitätsreihenfolge zu schreiben, ist etwas, das inuit.css sehr ernst nimmt. Code, der ein Projekt neu definiert oder sich selbst rückgängig macht, ist in der Regel eine schlechte Nachricht. Daher ist es besonders wichtig, CSS so zu gestalten, dass dies vermieden wird, insbesondere bei größeren Builds. Die Dateistruktur von inuit.css bedeutet, dass jeder Regelsatz immer nur einen vorherigen hinzufügt, er macht sie nie rückgängig.
Zunächst beginnen wir mit unserem grundlegenden Reset / Neustart. Inuit.css setzt Ränder und Auffüllungen zurück, definiert jedoch auch einige nützliche Cross-Browser-Standardeinstellungen. Dies ist Bodennullpunkt, 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 Vanilla-HTML-Elementen beginnen, die alle gemäß den von Ihnen gewählten Variablen gestaltet sind.
Danach fügen wir Objekte und Abstraktionen hinzu ... Diese Elemente erweitern Ihre HTML-Elemente (mithilfe von Klassen) und machen viel Last. Diese Objekte und Abstraktionen sind allesamt agnostisch und können daher auf fast alles angewendet werden. Dies macht sie unglaublich tragbar, wiederverwendbar und vor allem nützlich!
Wenn Sie mit der Erweiterung von inuit.css begonnen haben, um an Ihrem eigenen Projekt zu arbeiten, sind die nächsten Elemente, die Sie importieren würden, Ihre Komponenten oder Module. Dies sind Dinge, die aus Objekten und Abstraktionen und ihren relevanten Erweiterungen (z. B. Verwandeln des Medienobjekts in ein Benutzerprofilbild und eine Biografie) bestehen..
Schließlich zieht inuit.css alle Hilfsklassen und 'Stiltrümpfe' ein. Dies sind beispielsweise Breiten- und Push / Pull-Klassen für Ihr Gittersystem, Ihre Markenfarbe und -fläche als nützliche Klassen und sogar ein Debug-Modus für die Entwicklung.
BEM ist eine enorm mächtige Front-End-Methode, die von den Entwicklern bei Yandex entwickelt wurde. BEM ist, vereinfacht gesagt, 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 der Arbeit von Nicolas Gallagher basiert.
BEM steht für Block, Element, Modifikator.
Ein Block ist wie eine Komponente, ein Element ist etwas, das einen Block als Ganzes bildet, und ein Modifikator ist eine Variation eines Blocks, zum Beispiel:
.Kommentar / * Blockieren * / .comment__body / * Element * / .comment - guest / * Modifier * /
Hier haben wir eine .Kommentar Block, der ein Element enthalten kann .Kommentar_Körper. Wir können auch sehen, dass es eine Variation von gibt .Kommentar namens .Kommentar - Gast. Allein aus den Klassen heraus können wir reinigen, was jedes Ding tut und wie seine Beziehungen zueinander sind. .Kommentar_Körper Muss innen leben .Kommentar, während .Kommentar - Gast hat eine Variation von sein .Kommentar.
Das __, -- Notation sagt uns viel über ein Objekt. Dies ist besonders in größeren Teams hilfreich, da es hilft zu kommunizieren, wie, wo und wann Klassen verwendet werden sollten.
Eine gute Analogie So funktioniert BEM:
.person .person - woman .person__hand .person__hand - left .person__hand - right
Hier können wir sehen, dass das grundlegende Objekt, das wir beschreiben, eine Person ist und dass eine andere Person eine Frau sein könnte. Wir können auch sehen, dass Menschen Hände haben; Dies sind Teilbereiche von Menschen, und wiederum gibt es verschiedene Variationen wie links und rechts.
Sass wird aus verschiedenen Gründen verwendet, vor allem, um:
Es war keine leichte Entscheidung, inuit.css auf einen Pre-Prozessor zu verschieben, aber ich bin froh, dass ich es getroffen habe. Die Kombination von OOCSS mit Sass hat sich als äußerst wertvoll erwiesen. Wenn Sie Ihr benutzerdefiniertes Projekt mit Hilfe von Variablen einrichten, sehen zwei inuit.css-Builds nicht immer gleich aus.
Das Einrichten eines Projekts in inuit.css könnte nicht einfacher sein. Angenommen, Ihr Projekt hat eine sehr grundlegende Struktur wie diese:
+ css / + img / + index.html
Dann müssen Sie zunächst inuit.css in dieses CSS-Verzeichnis einfügen. Es gibt zwei Möglichkeiten, dies zu tun:
Accentsconagua
CD ins Projektverzeichnis und mit Git klonen: git clone https://github.com/csswizardry/inuit.css.git css && cd css / && rm -rf .git / && cd… /. Im Grunde heißt es, das Projekt inuit.css in ein Verzeichnis namens klonen css, dann geh hinein css / und entfernen Sie die Git-Versionierung aus den Dateien inuit.css. Gehen Sie dann zurück in das Projektverzeichnis. '.
Wenn Sie das getan haben, sollte Ihr Projekt so aussehen:
+ index.html + css / + inuit.css / + _vars.scss + README.md + watch.sh + your-project.scss + img /
Erstens können Sie vollständig löschen README.md. Als nächstes umbenennen your-project.scss zu was auch immer Sie wünschen, zum Beispiel style.scss.
Hinweis: Wenn Sie CodeKit oder eine andere Schnittstelle zum Kompilieren Ihres Sass verwenden, springen Sie an das Ende des Lernprogramms, wo wir einen kurzen Blick auf die Einrichtung eines Projekts inuit.css werfen.
Jetzt musst du öffnen watch.sh, wo solltest du so etwas finden:
#! / bin / sh # Ändern Sie alle Instanzen von 'your-project' in das von Ihnen benannte Stylesheet Ihres # Projekts, 'cd' in das Verzeichnis, in dem sich diese Datei befindet, und # führen Sie einfach 'sh watch.sh' aus. # Keine Minifikation #sass --watch your-project.scss: your-project.css --style erweitert sass --watch your-project.scss: your-project.min.css --style komprimierter Exit 0
Hier müssen Sie jede Instanz von ändern your-project.scss auf den Namen, den Sie gewählt haben. Diese kleine Datei erleichtert das Ansehen von Sass-Dateien über die Befehlszeile.
Um Ihre Projektdateien anzusehen, müssen Sie nur ein Terminalfenster öffnen, CD in das CSS-Verzeichnis des Projekts und führen Sie es einfach aus sh watch.sh. Voila, dein Projekt ist jetzt auf inuit.css eingerichtet.
Wie bereits erwähnt, enthält inuit.css eine Reihe von Variablen, die eine ganze Menge Dinge tun, wenn Sie sie öffnen _vars.scss Sie sollten sie alle sehen ...
$ debug-mode ist praktisch für Projekte in der Entwicklung; Dadurch wird das mit inuit.css gelieferte Debug-Plugin aufgerufen und im Browser alle möglicherweise nicht zugänglichen oder problematischen Codes visuell markiert.
$ base-font-size und $ Basislinienhöhe sind ziemlich selbsterklärend aber unglaublich wichtig. Mit diesen beiden Informationen allein kann inuit.css Ihren gesamten vertikalen Rhythmus einstellen (siehe Schriftgröße() einmischen _mixins.scss Für mehr Information).
Bei den übrigen Variablen handelt es sich nur um Schriftgrößen für Ihre Überschriften. Diese, gekoppelt mit Ihrem $ base-font-size und $ Basislinienhöhe Variablen vervollständigen Ihren vertikalen Rhythmus. Ändern Sie diese Variablen und sehen Sie, was passiert!
Der nächste Schritt finde ich sehr nützlich; aufmachen inuit.scss und Sie finden ein umfangreiches Inhaltsverzeichnis und eine lange Liste importierter Teilprodukte. Es empfiehlt sich, alle Objekte und Abstraktionen sofort auszukommentieren und sie nach Bedarf zu kommentieren. Dies bedeutet, dass Sie sie absichtlich aufrufen müssen, wenn sie benötigt werden, und dass Sie nicht viele nicht verwendete CSS bündeln.
Wenn Ihre Dateien überwacht, Ihre Variablen festgelegt und Ihre nicht verwendeten Objekte auskommentiert werden, sind Sie alle auf inuit.css eingerichtet.
Es ist gut möglich, 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 (in Bezug auf das, was wir hier brauchen) verhält sich wie jeder andere Compiler auf jeder Plattform, auf der Sie laufen.
Um ein inuit.css-Projekt einzurichten, müssen Sie zuerst die Quelldateien aus dem GitHub-Repository holen:
Nachdem Sie die Dateien entpackt haben, ordnen Sie sie in einem vertrauten Projektlayout an, wie beispielsweise:
Wie Sie sehen, habe ich den Inhalt des Inuit-Quellordners in einen Ordner geworfen css Mappe. Ich habe auch die README.md- und watch.sh-Dateien entfernt.
Öffnen Sie als Nächstes Ihren Compiler (in diesem Fall CodeKit), und weisen Sie ihn an, Ihren Projektordner anzusehen. Bei den meisten OS X-Compilern müssen Sie lediglich Ihren Projektordner in das Anwendungsfenster ziehen. Wie Sie unten sehen können, beobachtet CodeKit jetzt meine inuit.css-master Ordner und hat die .scss-Dateien hervorgehoben, die direkt kompiliert werden. Jede Datei mit einem vorangestellten Unterstrich generiert keine eigene .css-Datei, obwohl sie in andere Dateien importiert werden kann.
Ich habe in diesem Fall nichts umbenannt, aber Sie werden das sehen your-project.scss ist so eingestellt, dass sie in den Namensnamen .css kompiliert wird. Jetzt muss ich nur noch die CSS-Datei an meine index.html anhängen:
Mein ganz eigenes Inuit-Projekt Tunngahugit (willkommen in Inuit)
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 Handumdrehen.
Das Erweitern von inuit.css ist etwas, das wir im zweiten Teil dieses Tutorials behandeln können, aber jetzt müssen Sie nur wissen, dass es so einfach ist your-project.scss sagt Ihnen:
/ ** * Sie gehört dir, cap'n ... Fange an, deine Sachen hier zu importieren. * /
