suchen
HeimWeb-FrontendCSS-TutorialHocus-Pokus: Erstellen eines Design-freien Sass-Frameworks

Hocus-Pocus: Building a Design-Free Sass Framework

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.
  1. Eine neue Standardfarbpalette basierend auf CLRS.cc.
  2. Ein Flüssigkeitsnetz basierend auf Flexbox mit Breitenhelfern, die Brüche als Klassennamen verwenden (.1/2, .1/3 und so weiter).
  3. 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!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Entmystifizierende Bildschirmleser: Zugrunde Formen und Best PracticesEntmystifizierende Bildschirmleser: Zugrunde Formen und Best PracticesMar 08, 2025 am 09:45 AM

Dies ist der 3. Beitrag in einer kleinen Serie, die wir in Form von Barrierefreiheit gemacht haben. Wenn Sie den zweiten Beitrag verpasst haben, lesen Sie "Verwalten des Benutzerfokus mit: Fokus-Sichtbar". In

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms FrameworkErstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms FrameworkMar 07, 2025 am 11:33 AM

Dieses Tutorial zeigt, dass professionelle JavaScript-Formulare mithilfe des Frameworks Smart Forms erstellt werden (Hinweis: Nicht mehr verfügbar). Während der Rahmen selbst nicht verfügbar ist, bleiben die Prinzipien und Techniken für andere Formbauer relevant.

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -ElementenHinzufügen von Kastenschatten zu WordPress -Blöcken und -ElementenMar 09, 2025 pm 12:53 PM

Die CSS-Box-Shadow- und Umrisseigenschaften haben Thema gewonnen. JSON-Unterstützung in WordPress 6.1. Sei ein paar Beispiele für die Funktionsweise in realen Themen und welche Optionen wir diese Stile auf WordPress -Blöcke und Elemente anwenden müssen.

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)Mar 04, 2025 am 10:22 AM

In diesem Artikel werden die auf dem Envato -Markt verfügbaren Top -Skripte für PHP -Formulierungen untersucht und deren Funktionen, Flexibilität und Design verglichen. Lassen Sie uns vor dem Tauchen in bestimmte Optionen verstehen, was ein PHP -Formular Builder ist und warum Sie einen verwenden würden. Eine PHP -Form

Arbeiten mit GraphQL CachingArbeiten mit GraphQL CachingMar 19, 2025 am 09:36 AM

Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört

Machen Sie Ihren ersten Seltsamen -Sufle -ÜbergangMachen Sie Ihren ersten Seltsamen -Sufle -ÜbergangMar 15, 2025 am 11:08 AM

Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.

Show, Don ' TellShow, Don ' TellMar 16, 2025 am 11:49 AM

Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach

Edle und coole CSS -Scrollbars: Ein SchaufensterEdle und coole CSS -Scrollbars: Ein SchaufensterMar 10, 2025 am 11:37 AM

In diesem Artikel werden wir in die Welt der Scrollbars eintauchen. Ich weiß, es klingt nicht zu glamourös, aber vertrau mir, eine gut gestaltete Seite geht Hand in Hand

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.