JavaScript seems to be disabled in your browser. For the best experience on our site, be sure to turn on Javascript in your browser.

What do classes do?

font-[size]

font-xs

- desktop [

d-

]:

font-size: 8px

, mobile [

m-

]:

font-size: calc(9px + 8 * ((100vw - 500px) / 1500));

~

[9px and higher]

font-s

- desktop [

d-

]:

font-size: 10px

, mobile [

m-

]:

font-size: calc(10px + 8 * ((100vw - 500px) / 1500));

~

[10px and higher]

font-m

- desktop [

d-

]:

font-size: 12px

, mobile [

m-

]:

font-size: calc(13px + 8 * ((100vw - 500px) / 1500));

~

[13px and higher]

font-l

- desktop [

d-

]:

font-size: 15px

, mobile [

m-

]:

font-size: calc(20px + 8 * ((100vw - 500px) / 1500));

~

[20px and higher]

font-xl

- desktop [

d-

]:

font-size: 20px

, mobile [

m-

]:

font-size: calc(18px + 8 * ((100vw - 500px) / 1500));

~

[18px and higher]

font-xxl

- desktop [

d-

]:

font-size: 25px

, mobile [

m-

]:

font-size: calc(25px + 8 * ((100vw - 500px) / 1500));

~

[25px and higher]

font-xxxl

- desktop [

d-

]:

font-size: 30px

, mobile [

m-

]:

font-size: calc(30px + 8 * ((100vw - 500px) / 1500));

~

[30px and higher]

font-xxxxl

- desktop [

d-

]:

font-size: 35px

, mobile [

m-

]:

font-size: calc(35px + 8 * ((100vw - 500px) / 1500));

~

[35px and higher]

font-huge

- desktop [

d-

]:

font-size: 40px

, mobile [

m-

]:

font-size: calc(40px + 8 * ((100vw - 500px) / 1500));

~

[40px and higher]

margin/padding-[size]

margin/padding-none

- desktop [

d-

]:

margin: 0

, mobile [

m-

]:

margin: 0

margin/padding-xs

- desktop [

d-

]:

margin: 5px

, mobile [

m-

]:

margin: 5px

margin/padding-s

- desktop [

d-

]:

margin: 8px

, mobile [

m-

]:

margin: 8px

margin/padding-m

- desktop [

d-

]:

margin: 10px

, mobile [

m-

]:

margin: 10px

margin/padding-l

- desktop [

d-

]:

margin: 15px

, mobile [

m-

]:

margin: 15px

margin/padding-xl

- desktop [

d-

]:

margin: 25px

, mobile [

m-

]:

margin: 25px

margin/padding-xxl

- desktop [

d-

]:

margin: 35px

, mobile [

m-

]:

margin: 35px

margin/padding-xxxl

- desktop [

d-

]:

margin: 40px

, mobile [

m-

]:

margin: 40px

margin/padding-huge

- desktop [

d-

]:

margin: 80px

, mobile [

m-

]:

margin: 80px

color-[color]

color-grey

- beer, wine, cheese, cigar, flower, landing

color-red

- beer, wine, cheese, cigar, flower, landing

color-black

- beer, wine, cheese, cigar, flower, landing

color-brown

- beer, wine, cheese, cigar, flower, landing

color-default

- beer, wine, cheese, cigar, flower, landing

color-white

- beer, wine, cheese, cigar, flower, landing

color-green

- beer , wine , cheese , cigar , flower , landing

There are 2 types full-width elements!

Please, dont use them together!

<div class="block interruption"></div>

- do not do like this!

<div class="block"></div>

<div class="interruption"></div>

There are 4 types

<div class="block"></div>

!

<div class="block green"></div>

<div class="block milk"></div>

<div class="block grey"></div>

<div class="block light-grey"></div>

There are 3 types

<div class="interruption"></div>

!

<div class="block green"></div>

<div class="block green"></div>

<div class="block green"></div>

You can control

<div class="interruption"></div>

top & bottom cutouts!

<div class="interruption milk bottom-milk"></div>

<div class="interruption milk top-milk"></div>

Note!

row

and

col

elements should only be used inside of

<div class="block"></div>

or any other full width element.

Main rule!

<div class="col-X"></div>

should always be surrounded with

<div class="row"></div>

!
Note! border colors are for style-guide module only!

<div class="col-6"></div>

inside of

<div class="row"></div>

inside of

<div class="block green"></div>

<div class="col-6"></div>

inside of

<div class="row"></div>

inside of

<div class="interruption"></div>

<div class="col-6"></div>

inside of

<div class="row"></div>

inside of

<div class="interruption"></div>

We use

row

and

col

system like a bootstrap does!

Main rule!

<div class="col-X"></div>

