Kategorien
HTML/CSS Webdesign

Gitter voll im Griff: Firefox mit neuem Layout-Panel für CSS-Grids

Ordentliche, auf Raster beziehungsweise Gitter basierende Layouts waren bislang nur auf umständlichen Wegen möglich. Die neuen CSS-Grids, die in den neueren Versionen der bekannten Browser seit einiger Zeit möglich sind, erlauben endlich solche Layouts. Und im Firefox gibt es – zumindest in der Nightly-Version – ein neues Layout-Panel im Inspektor der Entwicklerwerkzeuge, welches dir den Umgang mit CSS-Grids vereinfacht.

Mit CSS-Grids zu besseren Layouts

Das neue Grid-Modell macht es endlich möglich, komplexe Layouts zu entwickeln, die auf der Grundlage eines selbst definierten Gitters bestehen. Dazu legst du per CSS Spalten und Reihen fest, bestimmst Abstände und Breiten. Anschließend werden beliebige Elemente innerhalb des Gitters platziert.

body {
  display: grid;
  grid-template-rows: 200px 1fr 100px;
  grid-template-columns: 25% 25% 25% 25%;
}

Für ein Grid-Layout muss die „display“-Eigenschaft zunächst per „grid“ auf das neue Layoutmodell umgestellt werden. Anschließend werden per „grid-template-rows“ und „grid-template-columns“ die Reihen und Spalten des Gitters definiert. Dabei sind absolute und relative Angaben möglich.

Für jede Reihe beziehungsweise Spalte wird ein Wert übergeben. Die Kombination von absoluten und relativen Werten ist möglich. So können wie im Beispiel Reihen feste Werte besitzen. Mit der Einheit „fr“ für „fraction“ lassen sich flexible Breiten und Höhen herstellen. Dabei füllt die Einheit „fr“ den freien Raum innerhalb des Gitters aus.

Zusätzlich kannst du per „grid-row-gap“ und „grid-column-gap“ Abstände zwischen den einzelnen Gitterzellen festlegen. So hast du die Möglichkeit, sehr individuelle und flexible Raster für deine Weblayouts zu entwickeln.

Ist das Raster festgelegt, müssen die einzelnen Inhalte platziert werden. Dazu wird angegeben, in welchen Zellen des Gitters der Inhalt positioniert werden soll.

header {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}

Mit „grid-column-start“ und „grid-column-end“ werden die Start- und Endpunkte innerhalb des Rasters angegeben. Analog dazu gibt es „grid-row-start“ und „grid-row-end“. Dank der vier Eigenschaften ergeben sich die Zellen, in denen das jeweilige Element stehen soll.

Das Prinzip des CSS-Grids ist also recht einfach. Die Auszeichnung ist hingegen nicht unbedingt leicht nachvollziehbar – gerade bei komplexen Rastern. Hier kommt das neue Layout-Panel des Inspektors von Firefox ins Spiel.

Neues Layout-Panel zeigt Raster

Das neue Panel sorgt zunächst einmal dafür, dass alle auf einer Seite definierten Raster dargestellt werden. Während das eigentliche Raster auf einer Website ja nicht sichtbar ist, stellt Firefox die einzelnen Spalten und Zeilen sowie gegebenenfalls die Zwischenräume dar, sodass es Entwickler einfacher haben, sich innerhalb des Gitters zurechtzufinden.

Das Layout-Panel erreichst du, indem du die Entwicklerwerkzeuge aufrufst und in den Inspektor wechselst. Dort findest du das Layout-Panel. Für jedes Grid-Element wird ein Button eingeblendet, der das für das jeweilige Element hinterlegte Raster einblendet. Im Browserfenster werden Rasterlinien über das Layout gelegt, die das von dir per CSS-Grids definierte Gitter hervorheben.

Zusätzlich wird das Raster auch im Panel selbst angezeigt. Bewegst du die Maus über dieses Raster, wird die entsprechende Zelle sowohl im Inspektor als auch im Browserfenster hervorgehoben.

Das Einblenden von Zeilennummern erleichtert dir zudem, einzelne Rasterzellen ausfindig zu machen. Die unendlichen Gitterlinien, die du optional dazuschalten kannst, führen die Linien des Rasters auch jenseits des jeweiligen Grid-Elementes weiter. Das kann mal nützlich, mal störend sein, weshalb das Ein- und Ausblenden dieser Option sinnvoll ist.

