Getting started

In this styleguide you'll find all the necessary info you will need in order to start building digital layouts or ACPaaS apps.

Basic implementation

In its simplest form you can just include the following line in the <head> section of your app.

<link rel="stylesheet" href="https://cdn.antwerpen.be/acpaas_branding_scss/4.3.0/main.min.css">

You can even import it directly in your (S)CSS:

@import url("https://cdn.antwerpen.be/acpaas_branding_scss/4.3.0/main.min.css");

We adopt semantic versioning. If you want to use another version of the Core Branding you can do so by adjusting the version in the URL address. See the changelog for all available versions.

You can also install everything with npm:

npm install @a-ui/acpaas --save

Then, you can import everything in your Sass setup (main.min.css also available):

@import '~@a-ui/acpaas/dist/main.css';

In order to extend our style kit you can make use of our Sass variables. Import them like this:

@import '~@a-ui/acpaas/dist/assets/styles/_quarks';

Advanced usage

Sometimes you want to add functionality which requires more styling as defined in our kit. In order to help with this we provide some simple tools and the ability to import all the kit's Sass variables. See the Quarks section for more info.

Accessibility

Web Content Accessibility Guidelines (WCAG) 2.1 (external) cover a wide range of recommendations for making web content more accessible.

Some parts of the ACPaaS branding may need special actions on the subject of WCAG 2.1 AA, specific guidelines that are required by European law. When this is the case you will see this icon accessibility note which will warn you about any incompatibilities and actions that may have to be taken from your behalf.

Other resources

Flexboxgrid

https://github.com/a-ui/core_flexboxgrid_scss (external)

Grid optimized to follow the ACPaaS styling guidelines.

Favicons

https://github.com/a-ui/acpaas_branding_favicons (external)

Favicons for ACPaaS apps.

Molecules

Quarks

You can treat this part of the package as the API of our styling library. Include it on top of your custom stylesheet in order to have access to all defined variables, mixins and functions.

@import 'quarks';

Mixins

quarks/quarks.mixins

More mixins are available, but the following are the more important ones.

Force an element to self-clear its children

Note that you can also use the .clearfix class.

.css {
  @include clearfix;
}

Use FontAwesome as font

.css {
  @include fontawesome;
}

Responsive mixins

Note that working mobile first is encouraged, so try to limit the use of the to mixin.

.css {
  @include at($screen) {
    /* Anything bigger than $screen */
  }

  @include to($screen-xs-max) {
    /* Anything smaller or equal than $screen */
  }
}

Functions

quarks/quarks.functions

More functions are available, but the following are the more important ones.

Convert pixels to rem

.css {
  margin: rem(32px) / 16 * 1rem // margin: 2rem;
}

Correctly handle z-indexes

For all options, see below in the variables section.

.css {
  z-index: layer('base'); // z-index: 1;
}

Colors

quarks/quarks.colors

An overview of the complete color palette.

$monza
rgb(207, 0, 57)
$corn
rgb(220, 198, 0)
$sun
rgb(249, 176, 30)
$porsche
rgb(236, 161, 84)
$tangerine
rgb(241, 138, 0)
$korma
rgb(148, 69, 11)
$punch
rgb(224, 78, 57)
$alizarin-crimson
rgb(218, 41, 28)
$mandy
rgb(223, 70, 97)
$red-ribbon
rgb(228, 0, 70)
$deep-blush
rgb(229, 109, 177)
$cerise
rgb(227, 49, 138)
$rose-bud-cherry
rgb(132, 11, 85)
$east-side
rgb(181, 128, 209)
$seance
rgb(105, 31, 130)
$ship-cove
rgb(103, 135, 183)
$st-tropaz
rgb(44, 86, 151)
$congress-blue
rgb(0, 64, 136)
$cerulean
rgb(0, 145, 211)
$endeavour
rgb(0, 100, 180)
$light-cerulean
rgb(0, 160, 211)
$deep-cerulean
rgb(0, 127, 163)
$monte-carlo
rgb(127, 202, 211)
$blue-lagoon
rgb(0, 140, 149)
$persian-green
rgb(0, 152, 130)
$tropical-rain-forrest
rgb(0, 123, 95)
$mantis
rgb(108, 194, 74)
$apple
rgb(43, 132, 13)
$celery
rgb(170, 203, 87)
$limeade
rgb(122, 154, 1)
$asparagus
rgb(120, 157, 74)
$green-leaf
rgb(87, 115, 7)
$kabul
rgb(85, 71, 65)
$nepal
rgb(144, 171, 188)
$black-pearl
rgb(8, 31, 44)
$black
rgb(0, 0, 0)
$grey-dark
rgb(111, 111, 111)
$grey
rgb(148, 148, 148)
$grey-light
rgb(216, 216, 216)
$grey-lighter
rgb(243, 243, 243)
$white
rgb(255, 255, 255)
$twitter
rgb(0, 172, 237)
$linkedin
rgb(0, 119, 181)
$facebook
rgb(24, 119, 242)
$google
rgb(220, 78, 65)
$snapchat
rgb(255, 252, 0)
$instagram
inspect me