should always be surrounded with

<div class="row"></div>

!
Note! border colors are for style-guide module only!

<div class="col-6"></div>

inside of

<div class="row"></div>

<div class="col-6"></div>

inside of

<div class="row"></div>

(resize to test) You can separate mobile and desktop layots:

Add

-m

after

col

(you will get something like this:

col-m-x

) - this will make you layout work on mobile only

<div class="col-m-6"></div>

<div class="col-m-3 pad-m-3"></div>

(resize to test) You can make elements

inline-block

by adding class

is-inline

Remember, if you are styling mobile, and need smae element to be

inline-block

, add class

is-inline-m

<div class="is-inline"></div>

<div class="is-inline is-inline-m"></div>

<div class="is-inline-m"></div>

You can add blank spaces between

cols

, by using

pads

<div class="col-6 pad-6"></div>

You can verticaly position

cols

inside of

row

!

As you may see,

cols

are by default centered horizontally in the middle.

<div class="col-6 text-top"></div>

<div class="col-3 text-bottom"></div>

<div class="col-2 text-middle"></div>

<div class="col-1"></div>

You can horizontally align text (or other inline content) inside of

col

!

<div class="col-4 text-center"></div>

<div class="col-4 text-right"></div>

<div class="col-4 text-left""></div>

(resize to test) Text align on mobile and desktop is separated!

<div class="col-4 m-text-right"></div>

<div class="col-4 text-right"></div>

This is base-template style guide for a Monthlyclubs 2 project.

Simple content block looks like this:

You should always wrap your content into

col

then in

row

then in

block

!

<div class="block milk">
    <div class="row">
        <div class="col-12 text-top">
            //Content goes here
        </div>
    </div>
</div>

Put your content here.

There are so-called hero-blocks (all pages starts with this block)

<div class="block with-breadcrumb milk">
    <div class="row">
        <div class="col-8 text-top">
            <h2 class="color-brown">//Content goes here</h2>
            <p class="margin-top-s">//Content goes here</p>
        </div>
        <img class="full-height-bg" src="//your image src">
    </div>
</div>

Note: big whitespace in block's head is reserved for breadcrumbs, class

with-breadcrumb

is responsible for this.

Note: you can align image vertically in hero-block by using

d-padding-vertical-X

, and from the right side using

d-padding-right-X

on the

full-height-bg

image.

You can align image with a text like this

Image on the left side:

<div class="row">
     <img class="col-3 text-middle" src="https://cdn-prelive.winemonthclub.com/media/wysiwyg/selection-process/wine-notes-1.jpg">
         <div class="col-9 text-middle">
         <div class="d-padding-left-l">
            <h3>//Content goes here</h3>
            <p>//Content goes here</p>
        </div>
    </div>
</div>

Image on the right side:

<div class="row">
    <div class="col-9 text-middle">
         <div class="d-padding-right-l">
            <h3>//Content goes here</h3>
            <p>//Content goes here</p>
        </div>
    </div>
    <img class="col-3 text-middle" src="https://cdn-prelive.winemonthclub.com/media/wysiwyg/selection-process/wine-notes-1.jpg">
</div>

Note you can margin (add a padding between the rows) by adding

d-margin-vertical-X

class to the

row

.

Your paragraph heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Your paragraph heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You can split content in two rows

<div class="block">
    <div class="row">
        <div class="col-6 text-top">
            <div class="d-padding-right-l">
                <h3>//Content goes here</h3>
                <p>//Content goes here</p>

                <h3 class="margin-top-l">//Content goes here</h3>
                <p>//Content goes here</p>
            </div>
        </div>
        <div class="col-6 text-top">
            <div class="d-padding-left-l">
                <h3>//Content goes here</h3>
                <p>//Content goes here</p>
                <p class="margin-top-s">//Content goes here</p>

                <h3 class="margin-top-l">//Content goes here</h3>
                <p>//Content goes here</p>
                <a class="margin-top-s">//Content goes here</a>
        </div>
        </div>
    </div>
</div>

First paragraph heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Maybe some link?

Second paragraph heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Third paragraph heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

First point. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Second point. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Last point

Fourth paragraph heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cards

<div class="card">

Cards can be

brown

and

green

<div class="card brown">

<div class="card green">

(resize to test) Cards which represent product details

Inside of a

<div class="card">

, there should be:

1.

<h4> inside of <div class="card-heading">

2.

<div class="card-image">

3.

<div class="card-content">

4.

<div class="card-bottom">

<h4> inside of <div class="card-heading">

<div class="card-image">

<div class="card-content">

<div class="card-bottom">

Headings, heading, headings!

Headings:

h1

,

h2

,

h3

,

h4

,

h5

Note:

h1

