Club Brugge Styleguide


version:

Welcome to the styleguide – an internal guide & code repository for designing and coding projects for . If you're new here, have a look through some of the topics on the left.


USEFULL LINKS TO READ:

Quarks

Globals

/sass/base/_globals.scss

TODO: split this up in defferent vars

now this is just a list of the globals. Provide examples and so on later on....

    • Name: $debug-mode
    • Value: false
    • Raw: false
    • Name: $mobile
    • Value: 30em
    • Raw: 30em
    • Name: $tablet
    • Value: 45em
    • Raw: 45em
    • Name: $desktop
    • Value: 60em
    • Raw: 60em
    • Name: $desktop-xl
    • Value: 80em
    • Raw: 80em
    • Name: $desktop-xxl
    • Value: 92em
    • Raw: 92em
    • Name: $font-family-sans
    • Value: "Open Sans"
    • Raw: "Open Sans"
    • Name: $font-family-serif
    • Value: "Freight Display"
    • Raw: "Freight Display"
    • Name: $font-size-xxxlarge
    • Value: 45px
    • Raw: 45px
    • Name: $font-size-xxlarge
    • Value: 28px
    • Raw: 28px
    • Name: $font-size-xlarge
    • Value: 22px
    • Raw: 22px
    • Name: $font-size-large
    • Value: 18px
    • Raw: 18px
    • Name: $font-size
    • Value: 14px
    • Raw: 14px
    • Name: $font-size-medium
    • Value: 16px
    • Raw: 16px
    • Name: $font-size-small
    • Value: 13px
    • Raw: 13px
    • Name: $line-height
    • Value: 1.7
    • Raw: 1.7
    • Name: $border-radius
    • Value: 0.3334em
    • Raw: 0.3334em
    • Name: $box-shadow
    • Value: 0 0.25em 0 -0.1em rgba($dark, 0.045)
    • Raw: 0 0.25em 0 -0.1em rgba($dark, 0.045)
    • Name: $box-shadow-inset
    • Value: inset 0 0.25em 0 0 $light
    • Raw: inset 0 0.25em 0 0 $light
    • Name: $box-shadow-hover
    • Value: 0 10px 20px 0 rgba(0, 0, 0, 0.08)
    • Raw: 0 10px 20px 0 rgba(0, 0, 0, 0.08)
    • Name: $default-padding
    • Value: 2.5rem
    • Raw: 2.5rem
    • Name: $default-padding-mobile
    • Value: $default-padding / 2
    • Raw: $default-padding / 2
    • Name: $side-bar-padding
    • Value: 2.5rem
    • Raw: 2.5rem
    • Name: $border-simple
    • Value: 1px solid $border-color
    • Raw: 1px solid $border-color
    • Name: $max-width
    • Value: 1366px
    • Raw: 1366px
    • Name: $z-index-lowest
    • Value: -1
    • Raw: -1
    • Name: $z-index-lower
    • Value: 0
    • Raw: 0
    • Name: $z-index-low
    • Value: 1
    • Raw: 1
    • Name: $z-index-base
    • Value: 10
    • Raw: 10
    • Name: $z-index-high
    • Value: 100
    • Raw: 100
    • Name: $z-index-higher
    • Value: 1000
    • Raw: 1000
    • Name: $z-index-highest
    • Value: 9999
    • Raw: 9999
    • Name: $z-index-modal
    • Value: 9999
    • Raw: $z-index-highest
    • Name: $animation-fast-duration
    • Value: 220ms
    • Raw: 220ms
    • Name: $animation-medium-duration
    • Value: 660ms
    • Raw: 660ms
    • Name: $animation-slow-duration
    • Value: 1000ms
    • Raw: 1000ms
    • Name: $animation-easing
    • Value: cubic-bezier(0.4, 0, 0.2, 1)
    • Raw: cubic-bezier(0.4, 0, 0.2, 1)
    • Name: $animation-easing-smooth
    • Value: cubic-bezier(0.77, 0.2, 0.05, 1)
    • Raw: cubic-bezier(0.77, 0.2, 0.05, 1)
    • Name: $animation-fast
    • Value: $animation-fast-duration $animation-easing
    • Raw: $animation-fast-duration $animation-easing
    • Name: $animation-medium
    • Value: $animation-medium-duration $animation-easing
    • Raw: $animation-medium-duration $animation-easing
    • Name: $animation-slow
    • Value: $animation-slow-duration $animation-easing
    • Raw: $animation-slow-duration $animation-easing
    • Name: $animation-smooth
    • Value: 0.5s $animation-easing-smooth
    • Raw: 0.5s $animation-easing-smooth
    • Name: $screen-xs
    • Value: 480px !default
    • Raw: 480px !default
    • Name: $screen-xs-min
    • Value: $screen-xs !default
    • Raw: $screen-xs !default
    • Name: $screen-phone
    • Value: $screen-xs-min !default
    • Raw: $screen-xs-min !default
    • Name: $screen-sm
    • Value: 768px !default
    • Raw: 768px !default
    • Name: $screen-sm-min
    • Value: $screen-sm !default
    • Raw: $screen-sm !default
    • Name: $screen-tablet
    • Value: $screen-sm-min !default
    • Raw: $screen-sm-min !default
    • Name: $screen-md
    • Value: 992px !default
    • Raw: 992px !default
    • Name: $screen-md-min
    • Value: $screen-md !default
    • Raw: $screen-md !default
    • Name: $screen-desktop
    • Value: $screen-md-min !default
    • Raw: $screen-md-min !default
    • Name: $screen-lg
    • Value: 1200px !default
    • Raw: 1200px !default
    • Name: $screen-lg-min
    • Value: $screen-lg !default
    • Raw: $screen-lg !default
    • Name: $screen-lg-desktop
    • Value: $screen-lg-min !default
    • Raw: $screen-lg-min !default
    • Name: $screen-xs-max
    • Value: ($screen-sm-min - 1) !default
    • Raw: ($screen-sm-min - 1) !default
    • Name: $screen-sm-max
    • Value: ($screen-md-min - 1) !default
    • Raw: ($screen-md-min - 1) !default
    • Name: $screen-md-max
    • Value: ($screen-lg-min - 1) !default
    • Raw: ($screen-lg-min - 1) !default
    • Name: $grid-columns
    • Value: 12 !default
    • Raw: 12 !default
    • Name: $grid-gutter-width
    • Value: 30px !default
    • Raw: 30px !default
    • Name: $grid-float-breakpoint
    • Value: $screen-sm-min !default
    • Raw: $screen-sm-min !default
    • Name: $grid-float-breakpoint-max
    • Value: ($grid-float-breakpoint - 1) !default
    • Raw: ($grid-float-breakpoint - 1) !default
    • Name: $container-tablet
    • Value: (720px + $grid-gutter-width) !default
    • Raw: (720px + $grid-gutter-width) !default
    • Name: $container-sm
    • Value: $container-tablet !default
    • Raw: $container-tablet !default
    • Name: $container-desktop
    • Value: (940px + $grid-gutter-width) !default
    • Raw: (940px + $grid-gutter-width) !default
    • Name: $container-md
    • Value: $container-desktop !default
    • Raw: $container-desktop !default
    • Name: $container-large-desktop
    • Value: (1140px + $grid-gutter-width) !default
    • Raw: (1140px + $grid-gutter-width) !default
    • Name: $container-lg
    • Value: $container-large-desktop !default
    • Raw: $container-large-desktop !default

