Skip to content

Latest commit

 

History

History
98 lines (84 loc) · 3.09 KB

reference.md

File metadata and controls

98 lines (84 loc) · 3.09 KB
Raw

Classes refernces

Typo

the font family per default is Lato

  • .regular : to make text in Regular Font
  • .bold : to make text in Bold Font
  • .light : to make text in Light Font
  • .h1-like : to make text on H1 appearance
  • .h2-like : to make text on H2 appearance
  • .h3-like : to make text on H3 appearance
  • .sub-element : font-size for the sub-elements
  • .sub-element : font-size for the sub-elements

Colors && Themes

  • .bg : neutral background color
  • .gris-bg : gris background color
  • .essentiel : name of color
  • .bleu : name of color
  • .bleu-violet : name of color
  • .bleu-active : name of color
  • .bleu-web : name of color
  • .violet : name of color
  • .green : name of color
  • .red : name of color
  • .yellow : name of color
  • .rose : name of color

for apply a theme you have to add ".theme-NAME_OF_COLOR" in parent Element then add ".background" or ".shadow" to color the elements according to the chosen theme

  • .border : to add neutral border
  • .border-dashed : to add neutral border dashed

Elements

  • .btn : to convert a Element to aa Bouton
  • .overlay : for a modal / popup Use
  • .overlay-black : for a black background
  • .popup : for the Popup Element

Utils

  • .left : add Float left to the element
  • .right : add Float right to the element
  • .clr : to remove Float Effect
  • .absolute : for absolute position
  • .relative : for relative position
  • .fixed : for fixed position
  • .block : convert to Block Element
  • .inline-block : convert to Inline Block Element
  • .none : hide Element
  • .uppercase : transform text to uppercase
  • .capitalize : transform text to capitalize
  • .align-center : align Inline Element in center
  • .align-left : align Inline Element in left
  • .align-right : align Inline Element in right
  • .align-justify : align text in justify
  • .center-auto : center an element horizontally

spacing

  • .top5 -> 10 -> 15 -> 20 -> 25 -> 30 : adding margin top by 5 -> 10 -> 15 -> 20 -> 25 -> 30 px
  • .bottom5 -> 10 -> 15 -> 20 -> 25 -> 30 : adding margin bottom by 5 -> 10 -> 15 -> 20 -> 25 -> 30 px
  • .box5 -> 10 -> 15 -> 20 -> 25 -> 30 : add padding to an element by 5 -> 10 -> 15 -> 20 -> 25 -> 30px
  • .boxHor5 -> 10 -> 15 -> 20 -> 25 -> 30 : add padding in left and right to an element by 5 -> 10 -> 15 -> 20 -> 25 -> 30px
  • .boxVer5 -> 10 -> 15 -> 20 -> 25 -> 30 : add padding in top and bottom to an element by 5 -> 10 -> 15 -> 20 -> 25 -> 30px

Layout

  • .animate : add Support to CSS transition
  • .container : div Container of Page

Grid

the grid is based on 12 columns

  • .row : parent of columns

  • .row.gutter-15 : for a spacing of 15px between the columns

  • .row.gutter-20 : for a spacing of 20px between the columns

  • .row.gutter-30 : for a spacing of 30px between the columns

  • .last-col : to clean spacing and alignment in the last Column from a Grid

  • .col-1

  • .col-2

  • .col-3

  • .col-4

  • .col-5

  • .col-6

  • .col-7

  • .col-8

  • .col-9

  • .col-10

  • .col-11

  • .col-12

Components

  • .message : for an Message Component
  • .success ! for un success Message
  • .warning ! for un warning Message
  • .info ! for un Info Message
  • .alert ! for un Error Message
  • .navigation : for an Menu Component