Hocus-Pokus: Erstellen eines Design-freien Sass-Frameworks

Hocus-Pocus ist ein Design-freier Sass-Framework, an dem ich in meiner Freizeit arbeite. Die Hauptidee hinter Hocus-Pocus besteht darin, ein universelles und leichtes Stylesheet-Starter-Kit zu erstellen, das sich auf die häufigsten Funktionen konzentriert. In diesem Artikel werde ich behandeln, warum ich mich entschlossen habe, mein eigenes Sass -Framework und den Ansatz zu erstellen, den ich dabei gewählt habe.

Key Takeaways

• hocus-pocus ist ein Design-freies Sass-Framework, das ein leichtes, universelles Stylesheet-Starter-Kit bietet, das sich auf die häufigsten Funktionen konzentriert. Es ermöglicht Benutzern, das Aussehen jeder einzelnen Komponente mit Variablen zu ändern, und ermöglicht die Deaktivierung bestimmter Funktionen oder das Definieren einer Reihe von Helfern.
• Das Framework ist einfach mit Bower und NPM zu installieren, wodurch SASS und Autoprefixer ausgeführt werden müssen. Es folgt einer regelmäßigen Konvention im Dash-Stil-Namen und achtet genau auf Dokumentation und Aktualisierungen des Hocus-Pocus-Changelogs.
• Zukünftige Pläne für Hocus-Pocus sind das ideale Sass-Starter-Kit für komplexe Projekte, die sich auf projektspezifische UI-Komponenten und Themendefinition konzentrieren. Haupt neue Funktionen sind nicht geplant, aber Verbesserungen an Syntax- und Klassennamen können implementiert werden.

Warum habe ich angefangen, an einem Sass -Framework zu arbeiten?

Kurz gesagt, ich würde sagen, ich habe angefangen, an einem SASS -Framework zu arbeiten, weil ich Zeit sparen wollte, wenn ich neue Webprojekte starten wollte. Mir ist aufgefallen, dass ich selbst, wenn ich an wirklich benutzerdefinierten Designs arbeite, immer dieselben Tools füge, dieselben Standardpakete einbeziehe und eine ähnliche Sammlung grundlegender CSS -Komponenten implementieren kann.

Die zweite Frage, die dann folgt, lautet:

Warum verwenden Sie nicht ein vorhandenes, bekanntes und bewährtes Framework wie Bootstrap?

Meine Antwort darauf kommt auf die Vorlieben und meine Herangehensweise an CSS an. Ich denke, Bibliotheken wie Bootstrap oder Foundation sind großartig und haben sich stark verändert, wie die Leute über CSS denken. In den meisten Fällen in meiner eigenen Projektarbeit brauche ich jedoch nicht all diese Funktionen und UI -Komponenten wie Fortschrittsriegel oder Semmelbrösel. Stattdessen habe ich lieber etwas universelleres. Ich bevorzuge etwas, das ich in jedem Projekt verwenden kann, ohne das Framework -CSS -Klassen außer Kraft zu setzen.

Aus den obigen Gründen können Sie in Hocus-Pocus das Aussehen jeder einzelnen Komponente mit Variablen ändern. Sie können sogar einige Funktionen deaktivieren oder eine Reihe von Helfern definieren. Der Nachteil dieses Ansatzes besteht

Voraussetzungen und Prinzipien

Installation

Das Framework ist verfügbar und einfach mit zwei verschiedenen Paketmanagern zu installieren: Bower und NPM. Es erfordert SASS (minimal erforderliche Version ist 3.3.0) und Autoprefixer ausführen. Autoprefixer wird verwendet, um die erforderlichen Anbieter -Präfixe zur endgültigen kompilierten CSS -Datei hinzuzufügen. Ich mache mir heutzutage nicht allzu sehr Sorgen um Kompatibilität zwischen verschiedenen Browsern, da ich persönlich die Autoprefixing für ausreichend finde. Zusätzlich verwende ich SASS-Linter (SCSS-Lint), dies ist jedoch nicht erforderlich, um Hocus-Pokus auszuführen und die Dinge richtig zu machen. Hocus-Pocus funktioniert ohne es.

