# 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.