Zur Umsetzung von responsiven Webseiten gibt es eine Vielzahl an CSS-Frameworks. Ein CSS Framework, das mir besonders gut gefällt, ist Pure. Pure besteht aus verschiedenen Modulen und kann Basis-Klassen für Navigationsleisten, Buttons, Tabellen, Formulare und Textinhalte vorgeben. Die einzelnen Module sind im Durchschnitt genau 1 KB groß und als Gesamtpaket sogar nur 4,4 KB. Mit dem Grid-Modul (0,9 KB) lässt sich ganz schnell ein Rasterlayout für eine Webseite erstellen, das sich je nach Bildschirmgröße anpasst und perfekt auf einen gleichzeitigen Designentwurf für Smartphones, Tablets und Desktops ausgelegt ist. Im Folgenden möchte ich ein Beispiel-Layout zeigen, das ich entworfen habe und welches die Inhalte einer Webseite modular aufbaut.
<!-- http://purecss.io/grids/ --> <!-- Construction: 1. Declaration (bottom) 2. Design wrapper (bottom-wrapper) 3. Grid (bottom-grid) 4. Unit (bottom-unit) 5. Module grid (phone-grid) 6. Module unit (phone-unit) Note: There can be multiple grids and units! --> <div id="top"> <div id="top-wrapper" class="layout-wrapper"> <div id="top-grid" class="pure-g-r"> <!-- All child elements of a grid must be units --> <div id="top-unit-1" class="pure-u-1"> <!-- Units can contain content or other grids --> <div id="header-grid" class="pure-g-r"> <!-- Content goes inside grid units --> <div id="header-unit-1" class="pure-u-1-3"> Top left (1/3) </div> <div id="header-unit-2" class="pure-u-1-3"> Top center (1/3) </div> <div id="header-unit-3" class="pure-u-1-3"> Top right (1/3) </div> </div> </div> </div> </div> </div> <!-- /top --> <div id="center"> <div id="center-wrapper" class="layout-wrapper"> <div id="center-grid" class="pure-g-r"> <!-- Center #1 --> <div id="center-unit-1" class="pure-u-1"> <!-- Features --> <div id="features-grid" class="pure-g-r"> <div id="features-unit-1" class="pure-u-1-3"> 1/3 </div> <div id="features-unit-2" class="pure-u-2-3"> 2/3 </div> </div> </div> <!-- Center #2 --> <div id="center-unit-2" class="pure-u-1"> <!-- News --> <div id="news-grid" class="pure-g-r"> <div id="news-unit-1" class="pure-u-2-3"> 2/3 </div> <div id="news-unit-2" class="pure-u-1-3"> 1/3 </div> </div> </div> </div> </div> </div> <!-- /center --> <div id="bottom"> <div id="bottom-wrapper" class="layout-wrapper"> <div id="bottom-grid" class="pure-g-r"> <div id="bottom-unit-1" class="pure-u-1"> <!-- Smartphone apps --> <div id="phone-grid" class="pure-g pure-hidden-desktop pure-hidden-tablet"> <div id="phone-unit-1" class="pure-u-1"> Our Smartphone apps! </div> </div> <!-- Tablet apps --> <div id="tablet-grid" class="pure-g pure-hidden-desktop pure-hidden-phone"> <div id="tablet-unit-1" class="pure-u-1"> Our Tablet apps! </div> </div> </div> <!-- /bottom-unit --> </div> <!-- /bottom-grid --> </div> </div> <!-- /bottom --> |