Connexion

Metronome

.-middle

What is Metronome ?

Metronome is a minimalist CSS (SCSS) Flex grid with media queries mixins for easy and fast web developping.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum nostrum obcaecati, perferendis doloremque debitis iste. Quasi cupiditate eius saepe debitis quibusdam illum beatae. Quae excepturi veniam numquam facilis at hic?

The basics :

<div class="o-row"> <div class="o-col"> </div> </div>

Define widths with classes Ex. "w-1/4"

<div class="o-row"> <div class="o-col w-1/4"> I'm 25% on desktop and 100% on small resolution </div> </div>

Define media queries widths with modifier classes Ex. "-sm-1/3 -xs-1/2"

<div class="o-row"> <div class="o-col w-1/4 -sm-1/3 -xs-1/2"> I'm 25% on desktop and 33% at small resolution and 50% in xsmall resolution. </div> </div>

Default Grid (Without gutter)

<div class="o-row"> <div class="o-col w-1/2"> <div class="o-box"> Two cols 50% </div> </div> <div class="o-col w-1/2"> <div class="o-box"> Two cols 50% </div> </div> </div>
Two cols 50%
Two cols 50%

Grid with gutter

<div class="o-row -gutter"> <div class="o-col w-2/5"> <div class="o-box"> Two cols with gutter 2/5 </div> </div> <div class="o-col w-3/5"> <div class="o-box"> Two cols with gutter 3/5 </div> </div> </div>
Two cols with gutter 40%
Two cols with gutter 60%

Grid with small gutter

<div class="o-row -gutter-sm"> <div class="o-col w-1/3"> <div class="o-box"> Two cols with small gutter 33.333% </div> </div> <div class="o-col w-2/3"> <div class="o-box"> Two cols with small gutter 66.666% </div> </div> </div>
Two cols with small gutter 33.333%
Two cols with small gutter 66.666%

Vertical alignments (.-top .-middle .-bottom)

<div class="o-row -gutter-sm"> <div class="o-col w-1/3"> <div class="o-box"> Two cols with small gutter 33.333% </div> </div> <div class="o-col w-2/3"> <div class="o-box"> Two cols with small gutter 66.666% </div> </div> </div>
.-bottom
.-middle
.-top

Horizontal alignments (.-left .-center .-right)

<div class="o-row -gutter-sm"> <div class="o-col w-1/3 -left -top"> <img src="https://www.salon-emploi.ca/app/uploads/default/stereo-2-350x350.jpg" alt=""> </div> </div>
.-left.-top
.-center.-middle
.-right.-bottom

Mixed alignments (.-left .-center .-right .-top .-middle .-bottom)

<div class="o-row -gutter-sm"> <div class="o-col w-1/3 -right -bottom"> <div class="o-box"> <img src="https://www.salon-emploi.ca/app/uploads/default/stereo-2-350x350.jpg" alt=""> </div> </div> </div>
.-right.-bottom
.-center.-bottom
.-left.-middle

Media queries modifiers

<div class="o-row -gutter-sm"> <div class="o-col w-1/4 -sm-1/3 -xs-1/2"> <div class="o-box"> <img src="https://www.salon-emploi.ca/app/uploads/default/stereo-2-350x350.jpg" alt=""> </div> </div> </div>
.-sm-1/3.-xs-1/2
.-sm-1/3.-xs-1/2
.-sm-1/3.-xs-1/2
.-sm-1/3.-xs-1/2

toot

Choisissez une plage horaire qui vous convient

Aucune plage horaire disponible

Entrez vos informations

{{ day }} {{ date }}
{{ hour }}
*Champ obligatoire
{{ messageError }}

S'inscrire à notre infolettre