Webentwickler entwickeln ständig kostenlose Tools, die unglaublich nützlich sind, um die Anzahl kleiner, nerviger Aufgaben zu reduzieren, die Sie beim Erstellen einer Website oder eines Mockups erledigen müssen.
Heute schauen wir uns drei neue Tools an, die Sie auf Ihrer nächsten Site durch Layout, Platzhalterbilder und Textstile blättern können.
Griddle.It
Das erste Werkzeug, das wir uns ansehen werden, hilft uns, ein Seitenlayout basierend auf einem Raster schnell festzulegen. Ich weiß, was Sie denken, Sie hassen Rastergerüste richtig? Tonnen Flusen, nicht semantische Klassennamen, unnötige Komplexität; Alle machen CSS-Frameworks von vielen Entwicklern gehasst.
Glücklicherweise ist Griddle überhaupt kein CSS-Framework! Es handelt sich lediglich um eine anpassbare Hintergrundgrafik, die Ihnen beim Ausrichten von Inhalten hilft, indem Sie Spalten und Pixelbreiten einfügen.
Wie man es benutzt
Die Anweisungen für die Verwendung von Griddle.It sind auf der Website richtig und könnten nicht einfacher sein. Damit Sie jedoch ein Gefühl für die Funktionsweise des Tools erhalten, beginnen wir mit dem heutigen Projekt und bauen mit den nächsten Tools weiter auf .
Alles, was Sie tun müssen, um Griddle zu implementieren, ist der Rumpfhintergrund Ihrer CSS-Datei auf eine benutzerdefinierte URL zu setzen, die das Raster für Sie erstellt. Die URL hat folgende Struktur:
Nehmen wir an, Sie möchten, dass Ihre Website 1.200 Pixel breit ist und 12 Spalten mit jeweils 20 Pixel enthält. Fügen Sie einfach das folgende CSS in Ihr Dokument ein:
Sehen Sie, wie der? 1200-12-20? definiert die Begriffe, nach denen wir gesucht haben? Wenn Sie dies nun in etwas typischeres ändern möchten, beispielsweise 960 Pixel breit mit 12 Spalten und einer 30-Pixel-Rinne, würde der Ausschnitt folgendermaßen aussehen:
Dadurch wird das folgende Bild automatisch auf den Hintergrund Ihrer Webseite angewendet. Es ist ziemlich schwierig in der kleinen Vorschau unten zu sehen. Klicken Sie hier, um ein aktuelles Beispiel zu sehen. Versuchen Sie es mit den Zahlen in der URL, um zu sehen, wie sie das Bild aktualisieren.
Es gibt einige grundlegende Funktionen wie das Ändern der Farben und das Hinzufügen von horizontalen Linien, aber für unsere Zwecke reicht das aus. Von hier aus können wir ein grundlegendes Webseiten-Layout ausarbeiten.
Hinzufügen von Inhalten basierend auf dem Raster
Zu Beginn werfen wir ein div in unser Dokument, das drei Textspalten enthält. Im Moment fügen wir nur einen Platzhalter-Absatz ein und fügen dann CSS hinzu, um ihn an die richtige Stelle zu bringen.
Nun, da unser Raster 960 Pixel breit ist und 30 Pixel Rinnen hat, wissen wir, dass wir die Breite unseres Div auf 960px mit einem Rand von? Auto? um es zu zentrieren. Wenn Sie unser Rasterbild betrachten, können wir auch sehen, dass wir die Seite in drei gerade Spalten aufteilen möchten, wobei wir eine Breite von 300 Pixeln für die Absätze verwenden möchten.
Ich habe auch ein paar andere wichtige Dinge getan, wie zum Beispiel den Float für die nächsten Absätze einzurichten und einige Ränder zu werfen. Beachten Sie, dass der rechte Rand der Spaltenrinne entspricht.
Dieser Code gibt uns das Ergebnis weiter unten. Wie Sie sehen, passt unser Text gut zu unserem Hintergrundraster. Die gerechtfertigte Einstellung hat zu einigen hässlichen Lücken im Text geführt, aber wir haben nur ein schnelles Mock-Up herausgebracht, damit ich damit leben kann.
Diese Struktur ist ziemlich gut und funktioniert gut mit unserem Raster, aber sehen Sie, was passiert, wenn wir zwei weitere Absätze hinzufügen. Die Marge in unserem letzten Absatz verfälscht unser Layout.
Dieses Problem lässt sich leicht mit dem Pseudo-Selector "last child" beheben. Nach allem, was ich sagen kann, ist die Unterstützung von IE zilch, also habe ich im Grunde dasselbe mit einer Klasse getan, die wir später wieder verwenden können.
Damit haben wir ein schönes dreispaltiges Layout. Hätten wir es ohne das Hintergrundbild gemacht? Bestimmt! Aber Griddle.Es half uns, unser Layout zu visualisieren, sodass wir die Berechnungen beim Aufteilen von drei Säulen in einen 960px breiten Bereich mit gleichmäßigen Rinnen überspringen konnten.
Es ist wichtig zu wissen, dass unser CSS hier sehr minimal ist, wenn man es mit einem Standardgittersystem wie 960.gs vergleicht.
Lorempixum
Unsere Klartext-Website sieht ziemlich langweilig aus! Zu diesem Zeitpunkt haben wir jedoch noch keine Bilder, um es aufzupeppen. Was können wir also tun, um unser Layout zu verfeinern?
Treten Sie in Lorempixum ein, ein wirklich cooler kleiner Service, der konzeptionell fast identisch mit Griddle ist. Sie verwenden eine anpassbare URL, um ein Bild einzufügen. Diesmal ist das Bild jedoch ein Platzhalter für Inhalte und kein Hintergrundraster für das Layout.
Mit der oben gezeigten Web-App können Sie ein Bild erzeugen, das genau die richtige Größe hat. Sie können auch einfach die unten stehende URL einfügen. Die erste Zahl ist die Breite und die zweite ist die Höhe.
Es gibt mehrere Möglichkeiten, dies genauer zu machen. Sie können zwischen Farbe und Schwarzweiß wählen oder sogar aus einem Pool von elf Optionen Ihre Kategorie angeben. Hier ist zum Beispiel die URL für ein beliebiges Stadtbild, das 510px breit und 310px groß ist, und das resultierende Bild.
Lassen Sie uns dies auf unserer kleinen Webseite verwenden. Für den Anfang fügen wir ein großes Headerbild hinzu, das 960px breit und 350px groß ist.Die Breite ist offensichtlich die unserer Website, aber die Höhe ist etwas, das ich gerade zufällig gegriffen habe. Hier ist der HTML-Code:
Das Ergebnis ist eine stark verbesserte typografische Präsenz auf unserer Seite. Beachten Sie, dass wir nur einen Bruchteil der in den Type-a-File-Stile enthaltenen Elemente verwendet haben. Achten Sie darauf, alles zu sehen, was das Stylesheet zu bieten hat. Wenn Sie fertig sind, möchten Sie möglicherweise auch einen CSS-Reinigungsdienst wie Nicht verwendetes CSS ausführen, um alle Eigenschaften des Type-a-file-Downloads zu löschen, die Sie nicht mehr verwendet haben.
Fazit
Beachten Sie, dass dieses Tutorial keinen Workflow für Sie enthält, wenn Sie Ihre eigenen Websites erstellen. Die Absicht ist lediglich, Sie auf einige großartige kostenlose Tools aufmerksam zu machen, mit denen Sie die Erstellung von Website-Mockups oder Wireframes beschleunigen können, die später zu ausgewachsenen Websites erweitert werden können.
Mit Griddle.It können Sie komplizierte CSS-Frameworks überspringen und schnell ein benutzerdefiniertes Raster erstellen, das auf Ihrem eigenen CSS basiert. Lorempixum springt dann hinein und hilft Ihnen, diese Bildlücken zu füllen, bis Sie schließlich die Fotos erhalten, die Ihr Kunde Ihnen vor zwei Wochen versprochen hat. Schließlich bietet Type-a-file eine Reihe praktischer voreingestellter Textstile, die Sie schnell implementieren können, um die gesamte Typografie auf Ihrer Seite pixelgenau aussehen zu lassen.
Hinterlassen Sie unten einen Kommentar und teilen Sie uns weitere coole Web-Tools mit, die Ihnen begegnen und die Ihren Job ein bisschen einfacher machen.