Variables

quarks/quarks.variables

An overview of all variables and their default values. If you are using Sass, you can overwrite these values for creating your own flavor of the branding kit.

$font-family-base: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif
$font-family-headings: 'Titillium Web', 'Helvetica Neue', Helvetica, Arial, sans-serif
$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace
$brand-primary: #242d9e
$brand-secondary: #322a56
$brand-tertiary: #01afb8
$brand-quaternary: #1730e2
$brand-quinary: #8e87fc
$brand-senary: #e24814
$state-success: #00816b
$state-warning: #f18a00
$state-danger: #da291c
$header-bg: #322a56
$header-border: rgba($black, 0)
$header-height: calc(3rem + 1px)
$header-btn-bg: #322a56
$header-btn-color: #fff
$icon-list-hover-color: #242d9e

Base

Layout

base/base.layout

This file contains mostly basic layout-related styling resets, like box model behaviour and such. No need to worry about its contents!

Media

base/base.media

This file contains mostly basic media-related styling resets, like default behaviour of video and images. No need to worry about its contents!

Typography

base/base.typography

Accessibility note. Never use a heading class without a heading element.

Heading 1

<h1>Heading 1</h1>

<div class="h1">Heading 1</div>

Heading 2

<h2>Heading 2</h2>

<div class="h2">Heading 2</div>

Heading 3

<h3>Heading 3</h3>

<div class="h3">Heading 3</div>

Heading 4

<h4>Heading 4</h4>

<div class="h4">Heading 4</div>

Heading 5

<h5>Heading 5</h5>

<div class="h5">Heading 5</div>

Heading 6

<h6>Heading 6</h6>

<div class="h6">Heading 6</div>

In some cases, it might be necessary to use the base font as font family for the headings. In that case, add the class has-base-font to your heading.

<h1 class="has-base-font">Heading 1</h1>

<h2 class="has-base-font">Heading 2</h2>

<h3 class="has-base-font">Heading 3</h3>

<h4 class="has-base-font">Heading 4</h4>

<h5 class="has-base-font">Heading 5</h5>

<h6 class="has-base-font">Heading 6</h6>

Paragraph: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

<p>Paragraph: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.</p>

Blockquote: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae. Publius Vergilius Maro

<blockquote>
    <p>Blockquote: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram.</p>
    <p>Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.</p>
    <cite>Publius Vergilius Maro</cite>
</blockquote>

Small paragraph: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.

<p><small>Small paragraph: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.</small></p>

<p class="small">Small paragraph: Arma virumque cano, Troiae qui primus ab oris Italiam, fato profugus, Laviniaque venit litora, multum ille et terris iactatus et alto vi superum saevae memorem Iunonis ob iram. Multa quoque et bello passus, dum conderet urbem, inferretque deos Latio, genus unde Latinum, Albanique patres, atque altae moenia Romae.</p>

Mark

<mark>Mark</mark>

<hr>

This is how a link looks like (hover me)

<a href="#">This is how a link looks like (hover me)</a>

Utilities

Background

utilities/utilities.background

Classes that allow you to quickly change the background color of an element.

Accessibility note. Make sure there is enough contrast between text and background. See the contrast success criterion (external).

.u-bg

<div class="u-bg">.u-bg</div>

.u-bg-black

<div class="u-bg-black">.u-bg-black</div>

.u-bg-danger

<div class="u-bg-danger">.u-bg-danger</div>

.u-bg-light

<div class="u-bg-light">.u-bg-light</div>

.u-bg-primary

<div class="u-bg-primary">.u-bg-primary</div>

.u-bg-quaternary

<div class="u-bg-quaternary">.u-bg-quaternary</div>

.u-bg-quinary

<div class="u-bg-quinary">.u-bg-quinary</div>

.u-bg-secondary