has preset margins, all other do not! Please add margin yourself using margins and paddings

<h1> Heading

<h2> Heading

<h3> Heading

<h4> Heading

<h5> Heading

Some headings

color

is dependant on

block

color!

<h2> Heading inside of milk block

<h4> Heading inside of milk block

<h2> Heading inside of green block

<h4> Heading inside of green block

You can change any text element color or style (

,

span

,

label

,

h1

,

h2

,

h3

,

h4

,

h5

)!

<p> Paragraph

<p> Paragraph with

color-black

class applied

<p> Paragraph with

color-red

class applied

<p> Paragraph with

color-grey

class applied

<p> Paragraph with

color-brown

class applied

<p> Paragraph with

color-green

class applied

<p> Paragraph with

color-white

class applied

<p> Paragraph

<p> Paragraph with

font-italic

class applied

<p> Paragraph with

font-bol

d class applied

<p> Paragraph with

font-semibold

class applied

<p> Paragraph with

curved

class applied

You can change any text element font-size (

,

span

,

label

,

h1

,

h2

,

h3

,

h4

,

h5

)!

<p> Paragraph

applied

<p> Paragraph with

font-xs

class applied

<p> Paragraph with

font-s

class applied

<p> Paragraph with

font-m

class applied

<p> Paragraph with

font-l

class applied

<p> Paragraph with

font-xl

class applied

<p> Paragraph with

font-xxl

class applied

<p> Paragraph with

font-xxxl

class applied

<p> Paragraph with

font-xxxxl

class applied

(resize to test) You can change font-size for mobile and desktop separately!

Note, that mobile font-sizes are calculated by formula (to stay responsive), so do not set font-size manually (in CSS)!

<p> Paragraph with

d-font-xxxxl m-font-xs

class applied

<p> Paragraph with

d-font-xxxl m-font-s

class applied

<p> Paragraph with

d-font-xxl m-font-m

class applied

<p> Paragraph with

m-font-xl d-font-xs

class applied

<p> Paragraph with

m-font-xxl d-font-s

class applied

<p> Paragraph with

m-font-xxxl d-font-m

class applied

<p> Paragraph with

m-font-xxxxl d-font-l

class applied

Lists (

<li>

inside of

<ul>

)

You can distance

<li>

one from another by adding

margin-vertical

class.

Simple
```
<li>
```
Simple
```
<li>
```
```
<li>
```
with class
```
margin-vertical-l
```
applied.
Simple
```
<li>
```
Simple
```
<li>
```
```
<li>
```
with class
```
margin-vertical-xxxl
```
applied.
Simple
```
<li>
```
, but very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long one.
Simple
```
<li>
```
Simple
```
<li>
```
, but very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very very long one.

Blockqoutes (

<blockquote>

)

You can distance

<blockquote>

text from icon by adding

margin-top

class to it.

I am

<blockquote>

.

I am
<blockquote>
with class
padding-top-xxl
applied.

Buttons (

<button>

,

<a class="button">

,

<input type="submit">

)

You can adjust

<button>

,

<a class="button">

,

<input type="submit">

padding by adding

padding-vertical

or

padding-horizontal

class to it.

<a> with class: button green flat

padding-horizontal-huge

Checkbox (

<input type="checkbox">

)

We use:

<input id="checkbox" type="checkbox">

together with

<label for="checkbox">

Distance between checkbox and it's label can be adjusted by adding class

margin-right

to

checkbox

Radio (

<input type="radio">

)

We use:

<input id="radio" type="radio">

together with

<label for="radio">

Text (

<input type="text/email/password">

)

You can add padding and margin to any element!

There are

margin/padding-left-X

,

margin/padding-right-X

,

margin/padding-top-X

,

margin/padding-bottom-X

You can combine this classes, to achieve better look.

<div class="margin-top-l"></div>

<div class="padding-top-l"></div>

<div class="margin-left-m"></div>

<div class="padding-right-xxl"></div>

<div class="margin-bottom-xxxl"></div>

<div class="padding-bottom-xxxl"></div>

You can add vertical and horizontal margins/paddings!

There are

margin/padding-vertical-X

,

margin/padding-horizontal-X

<div class="margin-top-l"></div>

<div class="padding-top-l"></div>

<div class="margin-left-m"></div>

<div class="padding-right-xxl"></div>

<div class="margin-bottom-xxxl"></div>

<div class="padding-bottom-xxxl"></div>

(resize to test) You can separate mobile and desktop margins/paddings!

Add

d-

for desktop-only, or

m-

for mobile-only.
You can combine this classes to have element appearing different on mobile and desktop

<div class="d-margin-top-xxxl"></div>

<div class="m-margin-top-xxxl"></div>

Please stand by...