Colors

/sass/base/_quarks/_colors.scss

Primary colors

Always provide different shades of the primary colors. For a more high-level approach on color use, head over to IBM Design Language.

  • $black
    #121212
  • $white
    #FFFFFF
  • $blue
    #0177BF
  • $blue-dark
    #00578C
  • $dark-extra
    $black
  • $dark
    #2F3742
  • $medium
    #CCCCCC
  • $light
    #F1F1F1
  • $light-extra
    $white
  • $card-red
    #FF1A1A
  • $card-yellow
    #FFF200
  • $substitute-green
    #47D800
  • $primary-color
    $blue
  • $secondary-color
    $dark
  • $background
    $light
  • $darktransparent
    rgba(0, 0, 0, 0.5)

Border colors

  • $border-color
    #D8D8D8
  • $border-color--dark
    $medium
  • $border-color-active
    #93ADD1

Text colors

Use different shades for text to express the hierarchy of information. Text, icons, borders and dividers will benefit when their color is defined with alpha values, as a result they will work on any background. Text colors are derived from primary black/white colors.

  • $font-color
    #1E2F41
  • $font-color-medium
    rgba($font-color, 0.72)
  • $font-color-light
    #AAC0D2
  • $font-color-disabled
    rgba($font-color, 0.3)

UI-kit colors

Primary colors for interaction feedback, notifications and states: error (red), warning (orange), highlight (yellow), success (green) and information (blue). UI-kit colors should always be aligned with the tone of voice of the application/brand.

  • $ui-red
    #FFB4C2
  • $ui-orange
    #FCE7AC
  • $ui-green
    #E6F1CE
  • $ui-blue
    #CAEDF3

Typography

/sass/base/_quarks/_typography.scss

Reading experience

Typography is the atomic element of good interface design as it defines branding, layout, composition & rhythm. Note that it's not just about choosing the right typeface, it's also about tone of voice, microcopy. Head over to IBM Design Language for an in-depth overview on the elements of typography.

Good reading experiences have the right amount of characters per line. If a line is too long users will have a hard time focusing, if a line is too short the eye will have to travel back too often, breaking the reader's rhythm. An optimal line length is 50-75 characters, which is about 10-12 words or 25-33 × base font-size (1em). To increase readability of typographic elements, default letter-spacing values for headings & small text are adjusted.

Font stack

Sans-serif: Fresco Sans Std, sans-serif
Serif: Fresco Std, serif
Base font-size: 16px

<h1> - Fresco Sans Std (100) - 44px - line-height: 1.025

Good design is good business

<h2> - Fresco Sans Std (100) - 28px - line-height: 1.025

Good design is always obvious, while great design is always transparent

<h3> - Fresco Sans Std (300) - 18px - line-height: 1.45

While everything is designed, only few things are designed to excell

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4> - Fresco Sans (100) - 18px - line-height: 1.45

Content is king and should always precede design. Design in the absence of content is not design, but decoration.

<p> - Fresco Sans Std - 16px - line-height: 1.7

Many desperate acts of design (e.g. gradients, drop shadows, and the gratuitous use of transparency) are perpetuated in the absence of a strong concept. Good ideas provide a framework for design, guiding the work.

<h4>Heading 4</h4>
<p>Paragraph</p>
<h5> - Fresco Sans Std (300) - 16px - line-height: 1.55
Online design trends change more often than the wind and slightly less often than my socks. Good design is timeless, good design creates culture. Culture shapes value and value determinates the future.
<h5>Heading 5</h5>
<h6> - Fresco Sans Std (300) - 13px - line-height: 1.55
Always design a thing by considering it in its next larger context - a chair in a room, a room in a house, a house in an environment, an environment in a city plan.
<small> - Fresco Sans Std - 13px - line-height: 1.7 People think that design is styling. Design is not style. It's not about giving shape to the shell and not giving a damn about the guts. Good design is a renaissance attitude that combines technology, cognitive science, human need, and beauty to produce something that the world didn't know it was missing.
<h6>Heading 6</h6>
<small>Small text</small>
<blockquote> - Fresco Std (100) - 26px - line-height: 1.25
<cite> - Fresco Sans Std - 13px - line-height: 1.7
Great design will not sell an inferior product, but it will enable great products to achieve their maximum potential. Thomas J. Watson Jr.
<blockquote>
    Good design will not sell an inferior product...
    <cite>Thomas J. Watson Jr.</cite>
