Wing - Minimalist CSS Framework Webdesigner Will

Das Frontend-Ökosystem ist voll von Open-Source-Frameworks, um Ihren Entwicklungsprozess zu verbessern. Normalerweise möchte jeder etwas anderes von diesen Frameworks; Manche Leute suchen nach Ästhetik, andere wollen Geschwindigkeit oder Benutzerfreundlichkeit .

Wing ist ein neuerer Rahmen und der beste Freund eines Minimalisten. Es wird mit einer Standardrasterkonfiguration, benutzerdefinierten Elementen und Komponenten mit insgesamt 5 KB geliefert .

Der vielleicht beste Teil an Wing ist das Auto-Styling für Standardelemente . Wenn Sie das Wing-CSS-Stylesheet einfach in Ihr Projekt einfügen, werden Sie sofort Änderungen bemerken.

Standardtext, Links und Seitenelemente werden automatisch basierend auf Wings Designs gestaltet. Sie können auch eigene zusätzliche Klassen hinzufügen, um der Seite mehr Ästhetik zu verleihen.

Wing wird mit einem 960px-Gittersystem mit einer 12- Farben -Struktur ausgeliefert . Dies ist ein sehr einfaches Setup und das 960px-Raster wird für die heutige Breitbild-Zielgruppe normalerweise als viel zu klein angesehen. Aber wenn Sie kleinere Websites mögen, ist dies eine ausgezeichnete Wahl.

http://usewing.ml/ ist verrückt einfach und folgt etwa so:

 1 
 2 
 3 

Sie können eine vollständige Kopie von Wing von der Unpkg-CDN hinzufügen. Sie halten ihre Dateien mit der neuesten Version auf dem neuesten Stand, so dass Sie nie Dateinamen ändern müssen. Fügen Sie einfach diese URL zu Ihrer Kopfzeile hinzu und Sie erhalten vollen Zugriff auf das aktuelle Wing-Framework.

Alternativ können Sie das Paket über npm herunterladen oder eine Kopie der Quelle direkt von GitHub herunterladen.

Ich würde Wing mit Normalize.css vergleichen, was ein viel kleineres CSS-Framework ist, das eher einer Reset-Bibliothek gleicht. Wing enthält tatsächlich Standardstile, während Normalize.css nur Elemente zurücksetzt, die in allen Browsern gleich funktionieren.

Das Schöne an beiden ist, dass Sie die volle Kontrolle haben, um die Seite zu bearbeiten, neu zu formatieren und neu zu formatieren, wie Sie es für richtig halten.

Alle Dokumentationen und Code-Snippets finden Sie auf der Wing-Homepage. Verwenden Sie diese Anleitung, wenn Sie nicht sicher sind, wie Sie Ihre Site einrichten sollen.