Designing for RTL platforms – A flipped layout

I had the pleasure to write an article for my company’s techblog about our approach of implementing the view / presentation layer for the flipped right-to-left platforms such as www.trivago.co.il or www.trivago.ae

We basically decided to flip the css declaration within preprocessing instead of using a post-processing approach

You can read the complete article on the trivago techblog

 

CSS display:flex

Positionieren mit dem Box-Modell war immer eine haarige Angelegenheit. Wir haben mit position:absolute, position: relative und float im Code randaliert um unsere Layouts in den Griff zu bekommen.

Die CSS3 flexbox ist ein Layout Modus der es um einziges vereinfacht Elemente auf der Webseite zu positionieren vor allem wenn es darum geht die Inhalte auf verschiedenen Viewportgrößen anzupassen. Es bietet gegenüber dem Block-Modell eine Menge Vorzüge da es weder mit floats arbeitet noch zusammenfallende Margins anfallen.

Kind-Elemente in einer flexbox können flexible Maße haben und sich an den verfügbaren Platz anpassen. Zumindest kann die Darstellungsrichtung angegeben werden. Das Positionieren der Kind-Element ist sehr einfach und komplexe Layout können mit wesentlich einfacherem und sauberem Code erstellt werden. Die Unabhängigkeit betrifft beabsichtigterweise nur die visuelle Darstellung, sprich Sprachrichtung und Navigationsrichtung erfolgt weiterhin über die Reihenfolge der Elemente im Quellcode.

Flexbox Konzept

Das grundlegende Konzept von flex layout ist die Fähigkeit der Änderung der Elemente in Breite und Höhe um den verfügbaren Platz bestmöglich auszufüllen. Die Inhalte eines flex-Container werden auf den verfügbaren Platz ausgeweitet oder gestaucht um Überlauf zu verhindern.

Im Gegensatz zum Block Layout das vertikal ausgelegt ist oder dem inline layout das horizontal ausgelegt ist, ist der Ansatz des flexbox Layout Algorithmus richtungsunabhängig. Während das Block-Layout gut für Seiten funktioniert, leidet es doch deutlich bei Orientation-Change, Resize, Stretch oder Shrink.

Flexbox ist eignet sich besonders bei Komponenten einer Applikation während das CSS Grid-Layout mehr für größere und skalierbare Layouts angedacht ist.

Flexbox Vokabular

Flex container

Das Elternelement in dem sich die Flex Items befinden. Ein Flex-Container wird definiert mit der Angabe:

display: flex

Flex Item

Jedes Kind-Element eines Flex-Container wird automatisch zu einem flex-Item.

Reihenfolge

Die order Eigenschaft definiert eine (Darstellung-)Ordnung bei den Elementen. So ist z.B. möglich das ein Element mit

order: 1

in der Darstellungsreihenfolge unabhängig von der Reihenfolge im Markup darzustellen.

Z.b. wäre es damit auch möglich z.B. den aktuellen ausgewählten Tab in einem Menü nach vorne zu schieben.

Das müsste man nur folgendes schreiben. (Vorausgenommen das aktive Tab bekommt die Klasse .is-active)

.tabs > .is-active {
  order: -1; /* niedriger als der Standwert 0 */
}

Dies ist nur ein kleiner Auszug aus den Möglichkeiten die sich mit Flexbox ergeben. Zum weiteren Studium möchte ich sowohl das offizielle Working Draft empfehlen (http://www.w3.org/TR/css3-flexbox/) wie auch die gute Einführung von Chris Coyier (http://css-tricks.com/snippets/css/a-guide-to-flexbox/).

Holy Grail Layout Beispiel

Dieses Beispiel zeigt wie uns flexbox dabei hilft das Layout dynamisch entsprechend der Viewportgröße anzupassen.

Es ändern sich nicht nur die Elemente in ihrer Größe sondern auch die “Sortierung” lässt sich leicht ändern. Somit es z.B. möglich den visible Content zu priorisieren. In float oder block Layout werden so in kleineren Viewport erst Elemente wie Sidebars und Co gerendert die aber initial im display:none versteckt sind. Dieses lässt sich mit Hilfe von flexbox einfach umgehen.

Am besten schaut man sich das Beispiel direkt auf Codepen an.

See the Pen vEWRXb by Christoph Reinartz (@creinartz) on CodePen.0