Brandfield styleguide heading 1

Dit element is een paragraaf. Een paragraaf wordt gemaakt met de HTML tag 'p'. Dit werkt als volgt: <p>paragraph</p>. Deze paragraaf wordt ook vetgedrukt weergegeven. Zo krijgt deze de duidelijke stijl van een introductiealinea. Tekst vetgedrukt maken werkt met de HTML tag 'strong'. Dit werkt als volgt: <strong>vetgedrukte tekst</strong>.

Dit is een paragraaf zonder vetgedrukte tekst. Hier wordt alleen gebruikgemaakt van de paragraph HTML tags. Dit is de stijl van normale tekst op een informatiepagina. Het font is Lato en de font-size van een paragraaf is 16px.

De tekst hieronder staat in accordeons om content overzichtelijk te presenteren

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at viverra ex

Cras mollis est condimentum iaculis aliquet. Mauris porta in urna et feugiat. Sed sit amet lorem in libero euismod semper quis vel risus. Quisque porta massa sit amet urna sagittis interdum. Vivamus mattis dapibus eros, pellentesque rhoncus ante hendrerit et. Nunc maximus nibh vitae interdum vestibulum. Vestibulum sem ipsum, rhoncus vitae euismod sed, ullamcorper et felis. Proin sapien nibh, venenatis eget fringilla vitae, fringilla non ipsum. Pellentesque laoreet consequat ipsum id blandit. Fusce maximus neque id placerat ultricies. Proin eu libero non sapien suscipit condimentum.

Mauris in massa vulputate, vestibulum mi eu, gravida nisi

Vestibulum lobortis est quis justo rutrum, ac sagittis velit scelerisque. Mauris id fermentum mauris. Phasellus sed est urna. Vivamus gravida mi eget iaculis mollis. Suspendisse vestibulum ornare lectus, sed tincidunt ipsum. Donec nulla arcu, porta ac sodales a, scelerisque et erat. Morbi lacinia est nec libero egestas interdum. Integer ullamcorper nec nibh nec sollicitudin. Nulla pulvinar dignissim rutrum.

Sed sagittis urna vitae nisl porttitor, at aliquam libero pellentesque

Etiam tristique augue ut scelerisque consequat. Ut porttitor aliquet interdum. Morbi ut nulla condimentum, egestas turpis id, interdum dui. Aliquam erat volutpat. Maecenas tincidunt leo eu nulla vulputate, nec facilisis tortor suscipit. Sed euismod fermentum diam quis dapibus. Morbi finibus turpis non vestibulum mollis.

Mauris a enim nisl

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed scelerisque maximus rhoncus. Donec ut rhoncus ipsum, vitae pulvinar lacus. Donec porta mauris tortor, in malesuada ligula consequat ut. Etiam orci tortor, semper sit amet pellentesque quis, consectetur eu purus. Nunc ut aliquam tortor. Pellentesque orci magna, accumsan pellentesque sem vel, porta gravida nisl. Mauris gravida dui nibh, at dictum turpis dictum quis. Nulla gravida ante ex, in scelerisque enim semper eu. Praesent placerat consequat diam non viverra. In posuere a lorem ac luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Integer dictum et lacus sit amet dapibus

Nam vel aliquam eros, nec efficitur nibh. Aenean rutrum turpis vitae convallis viverra. Sed laoreet eget turpis a vulputate. Proin eu hendrerit massa, id iaculis leo. Pellentesque sagittis elementum convallis. Suspendisse a eros vitae diam vulputate feugiat. Vestibulum pulvinar lorem eget interdum ornare. Phasellus vel lectus nisl.

Hieronder staan de normale veelgebruikte tekstelementen:

Dit is een heading 2 subkop

Dit is een paragraaf zonder vetgedrukte tekst. Hier wordt alleen gebruikgemaakt van de paragraph HTML tags. Dit is de stijl van normale tekst op een informatiepagina. Het font is Lato en de font-size van een paragraaf is 16px.

Dit is een subkop heading 3