<div class="u-bg-secondary">.u-bg-secondary</div>

.u-bg-senary

<div class="u-bg-senary">.u-bg-senary</div>

.u-bg-success

<div class="u-bg-success">.u-bg-success</div>

.u-bg-tertiary

<div class="u-bg-tertiary">.u-bg-tertiary</div>

.u-bg-warning

<div class="u-bg-warning">.u-bg-warning</div>

.u-bg-white

<div class="u-bg-white">.u-bg-white</div>

Layout

utilities/utilities.layout

The .u-wrapper class makes sure that all content can flow next to the "Antwerp" logo (above 30rem). It does not provide extra padding for smaller screens.

<div class="u-wrapper">
  ...
</div>

The .u-container class makes sure that all content stays centered. It provides extra padding for smaller screens so that your content doesn't stick to the boundaries of your screen.

<div class="u-container">
  ...
</div>

Note that .u-wrapper and .u-container can work perfectly together as illustrated in the example.

<div class="u-wrapper">
  <div class="u-container">
    ...
  </div>
</div>

The .u-no-scroll class will clip content when an element's content is too big to fit in the given area.

<div class="u-no-scroll">
  ...
</div>

The .u-horizontal-scroll class makes sure your content box will only scroll horizontally.

<div class="u-horizontal-scroll">
  ...
</div>

The .u-vertical-scroll class makes sure your content box will only scroll vertically.

<div class="u-vertical-scroll">
  ...
</div>

The .u-viewport-vertical class makes sure your content box will be as high as the viewport (height).

<div class="u-viewport-vertical">
  ...
</div>

The .u-clearfix class will force an element to self-clear its children.

Note that you can also use the clearfix mixin.

<div class="u-clearfix">
  ...
</div>

.css {
  @include clearfix;
}

.u-screen-reader-only is an accessiblity class and can be used to hide information intended only for screen readers.

Note that we offer this also as a Sass placeholder, so you can @extend it in your own class.

<div class="u-screen-reader-only">
  ...
</div>

.css {
  @extend %u-screen-reader-only;
}

Spacing

utilities/utilities.spacing

Helper classes for adding or removing space between elements.

.u-margin

<div class="u-margin">.u-margin</div>

.u-margin-bottom

<div class="u-margin-bottom">.u-margin-bottom</div>

.u-margin-bottom-lg

<div class="u-margin-bottom-lg">.u-margin-bottom-lg</div>

.u-margin-bottom-xs

<div class="u-margin-bottom-xs">.u-margin-bottom-xs</div>

.u-margin-bottom-xx

<div class="u-margin-bottom-xx">.u-margin-bottom-xx</div>

.u-margin-left

<div class="u-margin-left">.u-margin-left</div>

.u-margin-left-lg

<div class="u-margin-left-lg">.u-margin-left-lg</div>

.u-margin-left-xs

<div class="u-margin-left-xs">.u-margin-left-xs</div>

.u-margin-left-xx

<div class="u-margin-left-xx">.u-margin-left-xx</div>

.u-margin-lg

<div class="u-margin-lg">.u-margin-lg</div>

.u-margin-right

<div class="u-margin-right">.u-margin-right</div>

.u-margin-right-lg

<div class="u-margin-right-lg">.u-margin-right-lg</div>

.u-margin-right-xs

<div class="u-margin-right-xs">.u-margin-right-xs</div>

.u-margin-right-xx

<div class="u-margin-right-xx">.u-margin-right-xx</div>

.u-margin-top

<div class="u-margin-top">.u-margin-top</div>

.u-margin-top-lg

<div class="u-margin-top-lg">.u-margin-top-lg</div>

.u-margin-top-xs

<div class="u-margin-top-xs">.u-margin-top-xs</div>

.u-margin-top-xx

<div class="u-margin-top-xx">.u-margin-top-xx</div>

.u-margin-xs

<div class="u-margin-xs">.u-margin-xs</div>

.u-margin-xx

<div class="u-margin-xx">.u-margin-xx</div>

.u-no-margin

<div class="u-no-margin">.u-no-margin</div>

.u-no-margin-bottom

<div class="u-no-margin-bottom">.u-no-margin-bottom</div>

.u-no-margin-left

<div class="u-no-margin-left">.u-no-margin-left</div>

.u-no-margin-right

<div class="u-no-margin-right">.u-no-margin-right</div>

.u-no-margin-top

<div class="u-no-margin-top">.u-no-margin-top</div>