Alle templates zijn hier hierarchisch gelinkt. Handig jonge!

Om het leven wat makkelijker te maken hier een overzicht van de gebruikte elementen en de opmaak daarvan.

Branding
- Typography
  - Teksten
  - Titels
  - Links
  - Buttons
- Kleuren
  - Kleuren per onderdeel
  - Monotones
Elementen
- <body>
- <header>
- <nav role="navigation">
- div#site_content
- div#your_overview
- nav#view_controls
- table.table table-hover
- form.live_results_form
dashboard widgets
scss goodies

Als font wordt Aller gebruikt, in twee variaties. Allerregular en Allerlight. Omdat AR enorm zwaar is, wordt deze alleen gebruikt op de blokken van #your_overview.

Teksten

Normale paragraaftekst: 16px #333 Allerlight

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

html,body {
  font-family: $default-font;
  font-size: $font-size;
}

Titels

h1 {font-size: $font-size * 1.8;}
h2 {font-size: $font-size * 1.6;}
h3 {font-size: $font-size * 1.4;}
h4,h5,h6 {font-size: $font-size * 1.2;}

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

Links

Links zijn afhankelijk van de body class. Als je geen body class toevoegt zoals op deze pagina, zien links er zo uit. Je kunt de body-classes ook gebruiken per link:

Buttons

de standaard .btn.btn-default wordt gebruikt voor het verzenden en/of bevestigen van user input. Verder zijn er de standaard bootstrap buttons en kun je ook de specifieke classes voor deze site gebruiken: .btn.btn-hosting.

.btn.btn-default {
  @extend .btn-xontrol;
  color: #fff !important;
}

Een button .btn-default

Standaard Bootstrap buttons

Custom buttons

btn btn-hosting btn btn-strippen btn btn-domeinen btn btn-ssl btn btn-wph btn btn-sla

Let op: buttons stylen NIET automatisch mee met de body class!

Inline buttons

Drie .btn.btn-default op een rij Drie .btn.btn-default op een rij Drie .btn.btn-default op een rij

Drie .btn.btn-primary op een rij Drie .btn.btn-primary op een rij Drie .btn.btn-primary op een rij

Drie .btn.btn-danger op een rij Drie .btn.btn-danger op een rij Drie .btn.btn-danger op een rij

btn btn-default btn-block

btn btn-hosting btn-block

btn btn-strippen btn-block

btn btn-domeinen btn-block

btn btn-ssl btn-block

btn btn-wph btn-block

btn btn-sla btn-block

OKAY, GENOEG BUTTONS! :P

Er worden 7 kleuren gebruikt in dit theme, exclusief de monotones.

Kleuren per onderdeel

Elk onderdeel heeft z'n eigen kleur.

Om de kleuren van titels en links te laten corresponderen met het onderdeel waar je je momenteel bevindt, zijn er body classes. Deze zijn:

(Klik op elke link om de class aan de huidige body toe te voegen.)

Monotones

Via _settings.scss kun je 1 basis-monotone instellen bij $monotone. Vijf corresponderende monotones worden automatisch gegenereerd van zeer donker (3) naar bijna wit (79):

$monotone: #323232;

$monotone-black: darken($monotone, 3);
$monotone-darker: darken($monotone, 14);
$monotone-dark: lighten($monotone, 4);
$monotone-accent: lighten($monotone, 34);
$monotone-light: lighten($monotone, 40);
$monotone-lighter: lighten($monotone, 65);
$monotone-pale: lighten($monotone, 79);

Xolution Panel

Heb je vragen? Wij helpen je graag!

Links naar alle templates

Aanwijzingen gebruik html/scss elementen

Branding

Typography