Dit is een paragraaf zonder vetgedrukte tekst. Hier wordt alleen gebruikgemaakt van de paragraph HTML tags. Dit is de stijl van normale tekst op een informatiepagina. Het font is Lato en de font-size van een paragraaf is 16px.

Een hyperlink in een paragraaf. De tekst moet onderlijnd zijn en bij mouse-over moet de onderlijning verdwijnen.

Dit is een <big>big</big> element.

Dit is een <small>small</small> element.

Unordered list <ul></ul> met <li>list items</li>:

• Unordered list item 1
• Unordered list item 2
• Unordered list item 3

Ordered list <ol></ol> met <li>list items</li>:

1. Ordered list item 1
2. Ordered list item 2
3. Ordered list item 3

Table:

De div met class="content"

Om de content in het midden uitgelijnd te krijgen, zoals hier met witruimte links en rechts, is een extra HTML element 'div' nodig met class 'content'. Dit hele blok content, inclusief de titel en alle paragrafen, zijn in deze div geplaatst. Dit werkt als volgt:

<div class="content"><p>Plaats hier content om in het midden uit te lijnen.</p></div>

Achtergrond kleuren

Een <div class="content"><p> kan een afwijkende achtergrondkleur krijgen dan het standaard wit. Dit kan op twee manieren. Methode 1 is een kleur kiezen uit het kleurenpalet (zie hieronder) en deze toe te passen via de WYSIWYG editor via het 'Styles' menu. Methode 2 is door een stukje CSS code toe te voegen aan de <div class="content"><p>.

Dit blok is met extra CSS voorzien van een achtergrondkleur. Dit werkt als volgt:

<div class="content" style="background-color: #e4e3dd;"><p>Content.</p></div>

Hieronder staan de verschillende kleurenpalet kleuren weergegeven.

Buttons

Class "button"

Class "button button-secondary"

Class "button btn-checkout"

Kolommen

Binnen content pagina's kunnen kolommen gebruikt worden om content visueel te ordenen en aantrekkelijker te maken. Het kolommensysteem van Bootstrap wordt hiervoor gebruikt. Hoe dit werkt staat hier beschreven:

• http://getbootstrap.com/css/#grid-options
• http://getbootstrap.com/examples/grid/

In de basis kan de beschikbare ruimte opgedeeld worden in 12 kolommen. Hieronder staat een aantal voorbeelden uitgewerkt, waarbij de som van de gebruikte classes dus ook telkens 12 is.

Voorbeeld: 3 gelijke kolommen

Content opdelen in 3 gelijke kolommen kan als volgt:

Gebruikte code:

<div class="row no-mb">
<div class="col-md-4"><p>Content</p></div>
<div class="col-md-4"><p>Content</p></div>
<div class="col-md-4"><p>Content</p></div>
</div>

Voorbeeld: 4 gelijke kolommen

Content opdelen in 4 gelijke kolommen kan als volgt:

Gebruikte code:

<div class="row no-mb">
<div class="col-md-3"><p>Content</p></div>
<div class="col-md-3"><p>Content</p></div>
<div class="col-md-3"><p>Content</p></div>
<div class="col-md-3"><p>Content</p></div>
</div>

Voorbeeld: 1 grote kolom en 2 kleine kolommen

Content opdelen in 1 grote kolom met daarnaast 2 kleine kolommen kan als volgt:

Gebruikte code:

<div class="row no-mb">
<div class="col-md-6"><p>Content</p></div>
<div class="col-md-3"><p>Content</p></div>
<div class="col-md-3"><p>Content</p></div>
</div>

Content verbergen op mobiel of desktop

Om een element te verbergen op mobiel of desktop, kan deze worden voorzien van een class:

Voor verbergen op mobiel (schermbreedtes tot en met 479px): <div class=".hide-mobile"></div>

Voor verbergen op desktop (schermbreedtes vanaf 480px): <div class=".hide-desktop"></div>

Hiermee kan dus bepaalde content voor mobiel of desktop gemaakt worden en aangepast worden, afgestemd op mobiel of desktop.

Widgets