Raster und Abstände

Abbildung des Rasters auf verschiedenen Ausgabegeräten

Spaltensystem für alle Bildschirmgr?ssen

Der ETH-Webseite liegt ein flexibles Gestaltungsraster zugrunde. Mithilfe dieses Rasters werden die Layouts auf allen Bildschirmgr?ssen korrekt dargestellt.

Das Gestaltungsraster ist auf einem 12-Spalten-System aufgebaut. ??Auf Tablets im Hochformat werden sechs Spalten verwendet, auf Mobile vier.??

Das Raster ist zentriert im Inhaltsbereich und verfügt über einen variablen Einzug, abh?ngig von der Viewport-Breite. Die maximale Ausdehnung betr?gt 1348 Pixel, danach werden nur noch die Hintergrundelemente auf die volle Breite hinausgezogen.

Rasterdefinition pro Breakpoint

Raster für Mobile: 320 – 480 Pixel

Raster für Tablet oder kleines Notebooks (13"): 768 – 1439 Pixel

Raster für Notebook (15") and Desktop: 1440 – 1600 Pixel

Einheitliche Abst?nde zwischen Design-Elementen

Um einheitliche Abst?nde innerhalb einer Applikation zu gew?hrleisten, werden nachfolgende Grundgr?ssen definiert. In der Gestaltung und Umsetzung ist darauf zu achten, jeweils diese Grunddefinitionen zu verwenden. Diese Gr?ssen sind im Frontend als Variablen definiert. Aus diesen Grundgr?ssen ergeben sich dann auch die Kurven. Projekte dürfen generell mit diesen Grundgr?ssen arbeiten

Fixe Abst?nde

Responsives Verhalten der Abst?nde

Abst?nde zwischen Elementen wachsen mit der Gr?sse des Viewports. Wie sich einzelne Abst?nde über die verschiedenen Breakpoints hinweg verhalten, ist in Abstandskurven definiert. Diese Kurven geben vor, wie stark sich ein Abstand ver?ndert. Eine Komponente hat also nicht einfach eine fixen Abstand zum n?chsten, sondern wird einer dieser Abstandskurven zugewiesen und skaliert dann entsprechend auf den unterschiedlichen Ger?ten.

Spacings für Mobile: 320 – 767 Pixel

Spacings für Tablet und Desktop: 768 – 1600 Pixel

JavaScript wurde auf Ihrem Browser deaktiviert