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.
- Die Seiten laden schneller, da die Browser bereits geladene Dateien aus dem Cache nehmen.
Sie können die CSS und JavaScript Dateien des Frameworks und der Komponenten einzeln oder die zusammengefasst und minimierten Dateien als Komplettpaket einbinden.
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
- Foundation
- Font Awesome
- Open Sans
- https://style.brandenburg.de/2_4/fonts/OpenSans-Bold.ttf
- https://style.brandenburg.de/2_4/fonts/OpenSans-BoldItalic.ttf
- https://style.brandenburg.de/2_4/fonts/OpenSans-ExtraBold.ttf
- https://style.brandenburg.de/2_4/fonts/OpenSans-ExtraBoldItalic.ttf
- https://style.brandenburg.de/2_4/fonts/OpenSans-Italic.ttf
- https://style.brandenburg.de/2_4/fonts/OpenSans-Light.ttf
- https://style.brandenburg.de/2_4/fonts/OpenSans-LightItalic.ttf
- https://style.brandenburg.de/2_4/fonts/OpenSans-Regular.ttf
- https://style.brandenburg.de/2_4/fonts/OpenSans-SemiboldItalic.ttf
- JQuery
- Featherlight
- Ableplayer
- Modernizr
- JavaScript Cookie
- Normalize
- Standardgrafiken
- brandenburg.de css- Dateien
- https://style.brandenburg.de/2_4/css/app.css
- https://style.brandenburg.de/2_4/css/themes/standard.css
- https://style.brandenburg.de/2_4/css/themes/Kastanie-993333.css
- https://style.brandenburg.de/2_4/css/themes/Dunkelgruen-00613A.css
- https://style.brandenburg.de/2_4/css/themes/Olivgruen-394E1D.css
- https://style.brandenburg.de/2_4/css/themes/Petrol-005F6C.css
- https://style.brandenburg.de/2_4/css/themes/Blaugrau-214152.css
- https://style.brandenburg.de/2_4/css/themes/Stahlblau-345498.css
- https://style.brandenburg.de/2_4/css/themes/Blau-2043A2.css
- https://style.brandenburg.de/2_4/css/themes/Violet-663399.css
- https://style.brandenburg.de/2_4/css/themes/Goldrute-E6BE3F.css
- https://style.brandenburg.de/2_4/css/themes/Orange-FF9933.css
- https://style.brandenburg.de/2_4/css/themes/Sandbraun-CC9966.css
- https://style.brandenburg.de/2_4/css/themes/Seegruen-66CC66.css
- https://style.brandenburg.de/2_4/css/themes/Himmelblau-33CCFF.css
- https://style.brandenburg.de/2_4/css/themes/Zyanblau-2DC3E5.css
- https://style.brandenburg.de/2_4/css/themes/monochrome.css
- brandenburg.de js- Dateien
- https://style.brandenburg.de/2_4/js/visualComponents/tabs-horizontal.js
- https://style.brandenburg.de/2_4/js/visualComponents/tabs-vertical.js
- https://style.brandenburg.de/2_4/js/visualComponents/mobile-menu.js
- https://style.brandenburg.de/2_4/js/visualComponents/slider.js
- https://style.brandenburg.de/2_4/js/visualComponents/app.js
- CSS und JavaScript Dateien zusammengefasst und minimiert
Beispielseiten
Unsere Beispielseiten 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 Urheberkennzeichnung
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
<!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> <!-- all Vendor min CSS Library !--> <link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/2_4/css/vendors/vendor.min.css"/> <!-- When Theme is switchted. Replaces Main Color!--> <link type="text/css" rel="stylesheet" href="https://style.brandenburg.de/2_4/css/app.css"/> <link rel="icon" type="image/x-icon" href="https://style.brandenburg.de/2_4/favicon.ico" /></head> <body> <div class="bb-stage"> <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"> <div class="title-bar bb-title-bar" data-responsive-toggle="bb-tool-menu" data-hide-for="medium"> <span for="bb-toolbar-button" class="bb-toolbar-button-bg" data-toggle> <button id="bb-toolbar-button" class="menu-icon bb-menu-icon" type="button" ></button> </span> <div for="bb-toolbar-button" class="title-bar-title bb-title-bar-title" data-toggle> Toolbar-Menü </div> </div> <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="?theme=monochrome" title="Einfarbig"> Einfarbig </a> </li> <li class="has-submenu"> <a href="#" class="bb-last-menu-element bb-is-submenu"> Deutsch </a> <ul class="submenu menu vertical bb-submenu" data-submenu> <li> <a href="#" class="bb-dropdown-items"> Englisch </a> </li> <li> <a href="#" class="bb-dropdown-items"> Polnisch </a> </li> </ul> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="row bb-border"> <div class="columns"> <div class="row bb-area-header"> <div class="columns"> <div class="row"> <div class="small-12 columns" id="bb-absenderkennung"> <a href="/" title="Link zur Startseite"> Landesregierung Brandenburg </a> </div> </div> <div class="row"> <div class="columns" id="bb-logo-bar"> <div class="row"> <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="https://style.brandenburg.de/2_4/img/logos/Wort_Bildmarke.png" alt="Brandenburg-Logo"> </a> </div> <div class="hide-for-small-only medium-2 columns"> </div> <div class="hide-for-small-only medium-4 columns bb-logo"> </div> </div> </div> </div> <div class="row"> <div class="large-12 columns" id="bb-nav"> <div class="large-9 large-push-3 columns" id="bb-nav2"> <div class="title-bar bb-title-bar" data-responsive-toggle="bb-nav-menu" data-hide-for="medium"> <span for="bb-navbar-button" class="bb-navbar-button-bg" data-toggle> <button id="bb-navbar-button" class="menu-icon bb-menu-icon" type="button"></button> </span> <div for="bb-navbar-button" class="title-bar-title bb-title-bar-title" data-toggle> Hauptmenü </div> </div> <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="bb-nav-menu-item"> Start </a> </li> <li class="has-submenu"> <a href="" title="Kapitel" class="bb-nav-menu-item"> Menü 1 </a> <ul class="submenu menu vertical bb-submenu" data-submenu> <li> <a href="#" title="Menü 1.1" class="dropdown-items bb-dropdown-items "> Menü 1.1 </a> </li> <li> <a href="#" title="Menü 1.2" class="dropdown-items bb-dropdown-items "> Menü 1.2 </a> </li> </ul> </li> </ul> </div> </div> </div> <div class="bb-bottom-border"> </div> </div> </div> </div> </div> <div class="row bb-area-content"> <div class="columns"> <div class="bb-content"> <div class="row"> <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="#" title="Start"> Start </a> </div> </div> <div class="small-12 medium-3 columns"> <div class="bb-search-bar-placeholder"></div> </div> </div> <div class="row"> <div class="columns"> <div class="row"> <div class="columns small-12"> Beispiel-Inhalt: Hier können verschiedene Komponenten eingebunden werden. </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="row bb-area-footer"> <div class="columns"> <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="#" title="Start"> Start </a> <i class="fa fa-caret-right"></i> <a href="#" title="Impressum"> Impressum </a> </div> </div> </div> <div class="row bb-area-footer-content"> <div class="hide-for-medium columns"> <div id="bb-link-bar"> <div class="row"> <div class="hide-for-medium large-3 columns"> </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> <li> <a href="#" title="Link zur Sitemap"> Sitemap </a> </li> </ul> </div> </div> </div> </div> <div class="medium-12 large-9 columns"> <div id="bb-info-bar"> <div class="row"> <div class="columns small-12 medium-6"> <h6>Schnellzugriff</h6> <ul class="bb-list-dark"> <li> <i class="fa fa-download"></i> <a href="#" target="_blank" title="Link 1"> Link 1 </a> </li> <li> <i class="fa fa-picture-o"></i> <a href="#" title="Link 2"> Link 2 </a> </li> </ul> </div> </div> </div> </div> <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" target="_blank" title="Link zum Landesportal Brandenburg"> Landesportal Brandenburg </a> </li> <li> <a href="http://service.brandenburg.de" target="_blank" title="Link zum Serviceportal Brandenburg"> Serviceportal Brandenburg </a> </li> <li> <a href="#" title="Link zur Sitemap"> Sitemap </a> </li> </ul> </div> <div class="medium-6 large-12 columns"> </div> </div> </div> </div> </div> <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="#" title="Link zum Kontakt"> Kontakt </a> </span> <span class="bb-footer-items-right"> | </span> <span class="bb-footer-items-right"> <a class="bb-footer-items-right" href="#" title="Link zum Impressum"> Impressum </a> </span> <span class="bb-footer-items-right"> | </span> <span class="bb-footer-items-right"> <a class="bb-footer-items-right" href#" title="Link zum Datenschutz"> Datenschutz </a> </span> </div> </div> </div> </div> </div> </div> <!-- all Vendor JavaScript Library !--> <script type="text/javascript" src="https://style.brandenburg.de/2_4/js/vendor.min.js"></script> <!-- all brandenburg.de JavaScript !--> <script type="text/javascript" src="https://style.brandenburg.de/2_4/js/finalApp.js"></script> </body> </html>