Schnelles Blueprint-CSS-Layout mit Boks

Heute werfen wir einen Blick auf Boks, ein tolles kleines Tool, das Ihnen helfen wird, ein einfaches Layout der Website in kürzester Zeit festzulegen.

Wir gehen durch, was es ist und wie Sie es nutzen können, um Ihre Entwicklung zu beschleunigen und die Einschränkungen und Nachteile, die Sie beachten sollten, bevor Sie die App herunterladen.

Einführung

Rastersysteme sind ein interessantes Tier: Sie lieben sie oder hassen sie. Ich persönlich sehe beide Seiten des Arguments, aber am Ende habe ich nicht zu viel dagegen, dass Sie sie an Ihre eigenen Zwecke anpassen, anstatt Tonnen von unberührtem und / oder nicht-semnatischem Code zu hinterlassen.

Das eigentliche Problem bei Netzsystemen ist, wie komplex sie sind. Ich habe gerade ein Tutorial bei Six Revisions über das 960-Rastersystem beendet, und die Kommentare schienen sich darin einig zu sein, dass die meisten Leute nur jemanden brauchten, der die Verwendung des Systems in einfachen, leicht verständlichen Begriffen erklärte. Wenn Sie von Rastersystemen verwirrt werden, lesen Sie diesen Artikel.

Als Folgemaßnahme wollte ich Ihnen zeigen, wie Sie mithilfe einer GUI sehr komplexe CSS- und HTML-Codestrukturen erstellen können, die auf dem Blueprint-CSS-Framework basieren. Wir machen das mit einer AIR-Anwendung namens Boks.

Entwurf

Blueprint ist ein kostenloses Framework mit vielen tollen Funktionen. Diese schließen ein:

  • Ein CSS-Reset, der die Diskrepanzen zwischen Browsern beseitigt.
  • Ein festes Raster, das die komplexesten Layouts unterstützt.
  • Typografie basiert auf Expertenprinzipien, die vor dem Internet liegen.
  • Formularstile für großartig aussehende Benutzeroberflächen.
  • Drucken Sie Stile, um jede Webseite für das Papier vorzubereiten.
  • Plugins für Buttons, Tabs und Sprites.
  • Tools, Editoren und Vorlagen für jeden Schritt in Ihrem Workflow.

Für meinen eigenen Gebrauch ist Blueprint etwas zu massiv, was wir später sehen werden. Unzählige Entwickler verwenden es jedoch religiös und finden es unter den besten Rahmenbedingungen.

Ob es oder nicht, das ist es, was Boks verwendet, um Code zu erstellen. Wenn die Boks-Entwickler dies lesen, würde ich gerne eine Option zur Verwendung des 1-KB-CSS-Grids sehen.

Was ist Boks?

Genug Einführung, was ist das Boks Ding? Ich kann mich ehrlich gesagt nicht daran erinnern, wie ich es ursprünglich gefunden habe, aber es war eine der Situationen, in denen Sie etwas herunterladen, in Ihren Anwendungsordner werfen und vergessen, dass es existiert. Ich habe kürzlich meine Festplatte von diesem Unsinn geleert, als ich Boks zum ersten Mal öffnete und dachte: Hey, das ist wirklich ordentlich !?

Wie ich bereits gesagt habe, Boks ist eine AIR-Anwendung, also sollte es mit Mac oder PC gut funktionieren.

Boks bietet eine innovative visuelle Möglichkeit, um die grundlegenden strukturellen Markups für Ihre Site zu erstellen. Ich höre gleich dort auf, um WYSIWYG-Hasser zu sagen, dass ich bei dir bin. Wenn eine Site von Grund auf neu zu programmieren ist, als würde man sich einer leeren Leinwand nähern, dann fühlen sich WYSISYGs immer wie Paint By Number an.

Ich meine damit, dass sie im Allgemeinen viel zu strukturiert sind und alle Arten von unnötiger Gefangenschaft und Komplikation hinzufügen. Boks ist keine dieser Anwendungen. Tatsächlich ist es nicht einmal etwas, das Sie zum Erstellen einer gesamten Site verwenden würden. Es hilft Ihnen lediglich, das Skelett zu erstellen, auf dem Sie Ihre Site aufbauen.

Fertig machen

