Typische HTML / CSS-Klassen Strukuren

Dieser Artikel beschreibt grundlegende HTML und CSS-Klassen Strukturen eines Standard Shop Templates.

Einleitung

Ein Standard Shop Template ist im Normalfall nach einer optimierten und vereinheitlichten HTML und CSS-Klassen Struktur aufgebaut.

HTML - Grundlayout

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 class="site-search">[...]</div>
	     </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>

Produkt-Kachel

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.

<div class="product-item">
	 <div class="item-image-container product-image-container"><a class="item-image-link product-image-link"><img class="item-image product-image" src="" /></a></div>
	 <div class="item-data-container product-data-container">
	  <div class="item-name product-name">Mein Produkt</div>
	  <div class="item-description product-description">Beschreibung Lorum Ipsum ...</div>
	  <div class="product-storage">verfügbar</div>
	  <div class="item-xactions product-xactions">Macroformat Einbindung z.B. merken | vergleichen</div>
	  <div class="product-price">150,- EUR</div>
	  <a class="product-detail-link" href="">Zum Produkt</a>
	  <div class="item-action product-action">Button "In den Warenkorb"</div>
	 </div>
	</div>

Produktkategorie-Kachel

<div class="product-group-item">
	 <div class="item-image-container product-group-image-container">
	<a class="item-image-link product-group-image-link"><img class="item-image product-group-image" src="" /></a> </div>
	 <div class="item-data-container product-group-data-container">
	  <div class="item-name product-group-name">Mein Produkt</div>
	  <div class="item-description product-group-description">Beschreibung Lorum Ipsum ...</div>
	  <div class="item-action product-group-action">Link / Button zur Kategorie</div>
	 </div>
	</div>