Global

Naming convention

  • Utility classes: .u-class
  • Components: .component, .otherComponent, .component-subcomponent
  • Variations: .component--variation, .component--otherVariation
  • States: .component.is-state, .component.has-state
  • Responsive: .breakpoint_class, .breakpoint_u-class
  • Javascript only: .js-javascriptOnly

Note: it is possible for components to solely exist in a variegated form.

Responsive

Mobile first approach: the smaller breakpoints impact the bigger sizes

  • sm: 576px
  • md: 768px
  • lg: 992px
  • xl: 1200px

Spacing

All the UI elements are defined without any pre-established spacing. It should be defined on a case by case scenario using the utilities, or by creating specific layout classes, like layout--document, that have an wide effect on its whole content.

Colors

Rely on a specific set of colors to preserve coherence in design.

Color palette

Palette1
#2660a4
Palette2
#4b3f72
Palette3
#b31b34
Palette4
#f9a03f
Palette5
#5DD9C1
Palette1-1
#618bbc
Palette1-2
#1c4678
Palette2-1
#6b618b
Palette2-2
#372e53
Palette3-1
#c04458
Palette3-2
#721222
Palette4-1
#fab973
Palette4-2
#b6752e
Palette5-1
#89E3D1
Palette5-2
#449E8D

Greyscale

Palette-g-1
#f5f6f6
Palette-g-2
#d9dbdb
Palette-g-3
#bcc1c0
Palette-g-4
#979e9d
Palette-g-5
#616564
Palette-g-6
#373A3A
Palette-g-7
#0e0f0f

Theme color helpers

Primary
#4b3f72
Secondary
#5DD9C1
Tertiary
#b31b34

Context color helpers

Info
#2660a4
Success
#f9a03f
Danger
#b31b34

Greyscale color helpers

White
#f5f6f6
Grey
#979e9d
Black
#0e0f0f

Typography

Standardize the use of text.

Font families

Headers use the font families: Ubuntu, Fira Sans, Helvetica Neue

Whereas the rest of the body use the font families: Source Sans Pro, Roboto, Helvetica Neue .

Headings

Placeholder text sure is a nice concept

Placeholder text sure is a nice concept

Placeholder text sure is a nice concept

Placeholder text sure is a nice concept

Placeholder text sure is a nice concept
 
<h1>Placeholder text sure is a nice concept</h1>
<div class="h--2">Placeholder text sure is a nice concept</div>
<p class="h--3">Placeholder text sure is a nice concept</p>
<h1 class="h--4">Placeholder text sure is a nice concept</h1>
<h5>Placeholder text sure is a nice concept</h5>

Paragraphs

In computer programming, a placeholder is a character, word, or string of characters that may be used to take up space until such a time that the space is needed.

For example, a programmer may know that she needs a certain number of values or variables, but doesn't yet know what to input. She can use a placeholder as a temporary solution until a proper value or variable can be assigned.
 
<p>In computer programming, a placeholder is...</p>
<div class="p">For example, a programmer...</div>

Lists

  • Liste 1
  • Liste 2
  • Liste 3
  • Liste 4
  • Liste 1
  • Liste 2
  • Liste 3
  • Liste 4
 
<ul>
	<li>Liste 1</li>
	...
</ul>
<ul class="ol">
	<li>Liste 1</li>
	...
</ul>

Icons

Use of the Fontawesome font icon library, modified for the needs of style consistency

... 
<i class="icon icon--user"></i>

Buttons

Default buttons

 
<button class="btn">Button</button>
<button class="btn is-selected">Button selected</button>
<button class="btn is-disabled">Button disabled</button>

Alternative buttons

 
<button class="btn btn--alt">Button</button>
<button class="btn btn--alt is-selected">Button selected</button>
<button class="btn btn--alt is-disabled">Button disabled</button>

Success buttons

 
<button class="btn btn--success">Button</button>
<button class="btn btn--success is-selected">Button selected</button>
<button class="btn btn--success is-disabled">Button disabled</button>

Danger buttons

 
<button class="btn btn--danger">Button</button>
<button class="btn btn--danger is-selected">Button selected</button>
<button class="btn btn--danger is-disabled">Button disabled</button>

Simple buttons

 
<button class="btn btn--simple">Button</button>
<button class="btn btn--simple is-selected">Button selected</button>
<button class="btn btn--simple is-disabled">Button disabled</button>

