Vor kurzem haben wir einen Artikel mit 20 erstaunlichen Beispielen für die Verwendung von Medienabfragen für Responsive Web Design veröffentlicht. Diese Webseiten reagieren sehr gut auf unterschiedliche Browserfenstergrößen, von großen HD-Bildschirmen bis hin zu Smartphones.
Heute zeigen wir Ihnen, wie Sie eine Boilerplate namens Skeleton verwenden, um das Entwerfen und Erstellen einer responsiven Webseite zu vermeiden. Sie werden staunen, wie einfach es ist!
Was ist Skelett?
Die Skeleton Home Page beschreibt das Projekt als eine kleine Sammlung von CSS- und JS-Dateien, mit deren Hilfe Sie schnell Websites entwickeln können, die in jeder Größe schön aussehen, sei es ein 17-Zoll-Laptop-Bildschirm oder ein iPhone.
Der Skeleton-Schöpfer Dave Gamache hat im Wesentlichen das älter werdende 960-Framework reformiert, um den modernen Herausforderungen, die sich aus der Fülle von Geräten ergeben, die regelmäßig auf das Internet zugreifen, zu begegnen. Obwohl das Projekt auch einige zusätzliche Goodies wie jQuery enthält, konzentrieren wir uns heute hauptsächlich auf den Layout-Aspekt. Denken Sie daran, dass diese Boilerplate so gut organisiert ist, dass es ziemlich einfach ist, alles zu entfernen, was wir nicht verwenden. Der Autor legt großen Wert auf Anpassung: Behalten Sie, was Ihnen gefällt, ändern Sie, was Sie nicht tun!
Vorgeschmack
Live Demo: Zum Starten klicken
Fertig machen
Schritt eins ist, das Projekt herunterzuladen. Nachdem Sie alles heruntergeladen und entpackt haben, öffnen Sie die enthaltene HTML-Datei und legen Sie alles in den Container.
Bevor wir mit dem Erstellen der Seite beginnen, ist es wichtig herauszufinden, wie alles funktioniert. Das Skelett basiert auf einem Gitter-Framework. Wenn Sie also Gitter-Frameworks hassen, wird Sie das nicht gewinnen. Fühlen Sie sich frei, jetzt zu lesen, lassen Sie einen unangenehmen Kommentar zur Entwicklung von Semantic Web hinter sich und machen Sie weiter.
Für diejenigen, die noch interessiert sind, gibt es sechzehn Spalten, von denen jede einen linken Rand von 10 Pixeln und einen rechten Rand von 10 Pixeln hat. Mit einer Gesamtbreite von 960px für den Container sind hier die Größen für jede Spalte angegeben:
Wie bei den meisten Spaltensystemen besteht Ihr Ziel darin, die Gesamtzahl zu addieren: 16. Wenn Sie also die Seite auf zwei Spalten aufteilen möchten, erstellen Sie zwei separate divs und wenden die acht Spalten der Klassen an. zu jedem.
Es gibt einige andere hilfreiche Funktionen, die Sie ebenfalls kennen sollten, z. B. die Möglichkeit, die Breite in Drittel zu teilen. Einfach das "Drittel" anwenden. oder zwei Drittel? Klassen, die 300px bzw. 620px entsprechen.
Um Lücken oder leere Spalten zu erstellen, fügen Sie außerdem die Versatzklassen hinzu: Versatz um eins, Versatz um zweiusw. Jeder dieser Parameter fügt im Wesentlichen sechzig weitere Pixel hinzu, um die inhaltlichen Lücken zu berücksichtigen.
Stylesheets
Der obige Code stammt von der mitgelieferten? Skeleton.css? Datei. Es gibt zwei weitere wichtige CSS-Dateien: Basis und Layout. Die? Base.css? Die Datei enthält voreingestellte Stile für Typografie, Schaltflächen, Formulare, Registerkarten usw. Das meiste, was sich hier befindet, ist vollständig optional und soll vom Benutzer überschrieben werden. Wenn Sie der Meinung sind, dass diese Boilerplate zu umfangreich für das ist, was Sie tun möchten, oder zu viel Kontrolle benötigt, geben Sie diese Datei ab.
Die? Layout.css? Die Datei ist ein stark organisiertes, jedoch zumeist leeres Stylesheet. Hier fügen Sie jedes benutzerdefinierte CSS ein, das Sie für Ihre Seite hinzufügen möchten. Diese CSS-Datei enthält auch zusätzliche @media-Abfragen, die Sie möglicherweise implementieren möchten. Die Standardabfragen sind in? Skeleton.css? Wenden Sie einfach eine neue Breite auf alle Spaltenklassen an, wenn das Fenster auf bestimmte Größen reduziert wird.
Webseite Schritt 1: Navigation
Nun, da wir die Grundlagen des Skeletts kennen, springen wir rein und erstellen eine Webseite damit! Wir werden das Design schön und minimal halten, um uns darauf zu konzentrieren, wie sauber und organisiert alles fast ohne Aufwand von Ihrer Seite kommt.
Als erstes möchten wir unserer Seite ein einfaches Logo-Element und einige Navigationslinks hinzufügen. Jedes davon erhält sein eigenes div und wir geben der ersten eine Breite von zwei Spalten und die zweite eine Breite von vierzehn (2 + 14 = 16).
Als nächstes werden wir einen einfachen DS setzen. für Design Shack im ersten div und eine Linkliste im zweiten div. Wir bleiben beim Standard-Styling für den Text, damit Sie ein Gefühl für die Skeleton-Stile bekommen.
Navigation CSS
Skeleton kümmert sich um unser Layout und den Großteil unserer Textgestaltung. Alles was wir tun müssen, ist einige vertikale Ränder hinzuzufügen, um alles dort zu platzieren, wo wir es haben wollen. Ich entschied mich auch, einige der Standard-Links für meine oder meine Links zu streichen.
Was ich getan habe, ist ein paar obere Abstände auf den gesamten Container anzuwenden, nur um ihn etwas nach unten zu drücken. Ich habe auch die Links nach unten verschoben, weil sie standardmäßig an der Spitze des großen DS ausgerichtet waren. und ich wollte sie in der Mitte haben.
Damit haben wir einen guten Start. Das Text-Styling von Skeleton ist großartig und eignet sich definitiv für den klassischen, minimalistischen Look, den wir hier suchen.
Schritt 2: Kopfbild
Beim Entwerfen einer responsiven Webseite ist es wichtig zu verstehen, wie Bilder funktionieren. Sicher, alles, was der Browser rendert, kann in der Größe verändert werden, aber was passiert, wenn ein Bild zu groß für seinen kontrahierenden Container ist?
Um diese Frage zu beantworten, werfen wir ein großes Bild oben auf unserer Seite. Dazu fügen wir wie zuvor ein weiteres div hinzu. Es wird die volle Breite unseres Containers sein, also müssen wir die "sechzehn Spalten" anwenden. Klassen.