View the code on GitHub

Skip to table of contents

## Getting started

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

### 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/core_branding_scss/{{ VERSION_INFO.version }}/main.min.css">

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

    @import url("https://cdn.antwerpen.be/core_branding_scss/{{ VERSION_INFO.version }}/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/core --save

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

    @import '~@a-ui/core/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/core/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.

It's also possible to only load the Antwerp fonts. Just like you would implement a font from Google. These are the links you can use:

#### Antwerpen

Available in Small, Regular and Tall.

    <link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/{{ VERSION_INFO.version }}/antwerpen.min.css">

or

    @import url("https://cdn.antwerpen.be/core_branding_scss/{{ VERSION_INFO.version }}/antwerpen.min.css");

#### Sun Antwerpen

Available in Light, Regular, Bold and Extra Bold.

    <link rel="stylesheet" href="https://cdn.antwerpen.be/core_branding_scss/{{ VERSION_INFO.version }}/sun-antwerpen.min.css">

or

    @import url("https://cdn.antwerpen.be/core_branding_scss/{{ VERSION_INFO.version }}/sun-antwerpen.min.css");

## Other resources

### Flexboxgrid

https://github.com/a-ui/core_flexboxgrid_scss

Grid optimized to follow the Antwerp styling guidelines.

### Sketch

https://github.com/a-ui/core_branding_sketch

Sketch source file of all core branding components.

### Favicons

https://github.com/a-ui/core_branding_favicons

Favicons for Antwerp apps.