Page Structure
In diesem Bereich findet sich die Basisstruktur der Seite, die im Body-Tag eingefügt werden muss. Diese Struktur besteht aus Header, Content und Footer. Für weitere Informationen zu zum globalen Header und Footer siehe Global -> Header und Global -> Footer.
Im Content-Bereich, bezeichnet mit der ID layout-grid, müssen vor dem Einfügen von spezifischen Einheiten die korrekten Einheiten des Grid-Layouts verwendet werden.
Das Grid Layout garantiert eine stimmige Anzeige der Einheiten für jede Bildschirmgröße und Variation. Welche Teile des Grid Layouts genutzt werden hängt von den genutzten Einheiten und deren gewünschter Positionierung ab.
Das Div-Tag mit der ID layout-grid__area--contentheader wird verwendet um Seiten übergreifende Einheiten darzustellen, wie beispielsweise den Breadcrumb.
In layout-grid__area--herounit können einführende oder prominente Inhalte dargestellt werden. Hier soll maximal eine Einheit verwendet werden, die durch die Klasse fullwidth an der layout-grid__area--herounit auf die volle Breite des Grid Layouts gezogen werden kann. Empfehlenswert ist an dieser Stelle das Modul Opener.
layout-grid__area--maincontent beinhaltet den Content-Bereich der Seite, also je nach Belieben Elemente und Module.
Die Bereiche layout-grid__area--leftcolumn und layout-grid__area--marginal sind nicht für die Verwendung auf neuen Seiten gedacht. Diese Bereiche sind lediglich für die korrekte automatische Konvertierung von alten Seiten in das neue Design vorhanden. Bei manueller Verwendung oder Neugestaltung von Seiten mithilfe des Styleguides ist die Nutzung dieser Bereich dringend zu vermeiden, da sie nicht mehr zeitgemäß sind.
Im Bereich layout-grid__area--contentfooter ist eine Sitemap vorgesehen und die Möglichkeit für ein Feedback-Formular vorhanden. Details zur Einbindung und Nutzung dieser Elemente, siehe Global -> Footer.
<div id="page-wrapper">
<header id="header">
<!-- GLOBAL PORTAL HEADER (see "Global -> Header" for full markup) -->
</header>
<div id="layout-grid" role="main">
<div id="layout-grid__area--contentheader">
<div id="content-header">
<!-- CONTENTHEADER (Breadcrumb, Languageselect, ...) -->
</div>
</div>
<div id="layout-grid__area--herounit" class="fullwidth">
<!-- HEROUNIT (Big images or fullwidth (optional) content) -->
</div>
<div id="layout-grid__area--leftcolumn">
<!-- LEFT COLUMN -->
</div>
<div id="layout-grid__area--maincontent">
<!-- MAIN CONTENT -->
</div>
<div id="layout-grid__area--marginal" role="complementary" class="marginal">
<!-- RIGHT COLUMN -->
</div>
<div id="layout-grid__area--contentfooter">
<div id="content-footer">
<!-- CONTENT FOOTER -->
<div class="content-footer__brand">
<!-- Sitelogo (optional) -->
</div>
<a class="to-top" href="#top">Zum Seitenanfang</a>
<nav class="content-footer__links" aria-label="Weiterführende Links">
<!-- Sitemap -->
</nav>
</div>
</div>
</div>
<footer id="footer" >
<!-- GLOBAL PORTAL FOOTER (see "Global -> Footer" for full markup) -->
<div class="footer__brand">
<!-- Portallogo -->
</div>
<nav class="footer__links" aria-label="Weitere Bereiche auf Berlin.de">
<!-- Portalnavigation -->
</nav>
<div class="footer__claim">
<!-- Portalclaim -->
</div>
</footer>
</div>
Breakpoints
| Name | Width | Description |
|---|---|---|
| Smallest | ||
| Palm | Most items changes from grid to one column here. | |
| Tablet | ||
| Tablet Landscape | ||
| Desktop |
Abstract
Layout grid areas on medium and large screens
| Portalheader | ||
| Contentheader | ||
| Herounit | ||
| Leftcolumn (not in use) | Mainbar | Marginal |
| Contentfooter | ||
| Portalfooter | ||
Layout grid areas on small screens
| Portalheader (Sticky) |
| Contentheader |
| Herounit |
| Mainbar |
| Marginal |
| Contentfooter |
| Portalfooter |