Typische HTML / CSS-Klassen Strukuren
Ein Standard Shop Template ist im Normalfall nach einer optimierten und vereinheitlichten HTML und CSS-Klassen Struktur aufgebaut.
Für das grundlegende Layout ist nachfolgender Aufbau empfohlen und im Standard Shop Template im Einsatz. Die einzelnen Bereich (wie site-header, site-footer,etc) sind in verschiedene Layouts und Makro-Layouts gesplittet.
<html> <head> <!-- HEAD Stuff --> [...] </head> <body> <!-- Site Wrapper Start / Opens Container-Fluid (BS) --> <div class="site-wrapper container-fluid"> <!-- 1-1-1 Layout --> <!-- site-header / Opens Row (BS) / set site-width --> <div class="site-header row site-width"> <!-- site-header-container / for Logo, etc ... / Opens Container-Fluid (BS) --> <div class="site-header-container container-fluid"> <!-- site-header-inner / opens row (bs) / Set content-width --> <div class="site-header-inner row content-width"> <!-- divs mit Logo, Basket, etc --> [...] <!-- site-search / div for main site search format --> </div> <!-- END site-header-inner --> </div> <!-- END site-header-container --> <!-- site-navigation / Opens Container-fluid (BS) --> <div class="site-navigation container-fluid"> <!-- site-navigation-inner / set content-width --> <div class="site-navigation-inner row content-width"> <!-- Bootstrap Navbar Markup --> <div class="navbar"> [...] </div> </div> <!-- END site-navigation-inner --> </div> <!-- END site-navigation --> </div> <!-- END site-header --> <!-- site-body / opens row (BS) / set site-width --> <div class="site-body row site-width"> <div class="site-body-inner site-content content-width"> [...] </div> </div> <!-- END site-body --> <!-- site-footer / opens row (BS) / set site-width --> <div class="site-footer row site-width"> <div class="site-footer-inner content-width"> [...] </div> </div> <!-- END site-footer --> <!-- END 1-1-1 Layout --> </div> <!-- END Site-Wrapper --> </body> </html>
Produktdetails kommen in verschiedenen Formaten - wie z.B. Produkt-Listen oder Produkt-Ansichten zum Einsatz. Die grundlegende Überlegung hierbei ist eine möglichst einheitliche Struktur pro Produktkachel zu erreichen. Folgende CSS-Klassen werden dabei im Normalfall verwendet und sollten bei Neuentwicklungen Berücksichtigung finden.
Produktdetails kommen in verschiedenen Formaten - wie z.B. Produkt-Listen oder Produkt-Ansichten zum Einsatz. Die grundlegende Überlegung hierbei ist eine möglichst einheitliche Struktur pro Produktkachel zu erreichen. Folgende CSS-Klassen werden dabei im Normalfall verwendet und sollten bei Neuentwicklungen Berücksichtigung finden.