</blockquote>
Hyperlinks: <a href="">, <span class="is-hyperlink"> This is a hyperlink
This looks like a hyperlink
<a href="#" title="Always provide a title">Hyperlink</a>
<span class="is-hyperlink">This looks like a hyperlink</span>
Strong: <strong> This text is strong
Emphasized: <em> This text is emphasized
Quotes: <q> This text is quoted
Highlighted: <mark> This text is highlighted
Obsolete/deleted/updated: <del> This text is obsolete/deleted/updated
<strong>This text is strong</strong>
<em>This text is emphasized</em>
<q>This text is quoted</q>
<mark>This text is highlighted</mark>
<del>This text is obsolete/deleted/updated</del>

Icons

/sass/base/_quarks/_icons.scss

Implementation

The icon-set is converted with a custom Gulp iconfont-task. To add/remove icons from the generated font, please contact Little Miss Robot or use an online service like IcoMoon. Warning: using an online service could break stuff!

  • .icon-add
  • .icon-arrow-down
  • .icon-arrow-left
  • .icon-arrow-right
  • .icon-arrow-up
  • .icon-arrow
  • .icon-calendar
  • .icon-card-left
  • .icon-card-right
  • .icon-check
  • .icon-close
  • .icon-deal
  • .icon-facebook
  • .icon-facebook_footer
  • .icon-favorite
  • .icon-flickr_footer
  • .icon-football-outline
  • .icon-football
  • .icon-instagram
  • .icon-interview
  • .icon-kaart
  • .icon-more
  • .icon-more_active
  • .icon-play
  • .icon-play_small
  • .icon-player_position
  • .icon-shop
  • .icon-stadium
  • .icon-substitute-bottom
  • .icon-substitute-top
  • .icon-substitute
  • .icon-ticket
  • .icon-twitter
  • .icon-twitter_footer
  • .icon-user
  • .icon-vimeo_footer
  • .icon-whistle
<span class="icon-[name]"></span>

Utilities

Grid system

/sass/base/utils/_grid.scss

Columns

Basic grid classes for layout purposes, has no extra margins & paddings applied to items and will work with anything (class based).

The grid is based on the Bootstrap grid. Full explenation of how it works can be found here: http://getbootstrap.com/css/#grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs-block"></div>
    <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Atoms

Buttons

/sass/atoms/_buttons.scss

Implementation

Use <a> for navigation, <button> for everything else. Submit/reset buttons are the only exceptions, using <input[type="submit"]> to trigger default browser behaviour associated with submitting form input. Buttons should follow a typographic scale, based on importance and base font-size.

Primary buttons: <button class="button"> Primary button
Primary button

Secondary buttons

Buttons for in-line interactions, as used in toolbars (eg. close, add, remove, ...)



Lists

/sass/base/_lists.scss

Implementation

By default lists are not included in base/_normalize.scss. Each class extending the default (e.g. inline-list) must handle the reset in itself. Usually this means resetting the padding-left value and adjust the list-style property.

  • Sed ut perspiciatis unde omnis
  • Sed ut perspiciatis unde omnis
  • Label for nested list items
    • Nested list items
    • Nested list items
    • Nested list items

  1. Sed ut perspiciatis unde omnis
  2. Sed ut perspiciatis unde omnis
  3. Label for nested list items
    • Nested list items
    • Nested list items
    • Nested list items

Inline Lists

/sass/base/_lists.scss
Standard
  • List item
  • List item
  • List item

With dividers
  • List item
  • List item
  • List item

Standard
  • List item
  • List item
  • List item

With dividers
  • List item
  • List item
  • List item

Forms Elements

General principle

Each input field should have a label and inform users about the kind of input they need to provide. This info-text switches functionality during the user flow: information becomes inline validation/immediate feedback. The tone of voice should be human and add personality to the experience/brand.

Implementation

