(replaces "Master Template")
The Online Styleguide is a uniformed compendium for project managers, web publisher, designers or developers of how to maintain, update or further develop a website. It gives an insight of formatting, use of space and components accross the online presence. It is devided into three essential parts.
Within typography we define standards such as text sizes, colors, paddings and dynamic behaviours. This can be included inside a plain text-paragraph or more advanced structures such as tables or forms.
Furthermore we add custom styles that support the layout throughout all templates like leading texts, grid support, helpers or list types.
We provide a standardized overview of all html functions and essential helpers.
Components are part of a website that are used on multiple occurences. Some examples include page navigations, boxes or teasers. Variations of the same element will be provided through descriptive indications.
Unlike typography, this section will be updated permanently as components are added or dropped. Besides the live preview we also add code examples to easily encourage copy-and-paste.
This represents an overview of all requested html pages. Those are marked and referenced to through a unique list-numbering. The templates are fully functional in terms of html, css and javascript but do not include any backend logic.
Depending on the projects nature, templates might be outdated over time as typography and components advance. They only serve as references to show how they were initially designed.
Python , Pip, und virtualenv sind erforderlich, damit der Online Styleguide lokal ausgeführt werden kann. Ebenfalls sollte der PATH zu Python und Python/Scripts korrekt gesetzt sein.
Um Änderungen am Online Styleguide vornehmen zu können, benötigt es Git, Ruby und Compass. Die Kollaboration erfolgt über Github wofür ein Konto mit den entsprechenden rechten benötigt wird.
Zusätzlich empfehlen wir ein Git tool wie windows.github.com um Änderungen einfacher zu verwalten.
1 Install Git from http://help.github.com/articles/set-up-git
1.1 Configure Git (you might want to use the windows GUI tool http://windows.github.com/)
2 Install Python 2.7.x from http://www.python.org/download/
2.1 Set correct PATH variable:
press "Windows + Break" go to System > Advanced system settings > Environment variables > PATH and add C:\Python27;C:\Python27\Scripts and restart. (you might change the path depending on your configuration)
3 Install Setuptools from http://pypi.python.org/pypi/setuptools/
5 Install virtualenv using python.exe easy_install virtualenv inside a command prompt
6 Install pip using python.exe easy_install pip inside a command prompt
7 Proceed to "Project setup"
Technische Beschreibung: Online Styleguide
Der Online Styleguide ist ein standardisierter Leitfaden für Projektleiter, Webpublisher, Webdesigner oder Webentwickler um eine Webseite zu unterhalten, aktualisieren oder weiterzuentwickeln.
Er bietet einen übergreifenden Einblick über die Onlinepräsenz im Bereich Formatierung, Modulen und Nutzung von Bereichen.
Der Styleguide ist grundsätzlich in 3 Bereiche gegliedert:
1. Übergreifende Elemente
Innerhalb der übergreifenden Elemente werden Testgrössen, Farben, Abstände und dynamische Verhalten beschrieben. Die Elemente können innerhalb eines Textparagraphen oder auch komplexerer Strukturen, wie Tabellen oder Formulare, eingesetzt werden.
Darüber hinaus werden spezifische Styles hinzugefügt, welche für das Layout über alle Templates hinweg eingesetzt werden können (z.B. Lead-Text, Grid-Support, Helpers und Listenformatierungen).
Der Styleguide bietet einen standardisierte Übersicht über alle HTML-Funktionen und wichtigsten Helpers.
2. Module
Module sind Teil einer Webseite, welche an mehreren Stellen zum Einsatz kommen können. Einige Beispiele hierfür sind Seitennavigationen, Boxen oder Teaser. Variationen der einzelnen Elemente werden durch selbsterklärende Angaben angefügt.
Anders als bei den übergreifenden Elementen, wird dieser Bereich ständig aktualisiert und weitere Elemente können hinzugefügt oder weggelassen werden.
Nebst einem Live-Preview bietet der Styleguide auch Code-Beispiele zum einfachen Copy-Paste der Elemente.
3. Templates
Dieser Bereich bietet einen Überblick über alle erstellten HTML-Templates. Die einzelnen Templates werden durch eine eindeutige Listennummerierung markiert und referenziert.
Die Templates sind in bezug auf HTML/CSS/Javascript voll funktionsfähig, beinhalten aber keinerlei Backend-Logik.
Abhängend vom Projekt können Templates über die Zeit überholt sein, da sich übergeordnete Elemente und Module weiterentwickeln können. Sie dienen lediglich als Referenz für die Umsetzung der ursprünglichen Designvorlage.
Mitwirkung
Python , Pip, und virtualenv sind erforderlich, damit der Online Styleguide lokal ausgeführt werden kann. Um Änderungen am Online Styleguide vornehmen zu können, benötigt es Git, Ruby und Compass. Die Kollaboration erfolgt über Github wofür ein Konto mit den entsprechenden Rechten benötigt wird.