So geht's

Die Gestaltungsvorgaben des Styleguides des Landes Brandenburg sind für alle Internetangebote der Landesregierung bindend.
Content Delivery (CDN)

Die von uns verwendeten Komponenten können Sie einfach über unseren Server style.brandenburg.de einbinden. Dazu bieten wir Ihnen versionierte Pfade zu den benötigten CSS- und JS-Dateien, die von jedem Landesportal genutzt werden können, ohne dass das zugrunde liegende Redaktionssystem von Bedeutung ist. Das hat Vorteile:
Die Daten müssen nicht mehrfach vorgehalten werden.
Durch die Versionierung bleiben auch ältere Versionen noch nutzbar.
Die Seiten laden schneller, da die Browser bereits geladene Dateien aus dem Cache nehmen.
Framework

Die Online-Version wurde mit dem Framework Foundation for Sites 6 erstellt. Sämtliche Code-Beispiele und CSS-Dateien im Online-Styleguide bauen auf Foundation 6 auf.
Hier finden Sie

Master-Templates

Unsere Master-Templates bieten Ihnen Anregungen, wie Sie die Elemente dieses Styleguides kombinieren und anordnen können. Und haben Sie eigentlich oben in der Toolbar schon einmal auf „Farbwechsel“ geklickt? Sie könnten Ihr baby-blaues Wunder erleben…
Komponenten

Im diesem Kapitel finden Sie zu jeder Komponente auch den Quelltext zum Kopieren.
Werkzeug zur Urheberrechtskennzeichnung

Damit Sie die Urheberrechtsvorgaben bei Bildern erfüllen können, stellen wir Ihnen ein nützliches Werkzeug zur Verfügung.
„Contact a human“

Bei Fragen, die im Styleguide nicht geklärt werden, schreiben Sie bitte an webredaktion@mik.brandenburg.de
Seitengerüst

Quelltext

Quelltext kopieren
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width"/>
    <title>Landesportal Brandenburg | Startseite</title>

    <!-- Vendor CSS Library for Foundation 6 Elements. See http://foundation.zurb.com/sites/docs/ !-->
    <link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/foundation/6.0.2/css/foundation.min.css"/>

    <!-- Vendor CSS Library for Font Awesome Icons. See http://fontawesome.io/ !-->
    <link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/fontawesome/4.6.3/font-awesome.min.css"/>

    <!-- Vendor CSS Library. Normalize.css is a small CSS file that provides better cross-browser consistency in
     the default styling of HTML elements. See https://necolas.github.io/normalize.css/ !-->
    <link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/normalize/3.0.3/css/normalize.css"/>

    <!-- Vendor CSS Library Image Boxes (Light Boxes). See http://noelboss.github.io/featherlight/ !-->
    <link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/featherlight/1.4.0/css/featherlight.css"/>

    <!-- Vendor CSS Library Image Galleries. See http://noelboss.github.io/featherlight/gallery.html !-->
    <link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/featherlight/1.4.0/css/featherlight.gallery.css"/>

    <!-- Vendor CSS Library styling of the accessible Audio and Video Players. See https://ableplayer.github.io/ableplayer/ !-->
    <link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/ableplayer/css/ableplayer.css"/>

    <!-- Eitco CSS for Theme Switcher, called when Theme is switchted. Replaces Main Color!-->
    <link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/cdn/bb/css/app.css"/>
    <!-- Example for another theme: href="https://style.brandenburg.de/cdn/bb/css/themes/monochrome.css"!-->