Nachdem Sie den kostenlosen Download erworben haben, öffnen Sie Boks und Sie sollten die unten gezeigte Schnittstelle sehen.

Hier legen Sie die Struktur Ihrer Website visuell fest. Dies ist so einfach wie das Klicken und Ziehen, wohin die Spalten verschoben werden sollen. Bevor Sie jedoch etwas anderes tun, klicken Sie auf die Schaltfläche Rastereinstellungen Taste. Hier finden Sie viele Anpassungsoptionen, wie Boks Ihre Seite erstellt.

Unter den oben angezeigten Rasteroptionen können Sie Ihre festlegen Seitenbreite zusammen mit Anzahl der Spalten und wie Sie die Rinnen und Säulen aufteilen möchten. Wir sehen bereits, dass Boks die Verwendung eines Raster-Frameworks wirklich flexibel macht und viel einfacher anzupassen ist, als den Code Stück für Stück auseinander zu reißen.

Im Bild oben können Sie sehen, dass ich alles so eingestellt habe, dass es im Wesentlichen wie die 12-Spalten-Version des 960-Rastersystems funktioniert. Dies ergibt 12 Spalten mit jeweils 60 Pixel Breite und einer Rinne von 20 Pixel. Wenn Sie nicht zustimmen, einfach Geben Sie Ihre eigenen ein bevorzugte Konfiguration hier.

Andere Einstellungen

Wenn Sie mit der nächsten Registerkarte im Einstellungsfenster fortfahren, können Sie hier eine benutzerdefinierte Grundlinie für die Schriftgröße festlegen sowie die gewünschten Header-Elemente festlegen.

Auf den Registerkarten CSS und JavaScript können Sie benutzerdefinierte Ressourcen hinzufügen. Diese werden in eigenen Ordnern abgelegt oder an den vorhandenen Code angehängt.

Wenn Sie irgendetwas in den Einstellungen ändern, Stellen Sie sicher, dass Sie die Exporteinstellungen vornehmen. Hier gibt es eine Reihe wichtiger Dinge zu treffen. Legen Sie zunächst den Seitentitel und die Sprache fest. Stellen Sie dann sicher, dass Sie den richtigen DOCTYPE verwenden. Die Standardeinstellung ist XHTML. Wie Sie jedoch auf dem Bildschirm unten sehen können, wird HTML5 unterstützt, sodass Sie Boks noch einige Zeit verwenden können.

Ich empfehle sehr ausschalten das? CSS komprimieren? Möglichkeit. In diesem Fall ist es viel einfacher, Ihren Code zu sortieren und anzupassen. Sonst wird alles zusammengeschlagen. Das ist großartig für die Dateigröße, aber es ist unglaublich lästig zu lesen.

Wenn Sie Boks zum ersten Mal verwenden, möchten Sie möglicherweise die Option zum Anzeigen des Rasters aktivieren, um zu sehen, was los ist. Wenn Sie damit beginnen, echte Websites zu erstellen, sollten Sie diese Option deaktivieren.

Seitenlayout erstellen

Jetzt, da wir alle unsere Einstellungen haben, ist es Zeit, das Layout zu erstellen. Dazu einfach Klicken und ziehen Sie in der Rastervorschau ein div erstellen

Ein Rechteck wird angezeigt, das automatisch an der von Ihnen erstellten Gitterstruktur ausgerichtet wird.Sie können Erstellen Sie so viele Divs wie Sie möchten durch Klicken und Ziehen können Sie weitere hinzufügen. Um ein Div neu zu positionieren, klicken Sie einmal darauf und verwenden Sie die Pfeiltasten. Halten Sie die Umschalttaste gedrückt, während Sie die Pfeiltasten verwenden, um die Größe eines div zu ändern.

Markup hinzufügen

Boks enthält zahlreiche Funktionen, mit denen Sie Ihr Layout genau wie bei einer manuellen Codierung anpassen können. Sie können ein div hinzufügen, einen Rahmen hinzufügen und eine Vorschau und beliebige CSS-Klassen hinzufügen.

Wenn Sie so weit gehen möchten, können Sie sogar beginnen, HTML-Inhalte in ein div zu packen. Wie Sie unten sehen können, geben Sie es einfach wie in einem Code-Editor ein.

