Heim >Web-Frontend >CSS-Tutorial >27 nützliche CSS-Framework-Empfehlungen
Die Verwendung des CSS-Frameworks kann Ihre Arbeit vereinfachen und die Arbeitseffizienz verbessern. Das CSS-Framework ist eine Sammlung von CSS-Dateien, einschließlich grundlegender Elementrücksetzungen, Seitenlayout, Rasterlayout, Formularstilen, allgemeinen Regeln und anderen Codeblöcken. Hier sind 27 ausgezeichnete CSS-Frameworks, die Ihnen empfohlen werden und aus denen Sie wählen können.
1. 960 g
Die Seitenbreite von 960 Pixeln scheint sich zu einem Designstandard entwickelt zu haben, der Webinhalte in verschiedenen aktuellen Auflösungen gut darstellen kann. Um den Webdesign-Prozess zu vereinfachen und die Arbeit einfacher und effizienter zu gestalten, werden häufiger verwendete Größen bereitgestellt.
2. YUI 2: Gitter-CSS
Mango hat YUI einst vom Yahoo-Entwicklungsteam eingeführt, und dieses YUI Grids CSS ist Teil davon. Als eines der bekanntesten CSS-Frameworks bietet YUI Grids CSS vier voreingestellte Seitenbreiten und sechs voreingestellte Vorlagen. Unter ihnen sind die Negativ-Marge-Technologie, die Verwendung der Maßeinheit em und das Löschen von Layout-Floats sehr erlern- und referenzwürdig.
3. Blaupause
Blueprint ist ein ausgereiftes CSS-Framework, das Layout, Typografie, Widget, Zurücksetzen und Drucken in verschiedene CSS-Dateien unterteilt. Beim Webdesign wird der eingeführte Code reduziert und die Seitenladeeffizienz verbessert.
4. BlueTrip
BlueTrip ist ein CSS-Framework, das die besten Teile des BluePrint- und Tripoli-Frameworks integriert; Stellen Sie eine nützliche Stilsammlung und eine gängige Methode zum Erstellen von Websites bereit. So können Sie sich auf das Entwerfen konzentrieren.
5. Elastisches CSS
Elastic ist ein einfaches CSS-Framework zum Layouten von Webseiten. Elastic ermöglicht eine Vielzahl gängiger Webseitenlayouts.
6. Einfach
Die beliebten JQUERY-Komponentenfunktionen auf dem Markt sind alle in das Framework integriert. Sie müssen dieses Framework nur direkt verwenden, ohne die komplexe AJAX-JQuery-Syntax zu erlernen, was sehr praktisch ist.
7. EZ-CSS
EZ-CSS ist ein leichtes, browserfreundliches und benutzerfreundliches CSS-Framework. Wird zum Erstellen komplexer Seitenlayouts mit CSS+p verwendet.
8. Tripolis
Tripoli ist eine allgemeine CSS-Spezifikation für die HTML-Präsentation. Durch das Zurücksetzen und Neuerstellen von Browserstandards bietet Tripoli eine Grundlage für eine standardisierte, browserübergreifende Leistung Ihrer Website-Projekte.
9. CleverCSS
CleverCSS ist eine kleine, von Python inspirierte Auszeichnungssprache für CSS, mit der sich ein Stylesheet sauber und strukturiert erstellen lässt. In vielerlei Hinsicht ist es sauberer und leistungsfähiger als CSS2. Der offensichtlichste Unterschied zu CSS ist die Syntax: Sie basiert auf Einrückungen und ist nicht eintönig. Obwohl dies offensichtlich gegen die Regeln von Python verstößt, ist es dennoch eine gute Idee für die Organisation von Stilen.
10. SenCSS
Es bietet angemessene Stile für die wiederholten Teile Ihres CSS, sodass Sie dem Stil Ihrer Website mehr Aufmerksamkeit schenken können. Im Gegensatz zu anderen CSS-Frameworks enthält SenCSs keine verschiedenen komplizierten Layoutstile oder vordefinierten Rastersysteme. Was kann SenCSs also tun? Grundlinien, Schriftarten, Abstände, Ränder, Tabellen, Listen, Überschriften, Anführungszeichen, Formulare usw. sind alles, was SenCSs tun kann.
11. Emastisch
Emastic ist ein CSS-Framework mit einer kontinuierlichen Mission: seltsame neue Welten zu erkunden, neues Leben und neue Website-Bereiche zu finden und mutig dorthin zu gehen, wo CSS-Frameworks noch nicht angekommen sind. Es ist leichtgewichtig, hinsichtlich der Seitenbreite benutzerfreundlich und verwendet feste und nicht feste Spaltenbreiten im Raster. Elastic verwendet das „em“-Layout.
12. Typogridphy
Typogridphy ist ein für Rasterlayouts geeignetes CSS-Framework, das Webdesignern und Front-End-Entwicklern dabei hilft, schnell zu programmieren, um ein schönes Rasterlayout zu erzielen. Es ermöglicht Ihnen, schnell und einfach eine Vielzahl von Rasterlayouts zu erstellen. Das CSS dieses Frameworks entspricht vollständig der semantischen Validierung und den strengen XHTML- und anderen Standards.
13. Weniger Rahmen 3
Es handelt sich um ein auf less.js basierendes CSS-Framework, das seine erweiterten Funktionen wie Mixins, Variablen und Verschachtelung voll ausnutzt.
14. Elemente
Es handelt sich um ein sehr leichtes CSS-Framework. Der Autor hofft offensichtlich, dass das gesamte Projekt in seinem CSS-Framework bereitgestellt werden kann.
15. Boilerplate
Es handelt sich um eine voreingestellte Vorlage für HTML/CSS/JS, die Ihnen beim Erstellen einer browserübergreifenden Website helfen kann, die HTML5-CSS3 unterstützt.
16. Malo
Eine ultrakleine, flexible, benutzerfreundliche, personalisierte Seite mit variabler Breite.
17. Das 1-KB-CSS-Raster
Wenn Sie nur ein leichtes CSS-Grid-System benötigen, um das Hauptgerüst Ihrer Website zu erstellen, können Sie 1Kb CSS Grid ausprobieren. Die 1-KB-CSS-Grid-Website bietet einen Generator zum Anpassen des CSS-Rasters, und Sie können das angepasste CSS-Raster direkt herunterladen.
18. Fluid Grid System
Der Text des Navigationsmenüs einer Website kann nicht genügend Informationen liefern, um den Inhalt der aktuellen Menüschaltfläche auszudrücken. Die allgemeine Lösung besteht darin, Tooltip-Informationen zu verwenden. Dann kann das mobile Navigationsmenü auch dieses Problem lösen und dem Website-Design etwas Mode verleihen. Und dynamische Elemente.
19. Inhalte mit Stil
Inhalte mit Stil Der nächste logische Schritt besteht darin, dies zu einem CSS-Framework zu erweitern, das eine schnelle Entwicklung von Websites unter Verwendung bereits geschriebener und getesteter Komponenten ermöglicht. Was tatsächlich benötigt wird, ist eine Reihe von Namenskonventionen und eine flexible Basisvorlage.
20. WYM-Stil
WYMstyle ist eine Reihe von CSS-Dateien, die Sie einfach kombinieren können, um schnell das Layout Ihrer Website zu erstellen. Durch die Bereitstellung zuverlässiger, gut getesteter CSS-Module ist WYMstyle bestrebt, jede Website vor mühsamen Cross-Browser-Kompatibilitätstests zu bewahren.
21. Das Goldene Gitter
Es handelt sich um ein relativ neues CSS-Framework, das von vladocar entwickelt wurde und eine neue Layout-Referenz für modernes Website-Design bieten kann. Es ist sehr kompakt und daher leicht zu erlernen und zu verwenden. Es lohnt sich, einige der Methoden zum Umgang mit Layouts zu erlernen. Wenn Sie das 960-Gittersystem verstehen, wird Ihnen die Verwendung dieses Frameworks leichter fallen.
22. Noch ein mehrspaltiges Layout (YAML)
YAML ist ein (X)HTML/CSS-Framework, das für flexible und benutzerfreundliche Layouts entwickelt wurde. YAML hat seit seiner Einführung im Jahr 2007 umfangreiche und umfassende Dokumentation bereitgestellt. Wie viele andere CSS-Frameworks wie Blueprint CSS oder YUI Grids bietet es ein System vordefinierter CSS-Klassen zur Erstellung gitterbasierter Layouts. Um ein Layout zu erstellen, erstellt ein Designer die HTML-Struktur der Website, schreibt dann das CSS für die Container (HTML-Tags) und kümmert sich um den Rest.
23. Kompass
Compass ist ein Stil-Authoring-Framework, mit dem Sie Ihre Stylesheets und Markups einfach erstellen und verwalten können. Schreiben Sie Ihre eigenen Stile mit Sass anstelle des Original-CSS. Durch die Kombination von Mixins und Compass in Sass können Sie Stil-Frameworks wie Blueprint verwenden, um Ihre eigenen Style-Tags zu ersetzen, und Sie können CSS-Frameworks wie Blueprint verwenden . Es ist sehr praktisch.
24. Schema-Webdesign-Framework
Schema ist ein Webseiten-Framework auf Präsentationsebene, das die notwendigen CSS- und HTML-Tags für sich wiederholende Designaufgaben bereitstellt. Anstatt HTML/CSS für jedes neue Website-Projekt von Grund auf zu erstellen, bietet Schema die notwendige Grundlage, um loszulegen und Ihr Design in kürzester Zeit zum Laufen zu bringen.
25. Funkeln
Es handelt sich um ein sehr ausgereiftes System, es ist klein, flexibel, leicht zu erlernen und zu verwenden.
26. Das jQuery UI CSS Framework
Es handelt sich um eine Reihe von UI-Steuerelementen und Mausinteraktionskomponenten mit Skin-Änderungsfunktionen basierend auf JQuery. Wird verwendet, um Entwicklern beim Erstellen von Webanwendungen mit einer guten Benutzererfahrung zu helfen. Bietet ein leistungsstarkes CSS-Framework für benutzerdefinierte Widgets mit jQuery. Der ThemeRoller ermöglicht es Ihnen, verschiedene Stile von Weboberflächen nach Ihren Wünschen zu bedienen und zu gestalten.
27. 52Rahmen
Es handelt sich um ein Webentwicklungs-Framework, das HTML5 und CSS3 implementiert. Es handelt sich um ein browserübergreifendes Framework, das auf allen gängigen Browsern, einschließlich IE6, ausgeführt werden kann. Die Implementierung erfolgt hauptsächlich mithilfe einer HTML5-fähigen JavaScript-Datei.
Das obige ist der detaillierte Inhalt von27 nützliche CSS-Framework-Empfehlungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!