Icon buttons

 
<button class="btn btn--icon"><i class="icon icon--user"></i></button>
<button class="btn btn--icon is-selected"><i class="icon icon--user"></i></button>
<button class="btn btn--icon is-disabled"><i class="icon icon--user"></i></button>

Themes

Themes are global color combinations that fit well together. They are meant to modify the behavior of multiple elements, color-wise.

Theme primary

Theme primary

Tattoo savant silent construct franchise shanty town garage. Weathered geodesic girl warehouse youtube industrial grade vinyl math-smart-cardboard stimulate decay artisanal. Shanty town tank-traps urban city BASE jump advert denim post. Vehicle refrigerator neon papier-mache city RAF bridge meta.

 
<div class="theme--primary"></div>

Theme secondary

Theme secondary

Shrine Legba denim girl shoes table long-chain hydrocarbons-ware Chiba. Systema disposable digital computer city kanji meta. Bridge Tokyo sub-orbital Legba boat tanto woman table voodoo god face forwards vinyl physical courier. Augmented reality render-farm stimulate otaku crypto-rain artisanal silent.

 
<div class="theme--secondary"></div>

Theme tertiary

Theme tertiary

Shrine Legba denim girl shoes table long-chain hydrocarbons-ware Chiba. Systema disposable digital computer city kanji meta. Bridge Tokyo sub-orbital Legba boat tanto woman table voodoo god face forwards vinyl physical courier. Augmented reality render-farm stimulate otaku crypto-rain artisanal silent.

 
<div class="theme--tertiary"></div>

Theme white

Theme white

Tokyo papier-mache city dissident dolphin media warehouse A.I.. Realism warehouse neon weathered refrigerator numinous tiger-team sprawl Shibuya dolphin Legba BASE jump systema post. Tiger-team sensory vinyl apophenia pistol otaku bomb bridge tanto geodesic. Chrome cardboard hotdog courier bomb face.

 
<div class="theme--white"></div>

Theme grey

Theme grey

Render-farm Chiba sign dissident warehouse concrete cardboard uplink tattoo decay sentient 8-bit. RAF A.I. sprawl city nodality geodesic into courier human crypto-military-grade franchise towards. Monofilament nano-saturation point chrome towards RAF lights-space carbon. Advert stimulate vinyl towards sensory franchise network.

 
<div class="theme--grey"></div>

Theme black

Theme black

Render-farm Chiba sign dissident warehouse concrete cardboard uplink tattoo decay sentient 8-bit. RAF A.I. sprawl city nodality geodesic into courier human crypto-military-grade franchise towards. Monofilament nano-saturation point chrome towards RAF lights-space carbon. Advert stimulate vinyl towards sensory franchise network.

 
<div class="theme--black"></div>

Layouts

Define how the content will be organized.

Grid

Simple grid system, using flexbox. Doesn't add any padding.

col
col
col
col
col
col
col
col
col
col
col
 
<div class="layout--grid">
	<div class="u-w-1/3"></div>
	<div class="u-w-1/3"></div>
	<div class="u-w-1/3"></div>
</div>

Document

Organize a text document, with standard formatting.

Titre de document

Sous-titre

Dead drugs fetishism engine augmented reality Tokyo lights car. Sunglasses film man carbon claymore mine car A.I. footage city. Neural drone savant skyscraper motion wristwatch euro-pop plastic sensory. Table 3D-printed jeans tube rain-space smart-semiotics pistol nodality wonton soup dome rebar.

Wonton soup table Legba vinyl urban denim Kowloon systemic. Into sunglasses singularity systemic wristwatch urban dolphin. Fetishism office human DIY assassin numinous wristwatch cyber-girl modem. Math-film media sensory chrome advert numinous free-market silent papier-mache San Francisco range-rover tower military-grade crypto. Beef noodles tank-traps physical tube convenience store jeans wonton soup apophenia. Engine shrine disposable woman cartel car artisanal rifle math-youtube A.I. 3D-printed wonton soup tanto BASE jump Tokyo.

 
<div class="layout--document">
	<h1>Titre de document</h1>
	<h2>Sous-titre</h2>
	<p>Dead drugs fetishism engine augmented reality Tokyo lights car. Sunglasses film...</p>
	<p>Wonton soup table Legba vinyl urban denim Kowloon...</p>
</div>

Components

Groups of UI atomic elements.

Card

A card
 
<div class="card">A card</div>

Dropdown

Work in progress

Form

Work in progress

Message

Work in progress

Modal

Work in progress

Navigation

Work in progress

Tooltip

Work in progress