3 fantastische CSS-Frameworks, die Sie nicht verpassen wollen
Persönlich bevorzuge ich es, ein Projekt mit nur einem Gitter zu programmieren und von dort zu bauen. Ich bin so wählerisch, und ich mag es, so viele Variablen wie möglich zu kontrollieren.
Es gibt jedoch Zeiten, in denen dies nicht praktikabel ist. Vielleicht erstellen Sie eine App oder eine außergewöhnlich große und komplizierte Website. Vielleicht haben Sie einfach keine Zeit, jedes einzelne Element von Grund auf neu zu gestalten, und das müssen Sie auch nicht. Dann wollen Sie ein komplettes Framework mit Extras.
Nun, es wurde viel über die "großen Namen" Frameworks geschrieben - Bootstrap, Foundation, Gumby - also werden wir hier nicht über diese reden. Ich habe wi gespielt ... ich meine drei der weniger bekannten Optionen rigoros zu testen. Schau mal, einer von ihnen könnte genau das sein, was du brauchst.
Kube
Kube ist definitiv ein Werkzeug für den modernen Frontend-Entwickler. Nur moderne Browser - und IE9 + - werden unterstützt. Die Standardstile sind hübsch, aber langweilig genug, um für fast jedes Branding angepasst zu werden.
Es ist, kurz gesagt, ein gut aussehender, aber einfacher und einfacher Rahmen, der mit einer fast universellen visuellen Anziehungskraft entworfen wurde und für eine starke Anpassung gedacht ist.
Die Funktionen
Um alle Funktionen in der Tiefe zu beschreiben oder sie einfach aufzulisten, würde in diesem Artikel wahrscheinlich zu viel Platz in Anspruch nehmen. Daher werde ich Ihnen die Highlights vorstellen: Das Framework selbst ist LESS-basiert und modular. Wenn Sie zum Beispiel alles außer den Schaltflächenstilen möchten, ist es eine sehr einfache Sache, Ihre eigenen zu "kompilieren". Entfernen Sie einfach die entsprechende @ import- Regel von kube.less und gehen Sie. Es ist sicher zu sagen, dass es Styles für fast jedes HTML-Element gibt, das man sich vorstellen kann, und die üblichen Extras wie Buttons, einfache Navigationsleisten, Hilfsklassen und ein ziemlich stabiles Grid-Layout-System.
In gewissem Sinne wird Kube zum Teil durch das definiert, was es nicht hat. Zum Beispiel hat es keinen Überfluss an UI-Elementen und zusätzlichen Stilen. Es gibt keine jQuery-Plugins für die UI-Funktionalität. Und es kommt nicht mit dem Eindruck, dass Sie mit irgendwelchen davon "festhängen".
Fazit
Kube ist ein solides Angebot. Seine Schöpfer haben nicht an den Grundlagen gespart, aber es gibt ein klares Gefühl von "nur was du brauchst", das mit diesem Framework kommt. Es ist ein guter Anfang, und so verkörpert es den wahren Zweck jedes Frameworks. Färbe mich beeindruckt.
IVORY Rahmen
ELFENBEIN, wie Kube, ist entworfen, um leicht zu verstehen und schnell umgesetzt werden. Die Typografie sieht gut aus, ist aber so mild, dass sie für fast jedes Projekt verwendet werden kann, und die allgemeinen Standardstile sind auch.
Es ist ein Rahmen, der entworfen wurde, um Ihnen gerade genug zu geben, um zu beginnen, und ein paar Extras.
Die Funktionen
Die Eigenschaften sind das, was Sie normalerweise erwarten würden: ein solides und flexibles Rastersystem, Stile für Typografie und alle Formen und so weiter. Allerdings unterscheidet sich IVORY von Kube darin, dass Sie ein paar zusätzliche UI-Elemente erhalten: Knöpfe, Alarmfelder, Seitenumbruch, Kippschalter, Tooltips, Breadcrumb-Navigation, Tabs und Akkordeons.
Was diese UI-Komponenten von vielen anderen unterscheidet, ist, dass sie alle mit CSS3 und ohne JavaScript implementiert sind. Der einzige Grund, mit dem jQuery UI überhaupt verknüpft ist, ist, dass die Datumsauswahl funktioniert.
Nur zwei Dinge, die ich nicht mag: Einige der UI-Komponenten-Stile erinnern sehr an Bootstrap 2.0-Stile. Also, du wirst wahrscheinlich diese ändern wollen. Darüber hinaus erfordert das Grid-System die Verwendung einer zusätzlichen Klasse in der letzten Spalte in einer beliebigen Zeile. Ich hasse das einfach.
Fazit
Abgesehen von diesen zwei kleinen Vorbehalten ist das IVORY Framework eine gute Option für eine beliebige Anzahl von Projekten. Es ist nicht die am einfachsten anpassbare Option, aber wenn Sie nur mit einer guten Auswahl an Standardeinstellungen und einigen zusätzlichen UI-Komponenten beginnen müssen, sollten Sie es ausprobieren.
Base
Base, durch Matthew Hartman , nimmt eine etwas trendigere (derzeit jedenfalls) Herangehensweise an das CSS-Framework. Beyogen auf Normalisieren.css Es beginnt mit dünnen Überschriften und flachen Kästchen für Schaltflächen. Es ist nicht zu leugnen, dass die Standardstile ausgesprochen hübsch sind.
Das ist vielleicht nicht jedermanns Sache, je nach Branding-Bedenken, aber es ist einfach genug, um zu ändern. Schließlich dreht sich bei Base alles um Anpassung.
Die Funktionen
Base wird sowohl in der LESS- als auch in der SASS-Version zur Verfügung gestellt, so dass Sie die Variablen schnell ändern und sie nach Ihren Bedürfnissen neu kompilieren können. Zu den integrierten Variablen gehören Schriftgrößen, Haltepunkte, Hauptbehälterbreiten für jeden Haltepunkt und mehr.
Es werden viele zusätzliche Klassen bereitgestellt, um Ihnen bei der Einrichtung Ihrer mobilspezifischen Layouts zu helfen, und es gibt "Mixins" in einer separaten Datei, die Sie auf Ihrem Weg unterstützen.
Wie bei Kube gibt es keine zusätzlichen UI-Komponenten, die über die standardmäßig in HTML enthaltenen Komponenten hinausgehen. Wenn Sie also Oberflächen mit Registerkarten, Akkordeons und Ähnliches verwenden möchten, müssen Sie sie selbst erstellen. Base scheint darauf ausgerichtet zu sein, schöne Websites im Gegensatz zu Web- Apps zu erstellen .
Fazit
Wenn Sie eine Website erstellen, die nicht zu viele appspezifische UI-Komponenten benötigt, ist Base eine fantastische Ressource. Die damit erstellten Seiten sehen schon hübsch aus; Aber wenn Sie die Standardstile nicht mögen, ist es nicht allzu schwierig, sie zu ändern.