Rasterbereiche benennen und darstellen

Mit der CSS-Eigenschaft „grid-areas“ hast du die Möglichkeit, Bereiche innerhalb deines Gitters zu benennen und somit zu einer Art Gruppe zusammenzufassen. Alle Zellen mit derselben Bezeichnung stellen somit eine Gruppe dar.

grid-template-areas:
  "header header header header"
  "nav content content content"
  "footer footer footer footer";

Über die Option „Display grid areas“ (ist in der aktuellen Nightly-Version noch nicht ins Deutsche übersetzt) werden dir diese Rasterbereiche im Browserfenster dargestellt. Dabei werden die einzelnen Bereiche durch eine dickere Linie im Gitter hervorgehoben. Zusätzlich wird die jeweilige Bezeichnung des Bereichs eingeblendet.

Bewegst du deine Maus im Layout-Panel über eine Gitterzelle, wird im Browser nicht nur die Zelle hervorgehoben, sondern auch der Bereich, dem die Zelle zugeordnet ist.

Transformierungen werden berücksichtigt

Dank der CSS-Eigenschaft „transform“ sind Drehungen, Skalierungen und Verzerrungen von Elementen möglich. Auch auf ein Gitter-Element lassen sich diese anwenden. Der Inspektor berücksichtigt alle per „transform“ gemachten Änderungen und passt das Gitter entsprechend an.

Das heißt, bei einem gedrehten Gitter-Element wird auch das Raster selbst mit gedreht.

Fazit

Das neue Layout-Panel im Inspektor von Firefox hilft dir dabei, deine Grid-Layouts besser zu verstehen und zu entwickeln. Die Hervorhebung der Gitterlinien und die Nummerierung helfen dabei, Elemente zu platzieren und einen visuellen Eindruck des Gitters zu bekommen.

Dabei werden alle Möglichkeiten wie Abstände zwischen den Rasterzellen und die Einteilung in Bereiche mit berücksichtigt. Insgesamt macht der neue Panel einen guten Eindruck. Dass sich das neue Grid-Layout durchsetzen wird, dürfte nur eine Frage der Zeit sein, weshalb diese neue Funktion sicher für viele Webentwickler eine große Erleichterung bei der Arbeit darstellen wird.

Wann es das neue Layout-Panel in den regulären Firefox schafft, steht noch offen. Aber wer schon einmal probieren möchte, kann sich die Nightly-Version herunterladen. Da es sich dabei um keine ausgereifte Version handelt, sollte man sie nur zu Entwicklungszwecken und die in einer Live-Umgebung nutzen.

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Photoshop

Griddify: Open Source Extension für Adobe Photoshop erstellt frei konfigurierbare Raster

Arbeitsraster und Photoshop, darüber könnte ich Geschichten erzählen. Unzählige Male habe ich mich mit Stift und Taschenrechner schon hingesetzt, um die korrekten Werte für das erforderliche Raster zu errechnen und dann Linie für Linie manuell umzusetzen. Dank der kostenfreien Photoshop-Extension von Gelobi bleibt mir das künftig erspart. Dabei ist die Extension schnell und flexibel. Was könnte man mehr wollen?

griddifyinaction

Griddify: Flexibles Arbeitsraster nicht nur für das Webdesign

Griddify ist das erste Produkt einer ganzen Reihe, bislang nur vage angekündigter Entwicklungen, die ein iranisches Team unter dem Label gelobi an den Markt zu bringen gedenkt. Griddify implementiert in Photoshop CC oder CS6 ein Schwebepanel, mit dem sich flexibel Raster einrichten lassen. Diese können horizontal wie vertikal frei konfiguriert werden. Sogar Raster, die auf eine Selektion beschränkt sind oder diese einfassen, sind möglich. Das habe ich so bislang nicht gesehen.

Griddify stellt innerhalb seines Panels drei Funktionen zur Verfügung. Es handelt sich um "Griddify", "Divide" und "Wrap". Allen dreien ist jeweils ein Eingabefeld vorangestellt, in dem man die entsprechend umzusetzenden Werte eingibt.

