Couleurs
Couleurs du site
Typography
Les polices
Les couleurs
( @color3;)
Les titres
Niveau | Classe CSS | Description |
---|---|---|
Ceci est un H1 |
H1 | |
Ceci est un H2 |
H2 | |
Ceci est un H3 |
H3 | |
Ceci est un H4 |
H4 | |
Ceci est un H5 |
H5 | |
Ceci est un H6 |
H6 |
Les listes
Markup | Classe CSS | Description |
---|---|---|
|
Liste standard | |
|
.bullets-none |
Liste sans bullets |
Layout
Accès rapide
Markup | Classe CSS | Description |
---|---|---|
.left
|
.left | left |
.right
|
.right | right |
.hidden | hidden | |
.alignleft
|
.alignleft | alignleft |
.aligncenter
|
.aligncenter | aligncenter |
.alignright
|
.alignright | alignright |
.margin-top-standard
|
.margin-top-standard | margin-top-standard |
.margin-right-standard
|
.margin-right-standard | margin-right-standard |
.margin-bottom-standard
|
.margin-bottom-standard | margin-bottom-standard |
.margin-left-standard
|
.margin-left-standard | margin-left-standard |
.padding-top-standard
|
.padding-top-standard | padding-top-standard |
.padding-right-standard
|
.padding-right-standard | padding-right-standard |
.padding-bottom-standard
|
.padding-bottom-standard | padding-bottom-standard |
.padding-left-standard
|
.padding-left-standard | padding-left-standard |
.padding-top-none
|
.padding-top-none | padding-top-none |
.padding-right-none
|
.padding-right-none | padding-right-none |
.padding-bottom-none
|
.padding-bottom-none | padding-bottom-none |
.padding-left-none
|
.padding-left-none | padding-left-none |
.margin-top-none
|
.margin-top-none | margin-top-none |
.margin-right-none
|
.margin-right-none | margin-right-none |
.margin-bottom-none
|
.margin-bottom-none | margin-bottom-none |
.margin-left-none
|
.margin-left-none | margin-left-none |
Wrappers
Conteneurs
Colored Backgrounds
Imaged Backgrounds
Grille Collection
Grille Standard
Item description
Item description
Item description
Item description
Item description
Item description
Grille Standard avec background de couleur
Item description
Item description
Item description
Item description
Item description
Item description
grid-contains-2
Item description
Item description
grid-contains-3
grid-contains-4
Item description
Item description
Item description
Item description
grid-contains-5
Item description
Item description
Item description
Item description
Item description
grid-contains-6
Item description
Item description
Item description
Item description
Item description
Item description
has-two-cols-25
Item description
Item description
has-two-cols-33
Item description
Item description
has-two-cols-50
Item description
Item description
has-two-cols-66
Item description
Item description
has-two-cols-75
Item description
Item description
text-colonnes-x2
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. 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.
text-colonnes-x3
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. 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. 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.
text-colonnes-x4
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. 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. 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. 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.
Liste Collection
Liste Standard
Formulaires
Ui Elements
Les icônes
Comment créer un police d’icônes pour votre projet? Voir la documentation
Icône | class= » » |
---|---|
.icon-twitter |
|
.icon-facebook |
|
.icon-arrow-down |
|
.icon-arrow-left |
|
.icon-arrow-right |
|
.icon-arrow-up |
|
.icon-plus |
|
.icon-minus |
|
.icon-menu |
|
.icon-search |
|
.icon-cloud |
|
.icon-fog |
|
.icon-ice |
|
.icon-rain |
|
.icon-rain-heavy |
|
.icon-snow |
|
.icon-snow-heavy |
|
.icon-storm |
|
.icon-sun |
|
.icon-sun-cloud |
|
.icon-cross |
|
.icon-location |
|
.icon-informations |
|
.icon-lock |
|
.icon-unlock |
|
.icon-google-plus |
|
.icon-instagram |
|
.icon-googleplus |
|
.icon-clip |
|
.icon-photo |
|
.icon-video |
|
.icon-news |
|
.icon-megaphone |
|
.icon-calendar |
|
.icon-youtube |
|
.icon-clientele |
|
.icon-economie |
|
.icon-frequentation |
|
.icon-hebergements |
Les styles de notifications
Notifications | class= » » | Description |
---|---|---|
Ceci est une info |
noeNotification info |
Message d’information |
Ceci est un succès |
noeNotification success |
Message d’information erronée |
Ceci est une erreur |
noeNotification error |
Message d’information validée |
Labels et badges
Notifications | class= » » | Description |
---|---|---|
Pastille | label |
Pastille par defaut |
Pastille | label info |
Pastille d’info |
Pastille | label success |
Pastille de succès |
Pastille | label error |
Pastille d’erreur |
1 | badge |
Badge par defaut |
2 | badge info |
Badge d’info |
10 | badge success |
Badge de succès |
54 | badge error |
Badge d’erreur |
Les onglets
Le js et la css des onglets sont inclus de base. Pour le markup, se référrer au gist dans gistBox: https://gist.github.com/NOEinteractive/ce48b5d55174f75f2285
Les tableaux
Heading | Heading | Heading |
---|---|---|
Content | Content | Content |
Content | Content | Content |
Footer | Footer | Footer |
Autres Elements
Element | class= | Description |
---|---|---|
Loading |
loader |
Loader |
caret |
Loader | |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
lettrine |
Lettrine |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Blockquote | |
Test fancy default | fancybox |
Default FancyBox width: 960px; height: 100% |
Test fancy full screen | fancybox fancy-full |
FancyBox full screen |
Test fancy modal | fancybox fancy-modal |
FancyBox modal |