Oeteldonksche Club van 1882 online styleguide

In this styleguide you will find elements that can be used to build pages for the website Oeteldonk.nl and other sites that are using the markup/CSS/JS of Oeteldonk.nl.

The following components are currently available:

Layout

Magenta backgrounds and borders are added to the styleguide only to display the otherwise invisible containers.

In this "layout" section you will find everything you need to structurally layout each page. All these elements are only styled structural so no borders, backgrounds or other properties will be found here.

Stack
Stack

All direct children in this container are stacked with their own top-margin (may be different for different items).

This is the main class to use to space elements from each other.

Example child
Example child
Example child
Markup
<div class="stack">
    <div>Example child</div>
    <div>Example child</div>
    <div>Example child</div>
</div>
Stack smaller

Brings elements closer together

Example child
Example child
Example child
Markup
<div class="stack stack--scale:-2">
    <div>Example child</div>
    <div>Example child</div>
    <div>Example child</div>
</div>
Stack center

All direct children in this container are centered using the $content-width variable.

Note: Some elements can't be used as direct children (for example any inline, inline-block or inline-flex element, a .flag-object, a .horizontal-list) because they won't center on larger screens. If you need one of these elements simply wrap it in a div for example.

Example child
Example child
Example child
Note: This element is failing on desktop. Wrap it in a div for example.
Markup
<div class="stack stack--center">
    <div>Example child</div>
    <div>Example child</div>
    <div>Example child</div>
    <div class="flag-object"><div class="flag-object__body">Note: This element is failing on desktop. Wrap it in a div for example.</div></div>
</div>
Stack center > wider

Makes the element as wide as the $wider-width variable. Use as child of a .stack.stack--center container.

...
Markup
<div class="stack stack--center">
    <div class="wider">...</div>
</div>
Stack center > widest

Makes the element as wide as the $site-width variable. Use as child of a .stack.stack--center container.

...
Markup
<div class="stack stack--center">
    <div class="widest">...</div>
</div>
Stack center > full-width

Makes the element as wide as the parent container. Use as child of a .stack.stack--center container.

Use this element to span the entire site and add background colors to this div to create colored sections.

...
Markup
<div class="stack stack--center">
    <div class="full-width">...</div>
</div>
Center
Center

Centered container using the $content-width variable.

...
Markup
<div class="center">...</div>
Center, pull:right

Centered container using the $content-width variable.

...
Markup
<div class="center center--pull:right">...</div>
Grid
Grid

Children will stay neatly in a self-growing grid. All children are at least $grid-item-width wide.

Falls back to flexbox on older browsers.

Grid item
Grid item
Grid item
Markup
<div class="grid">
        <div>Grid item</div>
        <div>Grid item</div>
        <div>Grid item</div>
</div>
Grid (smaller)

Children will stay neatly in a self-growing grid. All children are at least $grid-item-width--s wide.

Falls back to flexbox on older browsers.

Grid item
Grid item
Grid item
Markup
<div class="grid grid--size:s">
        <div>Grid item</div>
        <div>Grid item</div>
        <div>Grid item</div>
</div>
Grid (large)

Children will stay neatly in a self-growing grid. All children are at least $grid-item-width--l wide.

Falls back to flexbox on older browsers.

Grid item
Grid item
Grid item
Markup
<div class="grid grid--size:l">
        <div>Grid item</div>
        <div>Grid item</div>
        <div>Grid item</div>
</div>
Grid (extra large)

Children will stay neatly in a self-growing grid. All children are at least $grid-item-width--xl wide.

Falls back to flexbox on older browsers.

Grid item
Grid item
Grid item
Markup
<div class="grid grid--size:xl">
        <div>Grid item</div>
        <div>Grid item</div>
        <div>Grid item</div>
</div>
Switcher
Switcher

Stacked containers on a small screen and aligned when all children are at least $grid-item-width wide.

Switcher item
Switcher item
Switcher item
Markup
<div class="switcher">
    <div class="inner">
        <div>Switcher item</div>
        <div>Switcher item</div>
        <div>Switcher item</div>
    </div>
</div>
Switcher 1:2

Stacked containers on a small screen and aligned in a 1/2 ratio when both children are at least $grid-item-width wide.

Switcher item
Switcher item
Markup
<div class="switcher switcher--1:2">
    <div class="inner">
        <div>Switcher item</div>
        <div>Switcher item</div>
    </div>
</div>
Switcher 2:1

Stacked containers on a small screen and aligned in a 2/1 ratio when both children are at least $grid-item-width wide.

Switcher item
Switcher item
Markup
<div class="switcher switcher--2:1">
<div class="inner">
    <div>Switcher item</div>
    <div>Switcher item</div>
</div>
</div>
Flag object
Flag object

Automaticcaly sizing flag-object. The body is fluid and aside is fixed.

Make sure you define a width for fluid elements (like images) inside an aside to avoid weird growing flag objects

Aside
Body element
Multiline
Markup
<div class="flag-object">
    <div class="flag-object__aside">Aside</div>
    <div class="flag-object__body">Body element <br/> Multiline</div>
</div>
Top aligned flag object

Add this modifier to vertically align all children on top instead of middle

Aside
Body element
Multiline
Markup
<div class="flag-object flag-object--top">
    <div class="flag-object__aside">Aside</div>
    <div class="flag-object__body">Body element <br/> Multiline</div>
</div>
Bottom aligned flag object

Add this modifier to vertically align all children on bottom instead of middle

Aside
Body element
Multiline
Markup
<div class="flag-object flag-object--bottom">
    <div class="flag-object__aside">Aside</div>
    <div class="flag-object__body">Body element <br/> Multiline</div>