Die jeweils eingegebenen Zahlenwerte werden in der Einheit umgesetzt, die man in den Photoshop-Preferences als Standard gesetzt hat. In unseren Kreisen wird das zumeist das Pixel sein. Das per "Griddify" umzusetzende Raster kann sich aus theoretisch beliebig vielen Werten speisen. So würde etwa die Eingabe von "100" ein Raster erzeugen, in welchem die Hilfslinien jeweils 100 Pixel voneinander entfernt gesetzt werden. Die Eingabe von "80 10 10" etwa würde ein Raster setzen, in dem alle 80+10+10 Pixel Hilfslinien erscheinen, mithin unser 100 Pixel-Raster also in einen 80 Pixel und zwei 10 Pixel breite Segmente aufgeteilt wird. Die Orientierung des Rasters kann sowohl horizontal wie vertikal ausgerichtet sein. Zieht man eine Auswahl auf, begrenzt sich das Grid auf das Innere der Auswahl.

griddifywrap
Griddify: Feature Wrap

Die Funktion "Divide" teilt das Raster in gleiche Teile. Unter Eingabe von "4" würde man ein Raster erhalten, dass die sichtbare Fläche in vier gleich große Teile zerlegt. Auch das lässt sich wieder auf das Innere einer Auswahl beschränken. Mittels "Wrap" legt man ein Grid um eine Selektion herum, statt mit den beiden anderen Features dort hinein.

Griddify: Spannende Folgeprojekte in der Pipeline

Griddify steht auf Github zum freien Download unter GPL V3 bereit. Besonderes Aufsehen erregt die Präsentation des Produkts. Diese sieht zunächst wie ein Video aus, ist aber keines. Vielmehr handelt es sich um eine Multimedia-Darstellung, die auf einem kommenden Produkt des Teams gelobi basiert, das unter dem Namen TheatreJS sicherlich einige Wellen schlagen wird.

Wir freuen uns also über Griddify und sind gespannt wie ein Flitzebogen auf TheatreJS, das übrigens in meinem Chrome nicht funktionierte. Ich musste auf den Firefox ausweichen, um die Präsentation ansehen zu können. Unter Chrome blieb der Bildschirm schlicht weiß.

Links zum Beitrag

Kategorien
Design HTML/CSS

Schneller Helfer: Mit LayoutIt! das Grundgerüst des nächsten Bootstrap 3-Projekts erstellen

LayoutIt! ist ein cleveres, kleines Web-Tool aus dem Hause Entropeer, einer ebenfalls kleinen Design-Agentur aus Buenos Aires. LayoutIt! sieht zunächst aus wie ein Website-Builder und funktioniert ähnlich. Letztlich ist die kostenlose Web-App jedoch „nur“ eine Art Kickstarter für Ihr nächstes Projekt auf Bootstrap-Basis. Vor kurzem erweiterte Entropeer das Featureset, so dass jetzt neben der Erstellung von Websites mit Bootstrap 3 auch das verhältnismäßig neue Bootstrap 3 unterstützt wird.

layoutit-homepage

LayoutIt! Cleverer Kickstarter beschleunigt die Site-Entwicklung

Um es nochmal vorweg deutlich zu sagen. LayoutIt! ist kein Homepage-Baukasten für unbedarfte Bastler. Die kostenlose App erstellt lediglich ein Grundgerüst, teilweise mit Musterinhalten versehen. Herunterladen kann man sich das Gerüst entweder als reine HTML-Struktur per Copy and Paste oder als Zip-Archiv, in welchem dann zusätzlich die entsprechende Ordnerstruktur, nebst verwendeter Embeds, etwa Bootstrap selbst oder jQuery und Less, enthalten sind. Damit erhält man ein komplettes Starterkit, auf dessen Basis sodann die weitere Entwicklung fußen kann.

layoutit-download

Die Verwendung von LayoutIt! ist simpel. Unter Verwendung eines der beiden Häuptlings gelangt man entweder in den Editor für ein Gerüst in Bootstrap 2 oder in einen ebensolchen für das Projektskelett einer Bootstrap-Seite auf Basis der Version 3. Bekanntlich haben die Bootstrap-Entwickler im Übergang von 2 zu 3 kaum einen Stein auf dem anderen gelassen, so dass die strikte Unterscheidung mehr als bloß sinnvoll ist.

Wie Bootstrap selbst, wird indes auch LayoutIt! mit Bezug auf die Version 2 nicht mehr gepflegt. Sie sollten also schon einen guten Grund haben, um noch auf der Basis des alten Frameworks zu arbeiten.

LayoutIt! Geradliniger Editor garantiert schnelle Produktivität