Every form should have an action- and method-attribute. To encourage default browser behaviour, the submit button should be added as input[type=submit]. Every input should have a label with corresponding for-, id- and name-attributes. Labels are always placed before inputs, nesting is not allowed (except for checkboxes and radio's).

Default inputs

/sass/atoms/form-elements/general.scss

Tell the user what kind of input is expected, add a clickthrough as needed
Don't worry, we won't spam you. Read our privacy policy.
Passwords should be 6 characters or more. Be tricky!
Not what you expected? Please contact our customer support.
Don't worry, we only contact you when it's absolutely necessary.
Tell us a little bit more about yourself.
Can't find what you're looking for? Try our frequently asked questions

Textarea

/sass/atoms/form-elements/general.scss

Feedback, suggestions, ideas, ... we would love to hear from you!
Feedback, suggestions, ideas, ... we would love to hear from you!

Select

/sass/atoms/form-elements/select.scss

To mimic placeholder styling, add a 'has-no-value' class to the <select>
To mimic placeholder styling, add a 'has-no-value' class to the <select>

Upload

/sass/atoms/form-elements/upload.scss

By default upload fields aren't easy to style in a specific look& feel. The trick is to use a hidden field to display input value and some additional javascript to make this work.

Note: Javascript functionality in the source code is just a prototype (not present in production /js/main.js). The actual submit/upload functionality is also not implemented.

Tell the user what kind of input is expected, add a clickthrough as needed
Tell the user what kind of input is expected, add a clickthrough as needed

Range slider

/sass/atoms/form-elements/range.scss

By default range sliders aren't easy to style in a specific look& feel. In order to get it working, some additional javascript is needed. Changing the slider value will reveal a tooltip with the actual value.

Date picker

/sass/atoms/form-elements/date-picker.scss

Using the Pikaday Datepicker plugin, which is lightweight & has no dependencies. Styling of the plugin is embedded in the generated CSS (simply add the javascript & confire as shown below).

Note: Javascript functionality in the source code is just a prototype (not present in production /js/main.js).

Tell the user what kind of input is expected, add a clickthrough as needed
Tell the user what kind of input is expected, add a clickthrough as needed

Toggles

/sass/atoms/form-elements/toggle.scss

Toggles (radiobuttons, checkboxes & switches ) are wrapped inside a label to enable the default browser behaviour.

User Feedback

General principle

Always provide feedback on user interaction. This can be immediate (eg. inline validation) or after the action (eg. submit a form). Feedback messages are informative and provide an easy escape or alternative/following action. The tone of voice should be human and add personality to the experience/brand.

Alerts

/sass/atoms/alerts.scss

This is a feedback message.


Something went wrong, please try again.


Perhaps you meant something else.


Now how about adding some more.


Some features might not work.

This is a feedback message.


Something went wrong, please try again.


Perhaps you meant something else.


Now how about adding some more.


Some features might not work.

Tooltips

/sass/atoms/tooltips.scss

Use tooltips to display inline information or validation feedback. Just like default alerts, different styling can be applied (error, warning, success and information). Although tooltips will work with any typographic style, the use of <small> is adviced.

Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip
Tooltip with hyperlink Tooltip Tooltip Tooltip Tooltip

Inline validation

/sass/atoms/form-elements/general.scss

Always provide immediate/inline feedback on user interaction. Feedback messages are informative and provide an easy escape or alternative/following action. The tone of voice should be human and add personality to the experience/brand.

What a lovely name!
Tell the user what kind of input is expected, add a clickthrough as needed
Your password should be at least 6 characters. Be tricky!
Your password should be at least 6 characters. Be tricky!
This email is already registered. Do you want to login or recover password?
Don't worry, we won't spam you. Read our privacy policy.
What a lovely name!
Tell the user what kind of input is expected, add a clickthrough as needed
Your password should be at least 6 characters. Be tricky!
Your password should be at least 6 characters. Be tricky!
This email is already registered. Do you want to login or recover password?
Don't worry, we won't spam you. Read our privacy policy.

Slider

/sass/atoms/slider.scss

Can be initialised with and without arrows to navigate. Always with dots. To make it fit its container like in the sidebar you can use --fit-container. By default provides scroll overflow on slides in fit-container that are larger than container. There is however a modifier for a slide to show the nav under the content . To make sure that content is scrollable you need to wrap the content in a overflow-wrapper.





Sidebar Banner

/sass/base/atoms/_sidebar-banner.scss

Club now
Club now

IAB Container

/sass/base/atoms/_iab-container.scss

Use a-iab--centered modifier to center the iab image in the container

Well

/sass/base/atoms/_well.scss

Vorige matchen

Lorizzle dang dolor mah nizzle amizzle, consectetuer adipiscing elit. Nullam sapizzle velizzle, dang volutpizzle, suscipit quizzle, yo mamma vizzle, arcu. Pellentesque gizzle tortor. Sizzle eros. The bizzle izzle dolizzle dapibizzle turpis tempus i'm in the shizzle. Maurizzle mammasay mammasa mamma oo sa nibh izzle turpis. Fizzle in tortor. Pellentesque gangster rhoncizzle pimpin'. Pot hac gangster platea dictumst. Shut the shizzle up dapibus. Ma nizzle tellus sheezy, pretizzle izzle, mattis ac, eleifend vitae, nunc. Tellivizzle suscipizzle. Integer brizzle shut the shizzle up fizzle purus.

Vorige matchen

Lorizzle dang dolor mah nizzle amizzle, consectetuer adipiscing elit. Nullam sapizzle velizzle, dang volutpizzle, suscipit quizzle, yo mamma vizzle, arcu. Pellentesque gizzle tortor. Sizzle eros. The bizzle izzle dolizzle dapibizzle turpis tempus i'm in the shizzle. Maurizzle mammasay mammasa mamma oo sa nibh izzle turpis. Fizzle in tortor. Pellentesque gangster rhoncizzle pimpin'. Pot hac gangster platea dictumst. Shut the shizzle up dapibus. Ma nizzle tellus sheezy, pretizzle izzle, mattis ac, eleifend vitae, nunc. Tellivizzle suscipizzle. Integer brizzle shut the shizzle up fizzle purus.

Team sheet

/sass/base/atoms/_team-sheet.scss

Starting 11

1 Butelle
2 Van Rhijn
5 Poulain
24 Denswill
21 Cools
6 Claudemir


Match info

Coach Michel Preud'homme
Scheidsrechter Erik Lambrechts
Stadion Jan Breydelstadion

Ruud Vormer

Goals 1
Schoten op doel 3
Gecreëerde kansen 7
Afgewerkte passes 6
A player image

Starting 11

1 Butelle
2 Van Rhijn
5 Poulain
24 Denswill
21 Cools
6 Claudemir


Match info

Coach Michel Preud'homme
Scheidsrechter Erik Lambrechts
Stadion Jan Breydelstadion

Ruud Vormer

Goals 1
Schoten op doel 3
Gecreëerde kansen 7
Afgewerkte passes 6
A player image

Line Chart

/sass/base/atoms/_line-chart.scss

61%
Balbezit
39%
61%
Balbezit
39%

Video player

/sass/base/atoms/_video-player.scss

Reponsive video player for embedded(iframe) videos from Vimeo, Youtube, ...





Section

/sass/base/atoms/_section.scss

Couple of examples how a text element with a-section would work

Anderlecht - Club Brugge: 31 Maart 2017

Naar aanleiding van zijn 125-jarige bestaan publiceren Panini en Club Brugge samen een Panini-boek over de Brugse geschiedenis. Een absolute primeur. Nooit eerder bracht Panini een boek uit exclusief rond één Belgische Club. Dit unieke boek neemt je mee door het DNA van Blauw-Zwart: De supporters, de hoogtes en laagtes, de Europese successen, de shirts,… Een uniek beeldverhaal over de rijke geschiedenis van Club.

Voor de eerste keer

“Voor de eerste keer in België komt een club uit de Jupiler Pro League met een eigen Panini album in zijn Clubkleuren. Club Brugge doet dit ter ere van zijn 125-jarig bestaan. Panini is heel fier op de samenwerking en het resultaat. Het is zonder twijfel een uniek album dat elke Panini verzamelaar in zijn collectie moet hebben ” aldus Virginie Peres-Vogels, Marketing&Communication Manager van Panini.

Met 52 pagina’s en 272 stickers is het boek het perfecte geschenk voor iedere Club Fan. Over het ontbreken van enkele stickers moet je je ook geen zorgen maken, want alle stickers worden apart meegeleverd met het boek. Het is een eerbetoon aan 125 jaar Club Brugge, met het plezier van het kleven van Panini-stickers. Een echt collector’s item.

Het boek kost €39 en is vanaf vandaag te verkrijgen in onze Clubshop en in alle vestigingen van Standaard Boekhandel. Vanaf maandag 10 april is het te verkrijgen op www.clubshop.be

club 1891

Club 1891

Vanaf dit seizoen starten we met CLUB1891, het nieuwe lidmaatschap van Club Brugge. Als lid van CLUB1891 maak je officieel deel uit van de grootste voetbalfamilie van het land.

Voor de eerste keer

Je krijgt een exclusief CLUB1891-welkomstpakket en een jaar lang tal van voordelen waar enkel de leden van CLUB1891 van kunnen genieten! De CLUB1891 membership kost € 25 en wordt bij aankoop van je abonnement automatisch toegevoegd aan je bestelling. Wil je een CLUB1891 membership zonder abonnement? Dat kan vanaf 8 juli bij de start van de vrije verkoop, zowel online als aan het loket.

Opgelet: vanaf dit seizoen moet je lid zijn van CLUB1891 om een abonnement of losse tickets te kopen.

voordelen
Blauw zwarte familie.
club 1891

Anderlecht - Club Brugg:e 31 maart 2017

Zondag staat voor Club een topmatch op het programma. Blauw-Zwart gaat op bezoek bij Anderlecht en wil daar voor het eerst sinds lang met de drie punten gaan lopen. Lees alle Facts over de wedstrijd hier!

Tegenstander

Voorafgaand aan het duel moesten beide teams nog hun laatste Europese duel van het jaar afwerken. Anderlecht was al zeker van een Europese overwintering, maar kon met minstens een gelijkspel tegen AS Saint-Étienne ook de groepswinst veiligstellen. Dat leek te gaan lukken toen de Roemenen Alexandru Chipciu en Nicolae Stanciu Sporting op een 2-0 ruststand hadden gebracht. De tweede helft liep echter helemaal anders. De Noorse spits Alexander Søderlund bracht met 2 treffers de stand in evenwicht en Kévin Monnet-Paquet keerde de situatie zelfs helemaal om in het voordeel van de Fransen (2-3 eindstand). Geen groepswinst dus voor RSCA, maar het mag maandag 12 december wel naar Nyon voor de loting van de 1/16e finales van de UEFA Europa League. Anderlecht haalde dit seizoen 17 op 24 in eigen huis. Het behaalde overwinningen tegen KV Kortrijk (5-1), Charleroi (3-2), Lokeren (1-0), KV Mechelen (2-0) en Moeskroen (7-0), speelde gelijk tegen AA Gent (2-2) en Oostende (1-1) en verloor verrassend van Westerlo (1-2). Met Lukasz Teodorczyk heeft Sporting de topschutter van de Jupiler Pro League in zijn rangen. De Pool scoorde al 13 keer. Jelle Vossen volgt met 10 treffers op de tweede plaats. 

tegenstander
Club Brugge - Anderlecht op 11 december 2016
wedstrijd
Club Brugge - Anderlecht op 11 december 2016

Wedstrijd

Zondag staat voor de 80ste keer Anderlecht – Club Brugge op het programma. Club en Anderlecht staan op de tweede en derde stek in de competitie en volgen op respectievelijk 1 en 3 punten van Zulte Waregem, dat op 34 punten staat. Het is tevens de match tussen de beste aanval (RSCA met 36 goals) en de beste verdediging (Club met 13 tegengoals). Timmy Simons blaast zondag 40 kaarsjes uit. Een overwinning in het Astridpark staat met stip bovenaan zijn wenslijst. Voorafgaand aan de topper moesten beide teams nog hun laatste Europese duel van het jaar afwerken. Club, dat al uitgeschakeld was voor Europees voetbal na Nieuwjaar, verloor met 0-2 van FC Kopenhagen. De eindstand stond al na een kwartier op het bord. Eerst werd een vrije trap door Brandon Mechele ongelukkig met de schouder in doel gedevieerd. Vervolgens kopte Mathias Jørgensen een hoekschop binnen. Club kon niet meer reageren. Club en Anderlecht spelen voor de 160ste keer tegen elkaar in Eerste Klasse. De 79 vorige duels in Brussel leverden 9 zeges, 24 draws en 46 nederlagen op. 

Anderlecht - Club Brugge: 31 Maart 2017

Naar aanleiding van zijn 125-jarige bestaan publiceren Panini en Club Brugge samen een Panini-boek over de Brugse geschiedenis. Een absolute primeur. Nooit eerder bracht Panini een boek uit exclusief rond één Belgische Club. Dit unieke boek neemt je mee door het DNA van Blauw-Zwart: De supporters, de hoogtes en laagtes, de Europese successen, de shirts,… Een uniek beeldverhaal over de rijke geschiedenis van Club.

Voor de eerste keer

“Voor de eerste keer in België komt een club uit de Jupiler Pro League met een eigen Panini album in zijn Clubkleuren. Club Brugge doet dit ter ere van zijn 125-jarig bestaan. Panini is heel fier op de samenwerking en het resultaat. Het is zonder twijfel een uniek album dat elke Panini verzamelaar in zijn collectie moet hebben ” aldus Virginie Peres-Vogels, Marketing&Communication Manager van Panini.

Met 52 pagina’s en 272 stickers is het boek het perfecte geschenk voor iedere Club Fan. Over het ontbreken van enkele stickers moet je je ook geen zorgen maken, want alle stickers worden apart meegeleverd met het boek. Het is een eerbetoon aan 125 jaar Club Brugge, met het plezier van het kleven van Panini-stickers. Een echt collector’s item.

Het boek kost €39 en is vanaf vandaag te verkrijgen in onze Clubshop en in alle vestigingen van Standaard Boekhandel. Vanaf maandag 10 april is het te verkrijgen op www.clubshop.be

club 1891

Club 1891

Vanaf dit seizoen starten we met CLUB1891, het nieuwe lidmaatschap van Club Brugge. Als lid van CLUB1891 maak je officieel deel uit van de grootste voetbalfamilie van het land.

Voor de eerste keer

Je krijgt een exclusief CLUB1891-welkomstpakket en een jaar lang tal van voordelen waar enkel de leden van CLUB1891 van kunnen genieten! De CLUB1891 membership kost € 25 en wordt bij aankoop van je abonnement automatisch toegevoegd aan je bestelling. Wil je een CLUB1891 membership zonder abonnement? Dat kan vanaf 8 juli bij de start van de vrije verkoop, zowel online als aan het loket.

Opgelet: vanaf dit seizoen moet je lid zijn van CLUB1891 om een abonnement of losse tickets te kopen.

voordelen
Blauw zwarte familie.
club 1891

Anderlecht - Club Brugg:e 31 maart 2017

Zondag staat voor Club een topmatch op het programma. Blauw-Zwart gaat op bezoek bij Anderlecht en wil daar voor het eerst sinds lang met de drie punten gaan lopen. Lees alle Facts over de wedstrijd hier!

Tegenstander

Voorafgaand aan het duel moesten beide teams nog hun laatste Europese duel van het jaar afwerken. Anderlecht was al zeker van een Europese overwintering, maar kon met minstens een gelijkspel tegen AS Saint-Étienne ook de groepswinst veiligstellen. Dat leek te gaan lukken toen de Roemenen Alexandru Chipciu en Nicolae Stanciu Sporting op een 2-0 ruststand hadden gebracht. De tweede helft liep echter helemaal anders. De Noorse spits Alexander Søderlund bracht met 2 treffers de stand in evenwicht en Kévin Monnet-Paquet keerde de situatie zelfs helemaal om in het voordeel van de Fransen (2-3 eindstand). Geen groepswinst dus voor RSCA, maar het mag maandag 12 december wel naar Nyon voor de loting van de 1/16e finales van de UEFA Europa League. Anderlecht haalde dit seizoen 17 op 24 in eigen huis. Het behaalde overwinningen tegen KV Kortrijk (5-1), Charleroi (3-2), Lokeren (1-0), KV Mechelen (2-0) en Moeskroen (7-0), speelde gelijk tegen AA Gent (2-2) en Oostende (1-1) en verloor verrassend van Westerlo (1-2). Met Lukasz Teodorczyk heeft Sporting de topschutter van de Jupiler Pro League in zijn rangen. De Pool scoorde al 13 keer. Jelle Vossen volgt met 10 treffers op de tweede plaats. 

tegenstander
Club Brugge - Anderlecht op 11 december 2016
wedstrijd
Club Brugge - Anderlecht op 11 december 2016

Wedstrijd

Zondag staat voor de 80ste keer Anderlecht – Club Brugge op het programma. Club en Anderlecht staan op de tweede en derde stek in de competitie en volgen op respectievelijk 1 en 3 punten van Zulte Waregem, dat op 34 punten staat. Het is tevens de match tussen de beste aanval (RSCA met 36 goals) en de beste verdediging (Club met 13 tegengoals). Timmy Simons blaast zondag 40 kaarsjes uit. Een overwinning in het Astridpark staat met stip bovenaan zijn wenslijst. Voorafgaand aan de topper moesten beide teams nog hun laatste Europese duel van het jaar afwerken. Club, dat al uitgeschakeld was voor Europees voetbal na Nieuwjaar, verloor met 0-2 van FC Kopenhagen. De eindstand stond al na een kwartier op het bord. Eerst werd een vrije trap door Brandon Mechele ongelukkig met de schouder in doel gedevieerd. Vervolgens kopte Mathias Jørgensen een hoekschop binnen. Club kon niet meer reageren. Club en Anderlecht spelen voor de 160ste keer tegen elkaar in Eerste Klasse. De 79 vorige duels in Brussel leverden 9 zeges, 24 draws en 46 nederlagen op. 

Loader

/sass/base/atoms/_loader.scss

Molecules

/sass/base/molecules/_##.scss

Tabs

/sass/base/molecules/_tabs.scss

Voorbeschouwing
here the content of 1st tab
here the content of 2nd tab
here the content of 3rd tab
Voorbeschouwing
here the content of 1st tab
here the content of 2nd tab
here the content of 3rd tab

Tabs Bottom

/sass/base/molecules/_tabs.scss

Tab1
Tab1

Dropdown

/sass/base/molecules/_dropdown.scss

A-kern

A-kern

My club Inloggen
NL
A-kern

A-kern

My club Inloggen
NL

Rankings

/sass/base/molecules/_rankings.scss

Klassement Jupiler pro league
M P
1 Zulte Waregem 18 35
1 Zulte Waregem 18 35
1 Zulte Waregem 18 35
1 Zulte Waregem 18 35
1 Zulte Waregem 18 35
1 Zulte Waregem 18 35
1 Zulte Waregem 18 35
Klassement Jupiler pro league
M P
1 Zulte Waregem 18 35
1 Zulte Waregem 18 35
1 Zulte Waregem 18 35
1 Zulte Waregem 18 35
1 Zulte Waregem 18 35
1 Zulte Waregem 18 35
1 Zulte Waregem 18 35

Social Post

/sass/base/molecules/_social-post.scss

Social Feed

/sass/base/molecules/_social-feed.scss

Saldo widget

/sass/base/molecules/_saldo-widget.scss

Casteels Casteels
€ 28
mijn club kaart
Casteels Casteels
€ 28
mijn club kaart

Call To Action Widget

/sass/base/molecules/_cta-widget.scss

Koop je tickets nu online
Koop je tickets nu online

Match Center

/sass/base/molecules/_matchcenter.scss

Matchday Speeldag 7

20:45


Matchday Speeldag 7

87'
2 - 1


Jupiler Pro League
20:45




0 - 0


20:45
  • 12/07/201720:45
  • 12/07/201720:45
  • 12/07/201720:45

Matchday Speeldag 7

20:45


Matchday Speeldag 7

87'
2 - 1


Jupiler Pro League
20:45




0 - 0


20:45
  • 12/07/201720:45
  • 12/07/201720:45
  • 12/07/201720:45

Match TIMELINE

/sass/base/molecules/_match-timeline.scss

within this element is the style attribute with a 'left' property. Give this property a percentage to where the item must be placed on the timeline. On browserwidth 600px this element is not shown.

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

58' VAN RHIJN

Nav

/sass/base/molecules/_nav.scss









Section nav

/sass/base/molecules/_section-nav.scss

A special nav-bar which is not visible on desktop and stays in a row on mobile. Use to navigate the page when there is no longer space for the main content and the sidebars

In order to animate this tabbar and set an active state the class is-active--1 has to change to is-active--2 or is-active--3, this is done on the parent element 'ul'. The number represents which tab is active and will animate to the correct position.

Timeline Event

/sass/base/molecules/_timeline-event.scss

Anderlecht countert er vrolijk op los, maar ook Teodorczyk kan de gelijkmaker niet forceren. Een schot van buiten de baklijn vliegt enkele meters naast het doel. Club kreunt nu onder de paars-witte druk.



rode kaart
Wesley Moraes
Club Brugge


rode kaart
Wesley Moraes
Club Brugge


wissel
Club Brugge
Olivier Deschacht Frank Acheampong


Goal
Ricardo Van Rhijn
Club Brugge
Goal

Anderlecht countert er vrolijk op los, maar ook Teodorczyk kan de gelijkmaker niet forceren. Een schot van buiten de baklijn vliegt enkele meters naast het doel. Club kreunt nu onder de paars-witte druk.



rode kaart
Wesley Moraes
Club Brugge


rode kaart
Wesley Moraes
Club Brugge


wissel
Club Brugge
Olivier Deschacht Frank Acheampong


Goal
Ricardo Van Rhijn
Club Brugge
Goal

Timeline

/sass/base/molecules/_timeline.scss

1

Anderlecht countert er vrolijk op los, maar ook Teodorczyk kan de gelijkmaker niet forceren. Een schot van buiten de baklijn vliegt enkele meters naast het doel. Club kreunt nu onder de paars-witte druk.

9
rode kaart
Wesley Moraes
Club Brugge
40
wissel
Club Brugge
Olivier Deschacht Frank Acheampong
57
Goal
Ricardo Van Rhijn
Club Brugge
Another element can go here
Goal


1994 - 1997

JB Eigenbilzen (jeugd)

1997 - 2000

SK Tongeren (jeugd)

2000 - 2006

Racing Genk (jeugd)

2006 - 2015

Racing Genk - 193(97)

2009 - 2010

Cercle Brugge - 17 (6)

2014 - 2015

Middlesbrough - 38 (8)

2015 - 2015

Burnley - 4 (0)

2015 - ...

Club Brugge - 46 (23)

1

Anderlecht countert er vrolijk op los, maar ook Teodorczyk kan de gelijkmaker niet forceren. Een schot van buiten de baklijn vliegt enkele meters naast het doel. Club kreunt nu onder de paars-witte druk.

9
rode kaart
Wesley Moraes
Club Brugge
40
wissel
Club Brugge
Olivier Deschacht Frank Acheampong
57
Goal
Ricardo Van Rhijn
Club Brugge
Another element can go here
Goal


1994 - 1997

JB Eigenbilzen (jeugd)

1997 - 2000

SK Tongeren (jeugd)

2000 - 2006

Racing Genk (jeugd)

2006 - 2015

Racing Genk - 193(97)

2009 - 2010

Cercle Brugge - 17 (6)

2014 - 2015

Middlesbrough - 38 (8)

2015 - 2015

Burnley - 4 (0)

2015 - ...

Club Brugge - 46 (23)

Player position field

/sass/base/molecules/_player-position-field.scss

Use class "m-player-position-field__player--pos-[x-coordinate]-[y-coordinate]" to position the players on the playing field. The x- and y-coordinate are the percentages of offset from, respectivly, the left side and top side of the playing field.

1
2
5
24
21
6
20
3
25
17
9
1
2
5
24
21
6
20
3
25
17
9

Player block

/sass/base/molecules/_player-block.scss

9
Jelle Vossen
Aanvaller 1,80M 22/03/1989
  • 21 Games
  • 8 assists
  • 12 Goals
  • 1,4K Gespeelde min.


9
Jelle Vossen
9
Jelle Vossen
Aanvaller 1,80M 22/03/1989
  • 21 Games
  • 8 assists
  • 12 Goals
  • 1,4K Gespeelde min.


9
Jelle Vossen

Newsletter widget

/sass/base/molecules/_newsletter-widget.scss

To make it take the dimensions of its container, add the "m-newsletter-widget--fit-container" class to the "m-newsletter-widget" element.

Calendar

/sass/base/molecules/_calendar.scss

Component for displaying upcoming matches, with teams, link to detail-page,

Player of the month widget

/sass/base/molecules/_potm.scss

9
Jelle Vossen
Stats
Jelle Vossen
  • Appearances: 12 (5)
  • Goals/assists: 11 / 5
  • Shots (per game): 8
  • Dribbles (per game): 6.8
  • Pass accuracy: 82%
9
Jelle Vossen
Stats
Jelle Vossen
  • Appearances: 12 (5)
  • Goals/assists: 11 / 5
  • Shots (per game): 8
  • Dribbles (per game): 6.8
  • Pass accuracy: 82%

Sub navigation

/sass/base/molecules/_subnav.scss

The navigation has to stay in the middle, there are 2 side divs that can contain the other side content. If there is no side content or only content on one side, these divs must stay present.

A-kern
Kalender
A-kern
Kalender

Previous matches

/sass/base/molecules/_prev-matches.scss

  • RSC Anderlecht
    RSC Anderlecht
    0 - 0

    Jupiler Pro League
    speeldag 18 · Zondag 11/12/2016

    Club Brugge K.V.
    Club Brugge K.V.
  • RSC Anderlecht
    RSC Anderlecht
    0 - 0

    Jupiler Pro League
    speeldag 18 · Zondag 11/12/2016

    Club Brugge K.V.
    Club Brugge K.V.
  • RSC Anderlecht
    RSC Anderlecht
    0 - 0

    Jupiler Pro League
    speeldag 18 · Zondag 11/12/2016

    Club Brugge K.V.
    Club Brugge K.V.
  • RSC Anderlecht
    RSC Anderlecht
    0 - 0

    Jupiler Pro League
    speeldag 18 · Zondag 11/12/2016

    Club Brugge K.V.
    Club Brugge K.V.

News Items

/sass/base/molecules/_news-items.scss

There are 3 types of news items and they use the modifiers-classes: m-news-item--video, m-news-item--article, m-news-item--image. By adding the modifier-class "m-news-item--x2" to a m-news-item it takes up two columns instead of one.

Algemeen
Zon 09 dec
Algemeen
Zon 09 dec

News

/sass/base/molecules/_news.scss

Match Preview

Kan Club eindelijk nog eens winnen in het Astridpark?

Eigen Redactie • 2 uur geleden
  • Blessure Update: José Izquierdo en Laurens de Bock
  • Interview: Preud'homme blikt vooruit op moeilijke verplaatsing
  • Tickets: Club met 2500 supporters aanwezig voor topper
Match Preview

Kan Club eindelijk nog eens winnen in het Astridpark?

Eigen Redactie • 2 uur geleden
  • Blessure Update: José Izquierdo en Laurens de Bock
  • Interview: Preud'homme blikt vooruit op moeilijke verplaatsing
  • Tickets: Club met 2500 supporters aanwezig voor topper

Social item

/sass/base/molecules/_social-item.scss

Trainingen

/sass/base/molecules/_trainingen.scss

Trainingen

  • Training Test Jan Breydelstadion
  • Training Test Jan Breydelstadion
  • Training Test Jan Breydelstadion
  • Training Test Jan Breydelstadion

Trainingen

  • Training Test Jan Breydelstadion
  • Training Test Jan Breydelstadion
  • Training Test Jan Breydelstadion
  • Training Test Jan Breydelstadion

Breadcrumb

/sass/base/molecules/_breadcrumb.scss

Club Brugge » Nieuws
Club Brugge » Nieuws

Organisms

Side bar

/sass/base/organisms/_sidebar.scss

Register widget - Side bar

/sass/base/organisms/_register.scss

Main menu expanded

/sass/base/organisms/_main-menu.scss /sass/base/molecules/_main-menu-item.scss

This items should be placed in the 'main__center' div above the 'o-main' div. When clicked on the 3 dots in the main navigation this is shown while the main content is hidden.

Social feed

/sass/base/organisms/_social-feed.scss

This is the social feed that is placed in the main center of the page. Not in the sidebars

Footer

/sass/base/organisms/_footer.scss