</div>
No wrap flag object

Add this modifier to keep everything aligned instead of stacked even on smaller screens

Aside
Body
Markup
<div class="flag-object flag-object--nowrap">
    <div class="flag-object__aside">Aside</div>
    <div class="flag-object__body">Body</div>
</div>
Inline flag object

Add this modifier to get an inline-flex flag-object

Aside
Body
Markup
<div class="flag-object flag-object--inline">
    <div class="flag-object__aside">Aside</div>
    <div class="flag-object__body">Body</div>
</div>
Cluster
Cluster

A cluster of elements evenly spaced both vertical as horizontal.

The cluster doesn't care what you throw at it. Just remember that it is a flexbox so each row is as tall as the tallest child.

Cluster item
Cluster item
Cluster item Cluster item
Markup
<div class="cluster">
    <div>Cluster item</div>
    <div>Cluster item</div>
    <a class="button button--oceaan" href="#">Cluster item</a>
    <a class="label" href="#">Cluster item</a>
</div>
Color
Primary
Goud
hsl(47, 74%, 32%)
Rood
hsl(0, 100%, 39%)
Wit
hsl(0, 0, 100%)
Geel
hsl(43, 90%, 65%)
Support
Goud light
hsl(50, 33%, 86%)
Goud lighter
hsl(50, 33%, 91%)
Goud lightest
hsl(50, 33%, 96%)
Wit
hsl(0, 0, 100%)
Type-alt
hsl(240, 13%, 23%)
Typography

The first heading on a page should always be an <h1> with the class heading:xl.

Only one <h1> per page is allowed.

Headings
Heading XL
Bitter: Italic Light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:xl">Lorem ipsum dolor sit amet</h2>
Include
@include heading("xl")
Class
heading:xl 
Heading XL - Bold
Bitter: Regular Bold 700

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:xl-alt">Lorem ipsum dolor sit amet</h2>
Include
@include heading("xl", false)
Class
heading:xl-alt
Heading L
Bitter: Italic Light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:l color:goud">Lorem ipsum dolor sit amet</h2>
Include
@include heading("l")
Class
heading:l
Heading M
Bitter: Italic Light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:m">Lorem ipsum dolor sit amet</h2>
Include
@include heading("m")
Class
heading:m
Heading M - Regular
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:m-alt">Lorem ipsum dolor sit amet</h2>
Include
@include heading("m", false)
Class
heading:m-alt
Heading S
Bitter: Italic light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:s">Lorem ipsum dolor sit amet</h2>
Include
@include heading("s")
Class
heading:s
Heading S
Bitter: Italic light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:s-alt">Lorem ipsum dolor sit amet</h2>
Include
@include heading("s-alt")
Class
heading:s-alt
Heading M - Regular - Donker op wit
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<h2 class="heading:m-alt color:dark">Lorem ipsum dolor sit amet</h2>
Class
heading:m-alt color:dark
Heading + sub-heading

Lorem ipsum dolor sit amet

01 january 2020

Markup
<h2 class="heading:m">Lorem ipsum dolor sit amet</h2>
<p class="sub-heading font-size:xs">01 january 2020</p>
Body text
Font size L
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="font-size:l">Lorem ipsum dolor sit amet</p>
Class
font-size:l
Font size S
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="font-size:s">Lorem ipsum dolor sit amet</p>
Class
font-size:s
Font size XS
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="font-size:xs">Lorem ipsum dolor sit amet</p>
Class
font-size:xs
Body text
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="">Lorem ipsum dolor sit amet</p>
Body text - bold
Bitter: Regular Bold 700

Lorem ipsum dolor sit amet

Markup
<p class="font-weight:bold">Lorem ipsum dolor sit amet</p>
Class
font-weight:bold
Body text - italic
Bitter: Italic Light 300

Lorem ipsum dolor sit amet

Markup
<p class="font-style:italic">Lorem ipsum dolor sit amet</p>
Class
font-style:italic
Body text - Donker op wit
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="color:dark">Lorem ipsum dolor sit amet</p>
Class
color:dark
Body text - Wit op donker
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="background:type-alt">Lorem ipsum dolor sit amet</p>
Class
background:type-alt
Call to action
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="color:rood">Lorem ipsum dolor sit amet</p>
Class
color:rood
Call to action - large
Bitter: Regular Light 300

Lorem ipsum dolor sit amet

Markup
<p class="color:rood font-size:l">Lorem ipsum dolor sit amet</p>
Class
color:rood font-size:l
Weight
Weight normal
Puts text in normal weight

Lorem ipsum dolor sit amet

Markup
<p class="font-weight:normal">Lorem ipsum dolor sit amet</p>
Class
font-weight:normal
Weight bold
Puts text in bold weight

Lorem ipsum dolor sit amet

Markup
<p class="font-weight:bold">Lorem ipsum dolor sit amet</p>
Class
font-weight:bold
Weight medium
Puts text in medium weight (Only applicable to fonts that have a medium weight loaded in the site)

Lorem ipsum dolor sit amet

Markup
<p class="font-weight:medium">Lorem ipsum dolor sit amet</p>
Class
font-weight:medium
Wrapping and overflow
No wrap
Makes sure text always stays on one line and never wraps to a second one.

Lorem ipsum dolor sit amet

Markup
<p class="nowrap">Lorem ipsum dolor sit amet</p>
Class
nowrap
Overflow ellipsis
When text is longer than one line it adds three dots to the end.

Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.

Markup
<p class="overflow:ellipsis">Etiam porta sem malesuada magna mollis euismod. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
Class
overflow:ellipsis
Button

Description

Card

Description