naming Convention

Das nächste Prinzip ist für jeden Rahmen wichtig - die Namenskonvention. Ich bevorzuge reguläre Klassennamen im Dash -Stil ohne Bem. Ich werde mich nicht beschweren, wenn Sie ein Fan von BEM sind und es vorziehen, die BEM -Namenskonvention zu verwenden, wenn es für Sie funktioniert - und machen Sie es. Aus meiner Sicht behebt BEM nicht alle Verantwortungsprobleme in CSS. Ich finde auch, dass ich mich meinem CSS mit weniger Elementen auf Klassenebene nähere, wenn ich Bem verwende. Das Hinzufügen eines neuen Elements zu einem vorhandenen Block ist einfach zu einfach.

Dokumentation

Zu guter Letzt achte ich genau auf das Schreiben von Dokumentationen und den Hokus-Pokus-Changelog auf dem neuesten Stand. Die Dokumentation muss nicht perfekt sein, besonders zu Beginn, aber ich versuche immer, Zeit zu finden, um sie zu verbessern. Dies hilft Newcomern

Framework -Funktionen

Die folgenden Rahmenfunktionen sind meiner Meinung nach am charakteristischsten für Hocus-Pocus und geben Sie den besten Überblick darüber, was sein Fokus wirklich ist.

Die meisten Rahmenklassen sind von vorhandenen Projekten inspiriert, an denen ich in der Vergangenheit gearbeitet habe. Sie können auch einige Ähnlichkeiten mit anderen CSS -Frameworks erkennen, die mich inspiriert haben, insbesondere meine Favoriten - Primer und Inuitcss.

Framework-Funktionen in Hocus-Pocus gehören:

Normalisieren Sie sich mit einigen Verbesserungen wie globaler Box-Größen-Set für Border-Box- oder Textelemente ohne oberen Rand.
Eine neue Standardfarbpalette basierend auf CLRS.cc.
Ein Flüssigkeitsnetz basierend auf Flexbox mit Breitenhelfern, die Brüche als Klassennamen verwenden (.1/2, .1/3 und so weiter).
Große Unterstützung für reaktionsschnelles Webdesign. Es besteht die Möglichkeit, entweder "Mobile First" oder "Desktop First" als bevorzugten Ansatz zu wählen. Sie sind auch in der Lage, Haltepunkte für jeden zu definieren, und jeder von ihnen erhält ihre eigenen Helfer für Abstand, Gitter, Sichtbarkeit und ein einzelnes Sass -Mixin.

zum Beispiel:

$<span>rwd-type: desktop-first;
</span>$<span>rwd-map: (
</span>  <span>'mobile': 680px
</span><span>); 
</span>$<span>spacing-map: (
</span>  <span>'double': double($spacing-unit)
</span><span>);</span>

Dann haben Sie in kompilierten CSS Zugriff auf Klassen wie .Mobile-1/2, .mobil versteckte und .mobile-padding-Double.

1. Generische Standardstile für Textelemente mit vertikalem Rhythmus basierend auf Gridlover.
2. Zusätzliche Modifikatoren für andere HTML -Elemente wie eine Inline -Liste, eine Menüliste, ein Kreisbild oder eine Zebra -Tabelle.
3. Verschiedene Tastentypen und drei Versionen von Formularen: Inline, gestapelt und horizontal.
4. Essentielle UI -Komponenten wie das Medienobjekt, das Box -Objekt, ein Navigabbar, ein Heldenelement für Zielseiten und eine klebrige Fußzeile. Nichts mehr.

zukünftige Hoffnungen für Hocus-Pocus

Mein Ziel ist es, Hocus-Pocus zu einem idealen Sass-Starter-Kit zu machen, egal wie komplex Ihre Projekte sind. Auf diese Weise können Sie sich darauf konzentrieren, projektspezifische UI -Komponenten zu schreiben und Ihr Thema zu definieren.

