Share
Sind Sie zufrieden mit einer der verfügbaren CSS-Grid-Bibliotheken? Nein? Ich beschuldige dich nicht. Geben Sie Susy ein, ein Plugin für das Compass-CSS-Framework, mit dem Sie Ihr eigenes benutzerdefiniertes Grid-Framework erstellen können, um den Aufwand zu minimieren und die Verwendung verständlicher zu machen. Klingt gut, richtig? Lass uns gleich rein springen.
Ich werde mich nicht viel mit Compass oder SCSS (der Sprache, in der Sie das CSS schreiben) vertiefen, aber Sie können sich gerne auf unseren Kurs "Pflege mit CSS mit Sass" und "Compass Premium" beziehen, wenn Sie mehr darüber erfahren möchten.
Sie können drei verschiedene Arten von Gittern erstellen: statisch, flüssig und magisch.
Heutzutage scheinen populäre Grid-Bibliotheken auf die eine oder andere Weise zu verfehlen. Raster wie 960 und Blueprint sind statische Raster mit sehr spezifischen Pixelwerten. Das Anzeigen dieser Raster auf Bildschirmen mit einer Breite von weniger als 950 Pixeln führt zu horizontalen Bildlaufleisten - dem bane des Web.
Fluidgitter sind schwierig, um recht zu bekommen, aber es gibt einige. Die meisten Fluidraster arbeiten mit Prozentsätzen anstelle von Pixeln, sie haben jedoch eine maximale Größe und machen es unmöglich, eine respektable maximale Breite zu übersteigen. Ein fließendes Layout ist an sich fast so schlecht wie ein festes Layout, da mobile Geräte zwar eine bessere Abdeckung für Desktop-Computer erhalten, das Layout jedoch eher schlecht ist. In dieser speziellen Situation können Sie mit einem statischen Raster besser arbeiten. Ja, auf Geräten mit einer niedrigeren Auflösung müssen Sie horizontal scrollen, aber prozentuale Systeme erhalten normalerweise eine Spalte, die beispielsweise 10% von 480px beträgt. Dies verursacht eine vertikale Spaltung in Ihrem Text.
Eine Lösung für dieses Problem ist CSS Medien-Anfragen. Einige der bekannteren Bibliotheken, wie das "1140-Raster" und das "Bootstrap-Gerüstraster", enthalten voreingestellte Medienabfragen. Das 1140-Raster hat ein fließendes Layout, aber bei kleinen Bildschirmgrößen stapeln sich die Säulen übereinander.
Fluidnetze sind schwierig, um richtig zu werden…
Das Gerüstgitter von Bootstrap hingegen umfasst mehrere statische Layouts. Wenn sich die Bildschirmgröße ändert, ändert Bootstrap das Layout in das für die aktuelle Bildschirmgröße am besten geeignete Layout. Sobald Sie eine mobile Bildschirmgröße erreicht haben, lädt Bootstrap dasselbe Setup wie das 1140-Raster, ein flüssiges Layout, bei dem alle Säulen übereinander angeordnet sind.
Was ist daran falsch, eines davon zu wählen? Technisch nichts, aber sie sind nicht auf Ihre App zugeschnitten. Dies zwingt Sie dazu, Ihre App in ihr Raster einzubauen und die Einschränkungen des Frameworks zu umgehen. Sie können ihr Framework jederzeit ändern, aber Sie können auch Ihr eigenes erstellen und die nicht benötigten Overhead-Funktionen abschneiden.
Wie bereits erwähnt, ist Susy ein Plugin für das Compass-Framework, das eine Vielzahl von Mix-Ins für die Erstellung eigener CSS-Grids bietet. Sie geben einfach die Standardanzahl der Spalten und einige Größenoptionen (Spaltenbreite, Rasterauffüllung usw.) an, und Susy berechnet die korrekten Prozentsätze für Ihre Elemente. Dies gibt Ihnen die Möglichkeit, die Anzahl der Spalten und deren Größe zu ändern.
Sie können drei verschiedene Arten von Gittern erstellen: statisch, flüssig und magisch.
Sie wissen bereits, was statische und flüssige Gitter sind. Lassen Sie uns einen Blick darauf werfen, was "magische" Raster Ihnen geben. Magische Gitter haben eine elastische Außenseite und eine Flüssigkeit im Inneren. Mit anderen Worten, die Außenseite des Rasters (maximale Breite) passt sich der Standardschriftgröße des Browsers an (Desktop-Browser haben normalerweise einen Standardwert von etwa 16 Pixeln). Die Größe des Rasters wird basierend auf der tatsächlichen Breite des Browsers geändert. Diese Kombination verleiht Ihrer Website ein einheitlicheres Aussehen in allen Browsern und unterstützt gleichzeitig kleinere Bildschirme.
Susy bietet ein Mix-In namens "at-breakpoint" an, mit dem Sie benutzerdefinierte CSS an die Größe des Bildschirms anpassen können. Dieses Einmischen bewerkstelligt dies mit CSS-Medienabfragen. So können Sie beispielsweise die Spalten so anordnen, dass sie wie in den zuvor beschriebenen Frameworks übereinander gestapelt werden, und Sie können sogar Inhalte entfernen, die nicht zu einem mobilen Gerät passen.
Ich gehe davon aus, dass Sie bereits Compass installiert haben, aber wenn nicht, können Sie sich auf Jeffreys Videoserie beziehen. Um Susy zu installieren, öffnen Sie einfach eine Ruby-Befehlszeile und geben Sie Folgendes ein:
sudo gem installieren susy
Als Nächstes erstellen Sie ein Compass-Projekt. Geben Sie Folgendes ein:
compass create Projektname -r Susy -u Susy
Sie sollten eine Info-Seite mit Details zum Start sehen.
In dem neu erstellten Verzeichnis sollten Sie zwei Ordner mit einer Konfigurationsdatei sehen. Sie bearbeiten die Dateien, die sich im Ordner befinden sass Verzeichnis; Compass kompiliert diese Dateien, um das endgültige CSS im Stylesheets-Ordner auszugeben.
Um Zeit zu sparen, die CSS-Dateien nach jedem Update zu kompilieren, können Sie Compass 'verwenden. sehen Befehl, damit Compass Ihre Dateien automatisch neu kompiliert, wenn Sie ein Update speichern. Geben Sie im Terminalfenster den folgenden Befehl ein:
Kompassuhr
Compass startet nun die Überwachung und kompiliert die Dateien im sass Mappe. Beachten Sie, dass Sie das Terminalfenster geöffnet lassen müssen, um den Ordner überwachen zu können. Wenn Sie das Terminal zur Dateibearbeitung verwenden (d. h. vim), müssen Sie ein anderes Fenster öffnen.
Nachdem Sie nun alles eingerichtet haben, werfen Sie einen Blick auf meine schnelle Demo. Ich werde das HTML kurz halten, weil es das CSS ist, für das wir wirklich hier sind. Bei der Demo handelt es sich um einen Eventgast-Manager, der die eingeladenen Gäste auflistet und verfolgt, von wem RSVP empfangen wurde. Es ist eine einfache Idee, die viele der Konzepte zeigt, die wir besprochen haben.
In HTML-Richtung gibt es einen Kopfzeilenbereich, gefolgt von einer Zeile mit dem Namen des Ereignisses, einigen Steuerelementen und schließlich der tatsächlichen Gästeliste. Sie können sich das Bild unten ansehen, um das Layout besser zu verstehen.
Hier ist die gesamte HTML-Seite für die Demo:
Planen Sie es! Event Guest Manager
Gästeliste für - Johns Hochzeit
Aus Kontakten hinzufügen Neuen Gast hinzufügen
Name Telefon Zelle RSVP-Status Dave K. Samten [email protected] 708–6777 360-234-1192 Bestätigt Bob Renper [email protected] 537–4267 621-124-4294 Bestätigt Kevin D. Turner [email protected] 942-2674 930-654-4144 RSVP
Susy benutzt min-Breite für die Medienabfragen standardmäßig; Sie definieren also zunächst das CSS für das kleinste Layout und erweitern es dann schrittweise mit der zunehmenden Bildschirmgröße. Die mobile Version trennt die Tagline und die Buttons in ihre eigenen Zeilen, und wir machen alles auf die gesamte Seitenbreite.
Ich benutze ein anderes Compass-Plugin namens Sassy Buttons, um die CSS der Buttons zu generieren. Es ist nicht Bestandteil dieser Demo, aber Sie können es installieren, indem Sie Folgendes in ein Terminal eingeben:
gem installieren freche knöpfe
Fügen Sie dann die folgende Zeile zu Ihrem hinzu config.rb Datei:
erfordern 'freche Knöpfe'
Definieren wir das Layout. Öffnen _base.scss in dem sass Mappe. Diese Datei enthält alle einführen Anweisungen und Variablen, die wir später brauchen. Ersetzen Sie alles in dieser Datei durch Folgendes:
@import "susy"; // wenn Sie das Buttons-Plugin verwenden möchten @import "sassy-buttons"; // Dies ist die Standardanzahl von Spalten. $ total-columns: 5; // Breite jeder Spalte $ column-width: 4em; // Abstand zwischen den Spalten $ rinnenbreite: 1em; // Platz rechts und links vom Raster $ grid-padding: $ gossen-width; // alternative Layout-Haltepunkte $ tablet: 8; $ computer: 55em 12;
Ein fließendes Layout ist an sich fast so schlecht wie ein festes Layout…
Das Gesamtspalten enthält die voreingestellte Anzahl von Spalten für die kleinste Anzeige in Ihrem Layout.
Ich hatte drei Layouts insgesamt: Mobile, Tablet und Computer. Mit Susys Haltepunkten können Sie beispielsweise die Mindest- und Höchstgrößen für die Medienabfragen festlegen, und Sie können sogar spezielle Unterstützung für Internet Explorer hinzufügen. Ich werde dieses Beispiel einfach halten und nur zwei Arten behandeln.
Der Haltepunkt des Tablets wird aktiviert, wenn der Bildschirm acht Spalten aufnehmen kann. Der Computer-Haltepunkt wird aktiviert, wenn der Bildschirm mindestens 55 cm breit ist 12 im $ computer: 55em 12; weist Susy an, zu zwölf Spalten zu wechseln.
Speichern Sie diese Datei und öffnen Sie sie screen.scss. Löschen Sie alles in der Datei und importieren Sie die Basisdatei. Definieren wir auch den Hauptcontainer:
@import "Basis"; body background: # F7F3E8; eine Textdekoration: keine; .container @include container ($ total-column, $ tablet, $ computer);
Beachten Sie, dass Sie beim Importieren der Datei keine Unterstreichung oder Dateierweiterung benötigen Base Datei. In der Containerklasse verwenden wir das erste Susy-Mix-In, das die verschiedenen Layouts für das Raster definiert. Dann ist es nur noch ein regulärer SCSS für das mobile Layout:
Accentsconagua
#header font-weight: 700; Schriftgröße: 72px; Span font-weight: 300; Schriftgröße: 18px; Bildschirmsperre; #controls #Buttons margin-bottom: 5px; #phonebook @include sassy-button ("simple", 6px, 14px, # 337EC4); #newguest margin-top: 5px; @include sassy-button ("simple", 6px, 14px, # D93131); Tabelle Breite: 100%; thead color: #FEFEFE; Hintergrund: # 000; th text-align: left; Schriftgewicht: 500; Polsterung: 10px; tbody border: 3px solid # 000; tr Hintergrund: # E5E5E5; tr.alt background: #EEEEEE; .buttoncell .confirm @include sassy-button ("simple", 6px, 14px, # F39B06); .unconfirm @include sassy-button ("flach", 6px, 14px, # 3BA06F); .email display: none; .phone display: none; Wie Sie in den letzten beiden Zeilen sehen können, blende ich die Spalten für E-Mail und Telefon in der Tabelle aus, sodass die Seite normalerweise auf ein mobiles Gerät passt. Geben Sie dem Benutzer als bewährte Methode einen anderen Weg, um die vollständigen Informationen anzuzeigen (d. H. Modale, andere Seite). Ich lasse dies jedoch der Einfachheit halber weg.
Wir haben jetzt das Basis-CSS für die mobile Website fertiggestellt und können das Layout mit Haltepunkten ändern. Hier ist ein kurzer Screenshot der mobilen Version, den ich auf meinem iPhone gemacht habe:
Der erste Haltepunkt, den wir implementieren müssen, ist die Tablet-Version. Denken Sie daran, wir müssen zuerst mit dem kleinsten Layout beginnen. Die Tablettgröße ist groß genug, um den Slogan in eine eigene Zeile zu setzen, und wir können auch die E-Mail-Spalte anzeigen. Leider ist es immer noch nicht groß genug, um den Ereignisnamen und die Schaltflächen in derselben Zeile zu platzieren. Hier ist der SCSS für diesen Haltepunkt:
@include at-breakpoint ($ tablet) body .container #header span display: inline; Tabelle .email Anzeige: Tabellenzelle;
Hier gibt es keine 'magischen' Befehle, sondern nur Standard-SCSS in einem Susy-Mix-In. Hier ist ein Screenshot von einem iPad des Tablet-Layouts:
Als letztes implementieren wir die Desktop-Version. Wir haben definitiv mehr als genug Platz für alle Säulen; Daher wird der Tisch auf beiden Seiten eingerückt, damit nicht zu viel Platz vorhanden ist. Wir verschieben die Schaltflächen auch in die gleiche Zeile wie der Name des Ereignisses und richten ihn nach rechts aus, um die Tabelle zu zentrieren (zumindest visuell). Hier ist dieser Code:
@include at-breakpoint ($ computer) body .container #controls #menutitle @include span-column (5); Rand oben: 5px; #tasten text-align: right; @umfassende Spalten (5 Omega); table @ include-Präfix (1); @umschließen Suffix (1); .cell display: table-cell;
Dies ist das erste Mal, dass wir das verwenden Span-Spalten einmischen. Susy nimmt den von Ihnen übergebenen Wert zur Berechnung des Breitenprozentsatzes des Containers. Das Omega Das Keyword teilt Susy mit, dass dies die letzte Spalte in der Zeile ist. Dadurch schwebt Compass die Spalte nach rechts und entfernt den rechten Rand.
Das
PräfixundSuffixMix-Ins schieben den Container x Anzahl der Säulen von links bzw. rechts ein.
Sie können diese Datei jetzt speichern und von compass in CSS übersetzen lassen. Wenn Sie das Plug-In für freche Knöpfe hinzugefügt haben, nachdem Sie gestartet haben Kompassuhr Kommando, müssen Sie den Watch-Befehl (Shortcut: CTLR-C) stoppen und neu starten, um den SCSS zu kompilieren.
Dies ist eine sehr kurze Einführung in Susy. Eine vollständige Liste der Funktionen finden Sie in der Dokumentation von Susy.
Ich hoffe, Ihnen hat dieser Artikel gefallen, und ich danke Ihnen für das Lesen. Wie immer können Sie gerne Kommentare oder Fragen im Kommentarbereich hinterlassen. Sie können mich auch auf Twitter kontaktieren - @GabrielManricks und ich werde versuchen, so schnell wie möglich auf Sie zu antworten.