</head>
<body>
<div class="bb-stage">
    <!-- Toolbar Start -->
    <div class="row bb-area-header">
        <div class="columns">
            <div class="row">
                <div class="small-12 medium-6 medium-push-6 columns bb-top-tool-bar-column">
                    <!-- Button Mobile-Menü Start -->
                    <div class="title-bar bb-title-bar" data-responsive-toggle="bb-tool-menu" data-hide-for="medium">
                        <button class="menu-icon bb-menu-icon" type="button" data-toggle></button>
                        <div class="title-bar-title bb-title-bar-title">
                            Toolbar-Menü
                        </div>
                    </div>
                    <!-- Button Mobile-Menü Ende -->
                    <!-- Menüpunkte Start -->
                    <div class="top-bar bb-top-tool-bar" id="bb-tool-menu">
                        <div class="top-bar-right">
                            <ul class="menu" data-responsive-menu="drilldown medium-dropdown"
                                data-back-button='<li class="js-drilldown-back"><a title="Zurück">Zurück</a></li>'>
                                <li>
                                    <a href="#" title="Einfarbig">Einfarbig</a>
                                </li>
                                <!-- weitere Toolbar-Elemente -->
                                <li class="has-submenu">
                                    <a class="bb-last-menu-element bb-is-submenu" href="#" title="Deutsch">Deutsch</a>
                                    <ul class="submenu menu vertical bb-submenu" data-submenu>
                                        <li>
                                            <a href="#" class="bb-dropdown-items" title="Switch to English">English</a>
                                        </li>
                                        <!-- weitere Spracheinträge -->
                                        <li>
                                            <a href="#" class="bb-dropdown-items bb-last-menu-element"
                                               title="změń do serbšćiny">Serbšćina</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- Menüpunkte Ende -->
                </div>
            </div>
        </div>
    </div>

    <!-- Toolbar Ende -->
    <div class="row bb-border">
        <!-- *********** Header Start(Oberer Seitenbereich: Absenderkennung, Wort-Bild-Marke, Themenlogo, Hauptnavigation) *********** -->
        <div class="columns">
            <div class="row bb-area-header">
                <div class="columns">
                    <!-- Absenderkennung Start -->
                    <div class="row">
                        <div class="small-12 columns" id="bb-absenderkennung">
                            <a href="/" title="Link zur Startseite styleguide.brandenburg.de">Styleguide der
                                Landesregierung Brandenburg</a>
                        </div>
                    </div>
                    <!-- Absenderkennung Ende -->
                    <!-- Wort-Bildmarke, Themenlogo Start-->
                    <div class="row">
                        <div class="columns" id="bb-logo-bar">
                            <div class="row">
                                <!-- Wort-Bildmarke Start-->
                                <div class="small-12 medium-6 columns bb-logo">
                                    <a href="http://www.brandenburg.de" title="Link zum Landesportal Brandenburg">
                                        <img id="bb-wort-bild-marke" src="/img/logos/Wort_Bildmarke.png"
                                             alt="Brandenburg-Logo">
                                    </a>
                                </div>
                                <!-- Wort-Bildmarke Ende-->
                                <div class="hide-for-small-only medium-2 columns">&nbsp;</div>
                                <!-- Themenlogo Start-->
                                <div class="hide-for-small-only medium-4 columns bb-logo"></div>
                                <!-- Themenlogo Ende-->
                            </div>
                        </div>
                    </div>
                    <!-- Wort-Bildmarke, Themenlogo Ende -->
                    <!-- Hauptnavigation Start-->
                    <div class="row">
                        <div class="large-9 large-push-3 columns" id="bb-nav2">
                            <!-- Button Mobile-Menü Start -->
                            <div class="title-bar bb-title-bar" data-responsive-toggle="bb-nav-menu"
                                 data-hide-for="medium">
                                    <span class="bb-navbar-button-bg">
                                        <button id="bb-navbar-button" class="menu-icon bb-menu-icon" type="button"
                                                data-toggle></button>
                                    </span>
                                <div for="bb-navbar-button" class="title-bar-title bb-title-bar-title" data-toggle>
                                    Hauptmenü
                                </div>
                            </div>
                            <!-- Button Mobile-Menü Ende -->
                            <!-- Menüpunkte Start -->
                            <div class="top-bar bb-top-nav-bar" id="bb-nav-menu">
                                <div class="top-bar-right">
                                    <ul class="menu" data-responsive-menu="drilldown medium-dropdown"
                                        data-back-button='<li class="js-drilldown-back"><a title="Zurück">Zurück</a></li>'>
                                        <li><a href="" title="Start" class="">Start</a></li>
                                        <li class="has-submenu">
                                            <a href="" title="Ministerium" class="">Ministerium</a>
                                            <ul class="submenu menu vertical bb-submenu" data-submenu>
                                                <li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">
                                                    <a href="" title="Beispielmenülink"
                                                       class="dropdown-items bb-dropdown-items ">Beispielmenülink</a>
                                                </li>
                                                <!-- Weitere Untermenüpunkte -->
                                            </ul>
                                        </li>
                                        <!-- Weitere Hauptmenüpunkte -->
                                    </ul>
                                </div>
                            </div>
                            <!-- Menüpunkte Ende -->
                        </div>
                        <div class="bb-bottom-border"></div>
                    </div>
                    <!-- Hauptnavigation Ende-->
                </div>
            </div>
        </div>
        <!-- *********** Header Ende (Oberer Seitenbereich: Absenderkennun, Wort-Bild-Marke, Themenlogo, Hauptnavigation) *********** -->
        <!-- *********** Content Start (Mittlerer Seitenbereich) *********** -->
        <div class="row bb-area-content">
            <div class="columns">
                <div class="bb-content">
                    <!-- Breadcrumbs 1, Suchfeld Start -->
                    <div class="row">
                        <!-- Breadcrumbs 1 Start -->
                        <div class="hide-for-small-only medium-9 columns">
                            <div class="bb-breadcrumbs" id="bb-breadcrumbs1">
                                <span title="Sie sind hier:">Sie sind hier:</span>
                                <a href="/app.php/de/" title="Styleguide">Styleguide</a>
                            </div>
                        </div>
                        <!-- Breadcrumbs 1 Ende -->
                        <!-- Suchfeld Start -->
                        <div class="small-12 medium-3 columns">
                            <div id="bb-search-bar">
                                <div class="input-group">
                                    <input class="input-group-field bb-input-group-field" placeholder="Suchbegriff"
                                           title="Suchbegriff" value="">
                                    <div class="input-group-button">
                                        <button class="button bb-searchbutton" type="submit" title="Suchen">
                                            <span class="show-for-sr">Suchen</span>
                                            <i class="fa fa-search fa-lg"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- Suchfeld Ende -->
                    </div>
                    <!-- Breadcrumbs 1, Suchfeld Ende -->
                    <!-- Inhaltsbereich Start -->
                    <div class="row">
                        <!-- Example 1: One foundation column 100% -->
                        <div class="columns">
                            
                            <p>Beispiel-Inhalt: Hier können verschiedene Komponenten eingebunden werden.</p>
                            
                        </div>
                        <!-- Example 2: Two foundation columns 75% and 25% width, stretched 100% for mobile (12 columns)
                            <div class="columns small-12 medium-9 large-9">
                                <p>I am stretched for mobile, but 75% on tablet and desktop viewports...</p>
                            </div>
                            <div class="columns small-12 medium-3 large-3">
                                <p>I am on the right</p>
                            </div>                                
                        -->
                    </div>
                    <!-- Inhaltsbereich Ende -->
                </div>
            </div>
        </div>
        <!-- *********** Content Ende (Mittlerer Seitenbereich) *********** -->
    </div>
    <!-- *********** Footer Start (Unterer Seitenbereich) *********** -->
    <div class="row bb-area-footer">
        <div class="columns">
            <!-- Breadcrumbs 2 Start -->
            <div class="row bb-area-footer-content">
                <div class="large-12 columns">
                    <div class="bb-breadcrumbs" id="bb-breadcrumbs2">
                        <span title="Sie sind hier:">Sie sind hier:</span>
                        <a href="/app.php/de/" title="Styleguide">Styleguide</a>
                        <i class="fa fa-caret-right"></i>
                        <a href="#" title="Gestaltungsmittel">Artikeltitel</a>
                    </div>
                </div>
            </div>
            <!-- Breadcrumbs 2 Ende -->
            <div class="row bb-area-footer-content">
                <!-- Linkbereich  Mobile Start -->
                <div class="hide-for-medium columns">
                    <div id="bb-link-bar">
                        <div class="row">
                            <div class="hide-for-medium large-3  columns">
                                <ul class="bb-icon-container">
                                    <li><i title="Zur Facebook-Fanpage " class="bb-icon fa fa-facebook fa-lg"></i></li>
                                    <li><i title="Zum Twitter-Blog" class="bb-icon fa fa-twitter fa-lg"></i></li>
                                    <li><i title="Zur Google+ Seite" class="bb-icon fa fa-google fa-lg"></i></li>
                                </ul>
                            </div>
                        </div>
                        <div class="row">
                            <div class="columns">
                                <h6>Service</h6>
                                <ul class="bb-list-dark">
                                    <li><a href="http://www.brandenburg.de" title="Link zum Landesportal Brandenburg">Landesportal
                                            Brandenburg</a></li>
                                    <li><a href="http://service.brandenburg.de"
                                           title="Link zum Serviceportal Brandenburg">Serviceportal Brandenburg</a></li>
                                    <!-- Weitere Servicelinks -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Linkbereich Mobile Ende -->
                <!-- Informationsleiste Start -->
                <div class="medium-12 large-9 columns">
                    <div id="bb-info-bar">
                        <div class="row">
                            <div class="medium-6 large-5 columns">
                                <h6>Beispielliste</h6>
                                <ul class="bb-list-dark">
                                    <li><a target="_blank" href="#" title="Beispiellink">Beispiellink</a></li>
                                    <!-- Weitere Listenelemente -->
                                </ul>
                            </div>
                            <div class="medium-6 large-7 columns">
                                <h6>Beispielliste</h6>
                                <ul class="bb-list-dark">
                                    <li><a target="_blank" href="#" title="Beispiellink">Beispiellink</a></li>
                                    <!-- Weitere Listenelemente -->
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Informationsleiste Ende -->
                <!-- Linkbereich Start -->
                <div class="hide-for-small-only medium-12 large-3 columns">
                    <div id="bb-link-bar">
                        <div class="row">
                            <div class="medium-6 large-12 columns">
                                <h6>Service</h6>
                                <ul class="bb-list-dark">
                                    <li><a href="http://www.brandenburg.de" title="Link zum Landesportal Brandenburg">Landesportal
                                            Brandenburg</a></li>
                                    <li><a href="http://service.brandenburg.de"
                                           title="Link zum Serviceportal Brandenburg">Serviceportal Brandenburg</a></li>
                                    <!-- Weitere Servicelinks -->
                                </ul>
                            </div>
                            <div class="medium-6 large-12 columns">
                                <ul class="bb-icon-container">
                                    <li><i title="Zur Facebook-Fanpage " class="bb-icon fa fa-facebook fa-lg"></i></li>
                                    <li><i title="Zum Twitter-Blog" class="bb-icon fa fa-twitter fa-lg"></i></li>
                                    <li><i title="Zur Google+ Seite" class="bb-icon fa fa-google fa-lg"></i></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Linkbereich Ende -->
            </div>
            <!-- Fußzeile -->
            <div class="row bb-area-footer-bar">
                <div class="columns">
                    <div id="bb-footer-bar">
                        <span class="hide-for-small-only">2016 | Landesregierung Brandenburg</span>
                        <span class="bb-footer-items-right">
                            <a class="bb-footer-items-right" href="/contact" title="Link zum Kontaktformular">Kontakt</a>
                        </span>

                        <span class="bb-footer-items-right">&nbsp;|&nbsp;</span>
                        <span class="bb-footer-items-right">
                            <a class="bb-footer-items-right" href="/app.php/de/imprint"
                               title="Link zum Impressum">Impressum</a>
                        </span>

                        <span class="bb-footer-items-right">&nbsp;|&nbsp;</span>
                        <span class="bb-footer-items-right">
                            <a class="bb-footer-items-right" href="/app.php/de/privacy"
                               title="Link zum Datschutz">Datenschutz</a>
                        </span>
                    </div>
                </div>
            </div>
            <!-- Fußzeile -->
        </div>
    </div>
    <!-- *********** Footer Ende (Unterer Seitenbereich)  *********** !-->
