CSS API documentation

Intro
Typography
Display
Margin / Padding
Button
Layouts

Intro

The class attribute allows you to style items within a HTML page. You can use the same class attribute many times within a HTML file.

This is composed of two CSS classes.You can add a CSS class by putting a space between each classes.

Code:

<span class=”api__font-medium api__text-italic”>Lorem ipsum dolor sit amet.</span>

Typography

Fonts

To set the font we want to use, we define the class api__font-<size>.

Code:

<span class=”api__font-tiny”>Lorem ipsum dolor sit amet.</span>

Example:

api__font-huge
api__font-big
api__font-medium
api__font-standard
api__font-small
api__font-tiny

Font weight

To set the weight we want to use, we define the class api__weight-<weight>.

Code:

<span class=”api__weight-light”>Lorem ipsum dolor sit amet.</span>

Example:

api__weight-extrabold (api__weight-black can be used too.)
api__weight-bold
api__weight-medium (api__weight-semibold can be used too.)
api__weight-regular (api__weight-normal can be used too.)
api__weight-light
api__weight-thin

Text decoration

To use a text decoration, we use it like this api__text-<text decoration name>.

Code:

<span class=”api__text-underline api__text-italic”>Lorem ipsum dolor sit amet.</span>

Example:

api__text-underline
api__text-italic
api__text-center
api__text-left
api__text-right
api__text-justify : Lorem ipsum dolor sit amet, consectetur adipisicing 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.

There is also a class to vertically center inside the parent api__text-vertical-centered.

Display

This class attribute allows you to put the tag in display: block or display: inline-block;

When the class api__display-inlineBlock is applied, the width of the tag will take the width of its content.

When the class api__display-block is applied, the width of the tag will take 100 % of the parent, if there is no width defined

Code:

<span class=”api__display-inlineBlock”>Lorem ipsum dolor sit amet.</span>

<span class=”api__display-block”>Lorem ipsum dolor sit amet.</span>

Code:

Lorem ipsum dolor sit amet.

Margin / Padding

Margin

To set a margin you have to choose between horizontal or vertical margin, choose the size of the margin between our generic sizes, and the class will be api__margin-<horizontal/vertical><size>.

Code:

<span class=”api__margin-horizontal-medium”>Lorem ipsum dolor sit amet.</span>

Example:

api__margin-horizontal-huge

api__margin-horizontal-big

api__margin-horizontal-medium

api__margin-horizontal-standard

api__margin-horizontal-small

api__margin-horizontal-tiny

Margin Center

For a display with a margin auto horizontally centered, it will be api__margin-horizontal-center.

For this one, we need to set a real width, or else it does not works (be careful the size need to be able to be viewable on mobile devices)

Code:

<div style="width:160px;" class="api__margin-horizontal-center api__text-center">api__margin-horizontal-center</div>

Example:

api__margin-horizontal-center

Padding

To set a padding you have to choose between horizontal or vertical margin, choose the size of the margin between our generic sizes, and the class will be api__<horizontal/vertical>-padding-<size>.

The padding will always be inside

Code:

<span class=”api__horizontal-padding-inside-medium”>Lorem ipsum dolor sit amet.</span>

Example:

api__horizontal-padding-inside-huge
api__horizontal-padding-inside-big
api__horizontal-padding-inside-medium
api__horizontal-padding-inside-standard
api__horizontal-padding-inside-small
api__horizontal-padding-inside-tiny

Button

Layouts

Social bar
Classic
Mono
Hero
Double
Triple
Product
List

Social bar

The Social bar layout .

Preview of the Social bar layout

Code:

<svg xmlns="http://www.w3.org/2000/svg"width="30"height="30"viewBox="0 0 30 30"enable-background="new 0 0 30 30"><path d="M16.8 10c0-.7.5-.9.8-.9h2v-3.1h-2.8c-3.1 0-3.8 2.3-3.8 3.8v2.1h-1.8v3.1h1.8v9h3.7v-9h2.5l.3-3.2h-2.8v-1.8z"/> <svg/>

</li>

</li>

</ul>

</div>

Classic

The classic layout.

Preview of the classic layout

Code:

</div>

</div>

Mono

The mono layout is displayed vertically on one column.

Preview of the mono layout

Code:

</div>

Hero

The hero is the big banner with a content displayed in top center.

For the hero, i have a particular CSS class named api__gradient-up-down, this gradient as the name speaks for himself set a gradient from up to down, for now the color cannot be set.

Preview of the hero layout

Code:

<body>

</div>

</body>

Double

The double layout is displayed vertically on two columns.

Preview of the double layout

Code:

</div>

</div>

Triple

The triple layout is displayed vertically on three columns.

CAREFUL : If one column has less content than another, on tablet we can have a white space between contents. To avoid this, if possible, we need to put the column with less content as the third column.

Preview of the triple layout

Code:

</div>

</div>

</div>

Product

The product layout is designed to show a product and some thumbnails.

Preview of the product layout

Preview of the product layout with thumbnails

Code:

</div>

</div>

<span>

</div>

</div>

Here the code for the thumbnails:

Code:

</li>

</li>

</ul>

</div>

List

The list layout is displayed on 3 columns.

Preview of the list layout

Code:

</div>

</div>

</div>