Einmal im Editor angekommen, findet sich der durchschnittliche Web-Designer keinen Rätseln ausgesetzt. Der visuelle Ansatz von LayoutIt! ist geradlinig. Links findet sich der verfügbare Funktionsumfang sauber gegliedert in Parameter zum Grid-System, zum Base CSS, zu den Components und zum Einsatz von JavaScript. Ein Community-Feature ist bereits in der Toolbar enthalten, aber noch nicht mit Leben gefüllt.

layoutit-editor

Das Grid-System ist mit verschiedenen, üblichen Aufteilungen versehen, kann dabei aber auch frei angepasst werden. Hierzu editiert man schlicht die vorgelegten Werte. Um kompatibel zum Standard zu bleiben, sollte man jedenfalls sicherstellen, dass die Summe der angegebenen Spalten stets 12 ergibt. Ein Grid wird per Drag and Drop in den über den Rest des Browserfensters reichenden Editor gezogen. Dabei ist es auch möglich, Grids ineinander zu verschachteln. Auf diese Weise bauen Sie leicht auch komplexere Designs visuell zusammen.

Alles, was Sie unter Verwendung von drag in den Editor ziehen, können Sie dort frei positionieren und an Ort und Stelle via remove wieder entfernen.

Ist das Grid fertig, geht es an das Einfügen von Inhalten und Funktionen. Soweit es sich um vordefinierte Elemente handelt, die später der weiteren Programmierung bedürfen, um ihre eigentliche Funktionalität zu entfalten, setzt LayoutIt! Platzhalter ein, deren Inhalte zwar voll funktionsfähig, aber natürlich nicht für den späteren Verbleib vorgesehen sind. Wie es sich für Bootstrap-Projekte gehört, sind die mit LayoutIt! vorkonfektionierten Seiten voll responsiv.

layoutit-editor-sample-content

Am oberen Rand des Browserfensters finden Sie eine weitere Werkzeugleiste. Hier können Sie verschiedene Previews aktivieren, das Projekt herunterladen oder mit anderen teilen. Auch das Speichern der Arbeiten online ist möglich, erfordert dann aber naheliegenderweise die Anlage eines Accounts auf LayoutIt! Hierzu werden die gängigen OAuth-Geber wie Twitter, Facebook und Google unterstützt. Wer das nicht möchte, legt einen dedizierten LayoutIt!-Account unter Bekanntgabe von E-Mail-Adresse und Passwort an.

layoutit-dashboard

LayoutIt! Mehrsprachiger Helfer für Entwickler mit soliden Kenntnissen

LayoutIt! steht auf englisch, spanisch, portugiesisch und – erstaunlicherweise – chinesisch zur Verfügung. Da es kostenlos verfügbar ist, sollten Sie nicht vor einem Test zurückscheuen, wenn Sie ohnehin mit Bootstrap 3 als Front-End-Framework liebäugeln. Abschließend sei aber eine Warnung erneut ausgesprochen. LayoutIt! generiert Ihnen ein solides Fundament. Sie benötigen aber bereits bei der Erstellung des Fundaments ein gerüttelt Maß eigener Kenntnisse und erst recht dann, wenn Sie das Gerüst schlussendlich mit Leben füllen wollen.

So ist LayoutIt! eine sehr nützliche Arbeitserleichterung für Bootstrap-affine Front-End-Entwickler und hat sich als solche eine klare Empfehlung verdient…

Das folgende Video bietet einen guten ersten Überblick:

Links zum Beitrag

Kategorien
Design HTML/CSS

The Heads-Up Grid und SpryMedia Grid – Gitternetzoverlays für das Webdesign im Browser

Es ist ja schön und gut, dass gängige Grid-Frameworks, wie etwa das 960.gs, die Definition und Verwendung gridbasierter Layouts vereinfachen. Eine optische Prüfmöglichkeit, um auch an den Details arbeiten zu können, bringen diese Frameworks jedoch nicht mit. So muss man sich auf die eigenen Augen verlassen und natürlich auf die Codequalität des Gridsystemlieferanten. Wer sein Grid frei baut, also ohne Toolunterstützung, weiß womöglich noch eher, wovon ich rede. Die beiden Tools aus dem folgenden Beitrag versprechen, bei der Positionierung der Designdetails behilflich zu sein…

grid-artikelbild

Grid-Framework: The Heads-Up Grid muss in die Website eingebaut werden