</div>

<!-- JavaScript Einbindung  Start !-->

<!-- Vendor JavaScript Library to detect Browser Features. See https://modernizr.com/ !-->
<script type="text/javascript" src="https://style.brandenburg.de/cdn/modernizr/2.6.2/js/modernizr.custom.js"></script>

<!-- Vendor JavaScript Library to simplify client side scripting of HTML. See https://jquery.com/ !-->
<script type="text/javascript" src="https://style.brandenburg.de/cdn/jquery/2.1.4/jquery.min.js"></script>

<!-- Vendor JavaScript Library for Event Hooks on mobile Devices. See https://api.jquerymobile.com/category/events/ !-->
<script type="text/javascript" src="https://style.brandenburg.de/cdn/jquery/2.1.4/jquery.mobile-events.min.js"></script>


<!-- Vendor JavaScript Library for Foundation 6 Elements. See http://foundation.zurb.com/sites/docs/ !-->
<script type="text/javascript" src="https://style.brandenburg.de/cdn/foundation/6.0.2/js/foundation.min.js"></script>

<!--Eitco Script to initialize Foundation's Scripts. !-->
<script type="text/javascript" src="https://style.brandenburg.de/cdn/bb/js/app.js"></script>

<!--Eitco Script to dynamically scale the mobile-menu. !-->
<script type="text/javascript" src="https://style.brandenburg.de/cdn/bb/js/mobile-menu.js"></script>

<!-- Vendor JavaScript Library for handling Browser Cookies. See https://github.com/js-cookie/js-cookie !-->
<script type="text/javascript" src="https://style.brandenburg.de/cdn/jscookie/2.0.4/js/js.cookie.js"></script>

<!-- Vendor JavaScript Library for Image Boxes (e.g. Light Boxes). See http://noelboss.github.io/featherlight/ !-->
<script type="text/javascript" src="https://style.brandenburg.de/cdn/featherlight/1.4.0/js/featherlight.js" charset="utf-8"></script>

<!-- Vendor JavaScript Library for Image Galleries. See http://noelboss.github.io/featherlight/gallery.html !-->
<script type="text/javascript" src="https://style.brandenburg.de/cdn/featherlight/1.4.0/js/featherlight.gallery.js" charset="utf-8"></script>

<!-- Vendor JavaScript Library. A global utility for tracking the current input method (mouse/pointer, keyboard or touch) used by Foundation. See https://github.com/ten1seven/what-input !-->
<script type="text/javascript" src="https://style.brandenburg.de/cdn/bb/js/what-input.min.js"></script>

<!-- JavaScript Einbindung  Ende-->

</body> </html>
Seite drucken