Sie wissen nicht, mit was Sie das Layout jetzt füllen möchten? Kein Problem, Sie können es entweder leer lassen oder den eingebauten Lorem Ipsum-Generator von Bok verwenden, um einen Dummy-Text zu erzeugen.

Verrückt werden

Wie Sie im Bild unten sehen können, können Sie mit Boks Layouts erstellen, die sind so komplex, wie Sie es brauchen. Das Layout enthält einen Navigationsbereich, eine Seitenleiste, einen Inhaltsbereich und eine Fußzeile. Der Inhaltsbereich enthält mehrere andere divs, die in separaten Spalten verschachtelt sind.

Dies dauerte buchstäblich etwa dreißig Sekunden und kann daher in der Anfangsphase des Baustellenaufbaus Tonnen von Vorlaufzeit für die Codierung sparen.

Keine Höhe

Wie gesagt, Boks ist nicht dazu gedacht, ganze Websites zu erstellen. Die horizontalen Balken, die Sie in den Bildern oben sehen, repräsentieren nur die resultierende Breite und Hierarchie der erstellten divs. Die Höhe der Elemente wird dynamisch erweitert, wenn Sie Inhalte hinzufügen. Sie müssen jedoch bestimmte Höhen angeben, wenn Sie mit dem Codieren der Website fortfahren.

Exportieren

Wenn Sie mit dem Aufteilen des Layouts fertig sind, klicken Sie auf die Export-Schaltfläche und wählen Sie einen Speicherort für die Dateien. Das Ergebnis wird eine HTML-Datei mit den CSS-, JavaScript- und anderen Ressourcen sein, die Sie ausgewählt haben.

Das Endprodukt sieht zu diesem Zeitpunkt nicht viel aus, aber wenn man bedenkt, dass es nur wenige Sekunden dauerte und viele CSS-Layout-Kopfschmerzen gelöst werden können, ist das keine Kleinigkeit.

Der Nachteil

Der unglückliche Teil ist natürlich der enorm CSS-Datei, die sich ergibt. Wenn Sie mit Blueprint vertraut sind, stört Sie das nicht im geringsten, aber es kann alle anderen verrückt machen.

Wie ich bereits gesagt habe, wäre es großartig, eine 1-KB-Implementierung von Boks zu sehen, die all diesen zusätzlichen Code entfernt hat. Inzwischen ist die CSS-Datei sehr übersichtlich und enthält viele Kommentare. Auf diese Weise können Sie schnell und einfach nicht benötigten Code löschen.

Wenn Sie Boks kontinuierlich für die Erstellung Ihrer Layouts verwenden möchten, dieses zusätzliche CSS jedoch nicht möchten, empfiehlt es sich, einige Minuten für die Erstellung Ihrer benutzerdefinierten CSS-Datei zu verwenden, die Sie immer wieder verwenden können. Sehen Sie sich dazu einfach die Standard-CSS-Datei an und entfernen Sie alles, was sich nicht auf das Rasterlayout auswirkt. Dazu gehören Textstile, Feldstile, Reset-Code usw. Nachdem Sie dies einmal ausgeführt haben, können Sie dies immer als Ersatz für die von Boks erstellte CSS-Datei einfügen.

Wenn Sie klug genug sind, können Sie möglicherweise mit der rechten Maustaste auf die Anwendung klicken und "Paketinhalt anzeigen" wählen. Um die hier verwendeten Standarddateien durchzublättern und sie an Ihre Wünsche anzupassen (nur Mac).

Fazit

Boks ist ein kleines Werkzeug, mit dem Sie das grundlegende Markup für Ihre Website erstellen können, indem Sie eine vollständig anpassbare Version des Spaltensystems des Blueprint-Frameworks verwenden. Es ist nicht dazu gedacht, vollständige Websites zu erstellen, sondern Sie sparen Zeit am Frontend Ihres Projekts, das durch das Erstellen verschiedener Divs und das Anwenden der entsprechenden Klassen in Anspruch genommen wird.

Unglücklicherweise ist Boks nicht für jeden etwas dabei, da Sie mit der Verwendung des Blueprint-Frameworks ziemlich viel zu tun haben. Hinterlassen Sie unten einen Kommentar und lassen Sie uns wissen, was Sie von Blueprint halten und ob Sie Boks für Ihr nächstes Projekt verwenden.