Seitenaufbau

Seiten-Skelett

Der grundlegende Aufbau der Seiten orientiert sich an der HTML5 Boilerplate.

Im head werden die CSS-Dateien und modernizr referenziert, am Ende vom body sind alle weiteren JavaScript-Dateien eingebunden.


                <!doctype html>
<html class="no-js" lang="de">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>Page - Styleguide - NewTix Frontend</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <meta name="format-detection" content="telephone=no">
        
        <!-- <link rel="apple-touch-icon" href="apple-touch-icon.png"> -->
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="../resources/css/vendor.1.1.16.css">
        <link rel="stylesheet" href="../resources/css/style.1.1.16.css">

        <link rel="stylesheet" href="../resources/css/themes/automechanika-ffm.css" id="theme-css">

        <!--[if lt IE 10]>
            <link rel="stylesheet" href="../resources/css/ie9.1.1.16.css">
        <![endif]-->

        
        <script src="../resources/js/modernizr-2.8.3.min.js"></script>
    </head>
    <body
        class="optional-classname"
        data-opt-in="false"
        data-opt-in-url="09.08.bestellbedingungen.html"
        data-opt-in-trigger="../dummy/php/proxy.php">

        
<!-- Dummy Perma Bar -->
<div class="permabar" style="z-index: 1000;">
    <div class="permabar-content"></div>
</div>


        

        
    <!--
        HEADER
    -->


        <main id="main-container">
        
    <!--
        MAIN CONTENT
        -->

        </main>

        
    <!--
        FOOTER
    -->



        <script src="../resources/js/vendor.1.1.16.js"></script>
        <script src="../resources/js/app.1.1.16.js"></script>
        
    </body>
</html>

CSS-Dateien

Die CSS-Regeln sind auf drei Dateien aufgeteilt, vendor.1.1.16.css, style.1.1.16.css und eine CSS-Datei für die Theme-Farben. Diese Stylesheets sind minifiziert und mit Source-Maps versehen. Die Original LESS-Dateien dazu finden sich in vendor/less, src/frontend/less/ und src/frontend/less/themes

Ausserdem gibt es noch eine CSS-Datei mit Fallbacks für Internet Explorer 9. Fallback werden für die Lade-Animation und die Tabs im Event-Header benötigt.

Um eine Umschaltung der Themes auf den Beispielseiten zu ermöglichen, ist das link Tag mit der id="theme-css" ausgestattet. Diese id ist ansonsten nicht notwendig, stört aber auch nicht.

JavaScripts

Modernizr wird benutzt um Feature-Detection durchzuführen und ersetzt die no-js Klasse im html Tag mit den entsprechen Klassen für gefundene Features.

In vendor.1.1.16.js sind alle benutzten Libraries minifiziert und konkateniert abgelegt. Momentan ist das nur jQuery 2. Die Original-Dateien befinden sich direkt im vendor/js Verzeichnis.

flexibility.js ist ein Polyfill damit auch Internet Explorer 9 mit flexbox CSS-Anweisungen umgehen kann.

In app.1.1.16.js sind alle Skripte aus src/frontend/js minifiziert und konkateniert abgelegt.

Dummy Perma-Bar

Um den Perma-Bar zu simulieren, ist auf allen Beispielseiten ein Dummy eingebaut. Dieser sollte in den Backend-Templates entfernt werden, hier kann ja wahrscheinlich der echte Perma-Bar referenziert werden.

Header, Content & Footer

header sollten normalerweise oberhalb von main gesetzt werden. In main sind dann alle Seiteninhalte untergebracht. Darunter können footer Elemente gesetzt werden.