Ich habe nicht vor, große neue Funktionen zu implementieren. Ich denke, die enthaltenen Funktionen sind eine angemessene Menge an Funktionen und sind wahrscheinlich die letzten. Ich werde die Syntax für einige Komponenten wahrscheinlich verbessern oder einige Namen einzelner Klassen ändern, aber ich prognostiziere keine Kompatibilitätsbrechungsänderungen aus der aktuellen Version. Im Moment bin ich mehr bestrebt, Fehler zu beheben, die auftreten, wenn mehr Menschen Hocus-Pocus versuchen.

Wenn Sie der Meinung sind, dass das Hocus-Pocus-Framework für Sie in einem bevorstehenden Projekt hilfreich ist, finden Sie eine vollständige Dokumentation auf hocus-pocus.io. Der Hocus-Pocus-Code ist Open Source und alle auf GitHub verfügbar. Ich schätze Kommentare, Feedback und Informationen zu potenziellen Problemen.

häufig gestellte Fragen (FAQs) zum Erstellen eines Design-Free-Sass-Frameworks

Was ist ein SASS-Framework und warum ist es für die Webentwicklung wichtig? . Es ist wichtig in der Webentwicklung, da es dazu beiträgt, den Prozess des Erstellens von Stilblättern für Websites zu beschleunigen. Es ermöglicht Entwicklern, Variablen, verschachtelte Regeln, Mixins und Funktionen zu verwenden, die alle bei der Aufrechterhaltung von CSS sehr nützlich sein können.

Ein Design-Free-Sass-Framework unterscheidet sich von einem regulären Sass-Framework, da es dem Benutzer keine Entwurfsentscheidungen auferlegt. Es bietet Entwicklern einen sauberen Schiefer, auf dem sie aufbauen können, sodass sie ihre eigenen Designoptionen implementieren können, ohne bereits bestehende Stile außer Kraft zu setzen. >

Verwenden eines Design-Free-Sass-Frameworks bietet mehrere Vorteile. Es ermöglicht den Entwicklern, eine saubere und organisierte Codebasis beizubehalten, wodurch das Verwalten und die Aktualisierung erleichtert wird. Es bietet auch eine solide Grundlage, um darauf aufzubauen und Zeit und Mühe in den ersten Entwicklungsstadien zu sparen.

Wie kann ich damit beginnen, ein Design-freier Sass-Framework zu erstellen? Zuerst müssen Sie Ihre Projektstruktur einrichten. Dann können Sie Ihre Variablen, Mixins und Funktionen erstellen. Danach können Sie Ihre Grundstile und Layout -Module aufbauen. Schließlich können Sie Ihren Sass in CSS zusammenstellen. Texteditor, ein Sass -Compiler und ein Webbrowser zum Testen. Möglicherweise finden Sie es auch hilfreich, einen Taskläufer wie Gulp oder Grunn zu verwenden, um Ihren Workflow zu automatisieren. Für jede Art von Projekt kann ein Design-Free-Sass-Framework verwendet werden. Es ist besonders nützlich für große Projekte, bei denen die Aufrechterhaltung einer sauberen und organisierten Codebasis von entscheidender Bedeutung ist. SASS -Framework, indem Sie die Variablen, Mixins und Funktionen für Ihren Anforderungen ändern. Sie können auch Ihre eigenen Stile und Layoutmodule hinzufügen. Fügen Sie Ihren Code trocken zu halten (wiederholen Sie sich nicht), verwenden Sie aussagekräftige Namen für Ihre Variablen und Mixins und organisieren Sie Ihren Code logisch und konsistent? Mit anderen CSS-Frameworks? Möglicherweise müssen Sie jedoch einige der Standardstile des anderen Frameworks außer Kraft setzen, um sicherzustellen, dass Ihre Designauswahl nicht außer Kraft gesetzt wird.

Es gibt viele Online-Ressourcen, um mehr über das Erstellen eines designfreien Sass-Frameworks zu erfahren. Einige gute Orte sind die offiziellen Sass -Dokumentation, Online -Tutorials und Webentwicklungsforen.

Das obige ist der detaillierte Inhalt vonHocus-Pokus: Erstellen eines Design-freien Sass-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!