The Heads-Up Grid ist interessanter, als es der Name vermuten lässt. Baut man die Javascripte und Stylesheets, die das Heads-Up Grid ausmachen, in eine Website während der Designphase ein, so erzeugt man ein Gitternetzoverlay, welches das Design erheblich vereinfacht, live auf der Website. Dabei ist die Verwendung völlig unkompliziert.

The Heads-Up Grid – Overlay frei konfigurierbar

Eine Lösung, die so einfach und unkompliziert ist wie das Heads-Up Grid kommt daher jedenfalls mir wie gerufen. Ein kleines Script wird in den Head-Bereich der zu erstellenden Website gepackt, die Dateien des Grid-Tools in ein anpassbares Unterverzeichnis, fertig. Beim nächsten Aufruf der Website erscheint ein sichtbares Gitternetzoverlay. Bestes Beispiel dafür ist die Produktseite zum Heads-Up Grid selber:

theheadsupgrid-homepage
The Heads-Up Grid in Aktion: Sichtbares Gitternetzoverlay auf der Website

Ohne weitere Anpassungen zeigt The Heads-Up Grid ein Grid mit 6 Spalten und einer Breite von 960 Pixeln an. Alle relevanten Werte lassen sich jedoch sehr einfach innerhalb der kurzen Scriptpassage, die in den Head kopiert wurde, ändern. Sogar die Maßeinheit kann angepasst werden, so dass auch mit Prozentwerten gearbeitet werden kann. Per Default verwendet das Tool Pixel. Über den Wert Zeilenhöhe lässt sich ein Baseline Grid definieren, wichtig für Typografiefreunde.

Sogar responsive Layouts können mit dem Heads-Up Grid unterstützt werden. Der hierzu erforderliche Code ist allerdings etwas komplexer, da er verschiedene Screengrößen abfragen und bedienen muss.

Um die im Designprozess befindliche Website zwischendurch auch ohne Gridoverlay prüfen zu können, spendierte der Entwickler dem Tool einen am rechten oberen Rand des Browserfensters platzierten On-/Off-Button. The Heads-Up Grid liegt aktuell in der Version 1.7 vor und kann frei auf der Website des Entwicklers Jason Simanek heruntergeladen werden.

Grid-Framework: SpryMedia Grid – Bookmarklet legt Grid auf beliebige Websites

Der Schotte Allan Jardine liefert ein Grid-Framework, das per JavaScript-Bookmarklet auf beliebige Websites angewendet werden kann. Das ist bequem, aber ist es auch gut?

SpryMedia Grid legt ein Standard-Grid über die Website, auf der es aufgerufen wird. Das funktioniert unterschiedlich zufriedenstellend. In meinen Tests endete das Grid sehr häufig am Ende des sichtbaren Bereichs, wurde also nur auf den aktuellen Viewport angewendet. Vielfach wurde überhaupt kein Grid generiert. Getestet habe ich im aktuellsten Chrome Stable auf dem Mac.

sprymedia-grid

Dafür ist das SpryMedia Grid über das modale Fenster, das nach Klick auf das Bookmarklet erscheint, extrem flexibel zu konfigurieren. Neben den grundlegenden Optionen, wie der Gesamtbreite und Höhe des Grids, der Zahl der Spalten und Zeilen mit ihren jeweiligen Weiten und Höhen, sowie etwaigen Abständen, sieht SpryMedia Grid zusätzlich die farbliche Anpassung der einzelnen Teile des Grid vor. Im Prinzip ist das also eine ganz nützliche Angelegenheit.

Nur die einwandfreie Funktionalität, die kann halt nicht garantiert werden. Im Chrome unter Windows 7 konnte ich beispielsweise nicht einmal die Einheiten wechseln, war somit auf die Standard-Units festgelegt. Grundsätzlich ist der freie Wechsel zwischen em, ex,pxund % ausdrücklich vorgesehen. Übrigens: Ausblenden lässt sich das Grid, indem man schlicht erneut auf das Bookmarklet klickt. Die zuvor getätigten Einstellungen bleiben erhalten.

Wer bereit ist, sich mit den vielfältigen Konfigurationsmöglichkeiten auseinander zu setzen, ohne die Garantie zu haben, dass das Ergebnis den Aufwand rechtfertigt, kann SpryMedia Grid gern mal ausprobieren. Ich habe mich für The Heads-Up Grid entschieden und empfehle Ihnen das auch.

Links zum Beitrag:

Quellennachweis Artikelbild: striatic via photopin cc