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:
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.
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.<div class="stack">
<div>Example child</div>
<div>Example child</div>
<div>Example child</div>
</div>Brings elements closer together
<div class="stack stack--scale:-2">
<div>Example child</div>
<div>Example child</div>
<div>Example child</div>
</div>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.
<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>Makes the element as wide as the $wider-width variable. Use as child of a .stack.stack--center container.
<div class="stack stack--center">
<div class="wider">...</div>
</div>Makes the element as wide as the $site-width variable. Use as child of a .stack.stack--center container.
<div class="stack stack--center">
<div class="widest">...</div>
</div>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.
<div class="stack stack--center">
<div class="full-width">...</div>
</div>Centered container using the $content-width variable.
<div class="center">...</div>Centered container using the $content-width variable.
<div class="center center--pull:right">...</div>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.
<div class="grid">
<div>Grid item</div>
<div>Grid item</div>
<div>Grid item</div>
</div>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.
<div class="grid grid--size:s">
<div>Grid item</div>
<div>Grid item</div>
<div>Grid item</div>
</div>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.
<div class="grid grid--size:l">
<div>Grid item</div>
<div>Grid item</div>
<div>Grid item</div>
</div>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.
<div class="grid grid--size:xl">
<div>Grid item</div>
<div>Grid item</div>
<div>Grid item</div>
</div>Stacked containers on a small screen and aligned when all children are at least $grid-item-width wide.
<div class="switcher">
<div class="inner">
<div>Switcher item</div>
<div>Switcher item</div>
<div>Switcher item</div>
</div>
</div>Stacked containers on a small screen and aligned in a 1/2 ratio when both children are at least $grid-item-width wide.
<div class="switcher switcher--1:2">
<div class="inner">
<div>Switcher item</div>
<div>Switcher item</div>
</div>
</div>Stacked containers on a small screen and aligned in a 2/1 ratio when both children are at least $grid-item-width wide.
<div class="switcher switcher--2:1">
<div class="inner">
<div>Switcher item</div>
<div>Switcher item</div>
</div>
</div>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
Multiline
<div class="flag-object">
<div class="flag-object__aside">Aside</div>
<div class="flag-object__body">Body element <br/> Multiline</div>
</div>Add this modifier to vertically align all children on top instead of middle
Multiline
<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>Add this modifier to vertically align all children on bottom instead of middle
Multiline
<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>Add this modifier to keep everything aligned instead of stacked even on smaller screens
<div class="flag-object flag-object--nowrap">
<div class="flag-object__aside">Aside</div>
<div class="flag-object__body">Body</div>
</div>Add this modifier to get an inline-flex flag-object
<div class="flag-object flag-object--inline">
<div class="flag-object__aside">Aside</div>
<div class="flag-object__body">Body</div>
</div>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.
<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>hsl(47, 74%, 32%)
hsl(0, 100%, 39%)
hsl(0, 0, 100%)
hsl(43, 90%, 65%)
hsl(50, 33%, 86%)
hsl(50, 33%, 91%)
hsl(50, 33%, 96%)
hsl(0, 0, 100%)
hsl(240, 13%, 23%)
The first heading on a page should always be an
<h1> with the
class heading:xl.
Only one <h1> per page is allowed.
<h2 class="heading:xl">Lorem ipsum dolor sit amet</h2>@include heading("xl")heading:xl <h2 class="heading:xl-alt">Lorem ipsum dolor sit amet</h2>@include heading("xl", false)heading:xl-alt<h2 class="heading:l color:goud">Lorem ipsum dolor sit amet</h2>@include heading("l")heading:l<h2 class="heading:m">Lorem ipsum dolor sit amet</h2>@include heading("m")heading:m<h2 class="heading:m-alt">Lorem ipsum dolor sit amet</h2>@include heading("m", false)heading:m-alt<h2 class="heading:s">Lorem ipsum dolor sit amet</h2>@include heading("s")heading:s<h2 class="heading:s-alt">Lorem ipsum dolor sit amet</h2>@include heading("s-alt")heading:s-alt<h2 class="heading:m-alt color:dark">Lorem ipsum dolor sit amet</h2>heading:m-alt color:darkLorem ipsum dolor sit amet
01 january 2020
<h2 class="heading:m">Lorem ipsum dolor sit amet</h2>
<p class="sub-heading font-size:xs">01 january 2020</p><p class="font-size:l">Lorem ipsum dolor sit amet</p>font-size:l<p class="font-size:s">Lorem ipsum dolor sit amet</p>font-size:s<p class="font-size:xs">Lorem ipsum dolor sit amet</p>font-size:xs<p class="">Lorem ipsum dolor sit amet</p><p class="font-weight:bold">Lorem ipsum dolor sit amet</p>font-weight:bold<p class="font-style:italic">Lorem ipsum dolor sit amet</p>font-style:italic<p class="color:dark">Lorem ipsum dolor sit amet</p>color:dark<p class="background:type-alt">Lorem ipsum dolor sit amet</p>background:type-alt<p class="color:rood">Lorem ipsum dolor sit amet</p>color:rood<p class="color:rood font-size:l">Lorem ipsum dolor sit amet</p>color:rood font-size:lLorem ipsum dolor sit amet
<p class="font-weight:normal">Lorem ipsum dolor sit amet</p>font-weight:normalLorem ipsum dolor sit amet
<p class="font-weight:bold">Lorem ipsum dolor sit amet</p>font-weight:boldLorem ipsum dolor sit amet
<p class="font-weight:medium">Lorem ipsum dolor sit amet</p>font-weight:mediumLorem ipsum dolor sit amet
<p class="nowrap">Lorem ipsum dolor sit amet</p>nowrapEtiam 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">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>overflow:ellipsisDescription
Description