Style Guide

Elements de design

Couleurs
Typographie
Icones

Couleurs

Palette utilisée

@color1
#0D3D63

@color2
#33b189

@color3
#f62947

@color4
#f79f03

@color5
#0D3D63

@color6
#999

@color7
#727272

@color8
#cdcdcd

Typographie

Les polices

.font1: The quick brown fox jumps over the lazy dog

.font2: The quick brown fox jumps over the lazy dog

.font-smooth: The quick brown fox jumps over the lazy dog

Les couleurs

@color-titres
black;

@color-chapo
gray;

@color-body
gray;

@color-lien
#0D3D63;
(@color1;)

@color-lien-hover
#33b189;
(@color2;)

Les titres

Niveau	Classe CSS	Description
Ceci est un H1	`.h1`	H1 (la classe du meme nom existe aussi)
Ceci est un H2	`.h2`	H2 (la classe du meme nom existe aussi)
Ceci est un H3	`.h3`	H3 (la classe du meme nom existe aussi)
Ceci est un H4	`.h4`	H4 (la classe du meme nom existe aussi)
Ceci est un H5	`.h5`	H5 (la classe du meme nom existe aussi)
Ceci est un H6	`.h6`	H6 (la classe du meme nom existe aussi)

Les listes à puce

Markup	Classe CSS	Description
Liste Liste Liste		Liste standard
Liste sans bullets Liste sans bullets Liste sans bullets	`.bullets-none`	Liste sans bullets

Autres Elements

Element	Classe CSS	Description
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.	`chapo`	Pour les extraits
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

Icones

Les icônes

Comment créer un police d’icônes pour votre projet ? Voir la documentation

.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

Composants

Formulaires
Boutons
Notifications
Labels et Badges
Tableaux
Ui Elements

Formulaires

Inputs

Input Classique $form->newField('input', 'text', 'input_text', 'Input Classique', 'Input text');

Input mot de passe $form->newField('input', 'password', 'input_mdp', 'Input mot de passe', 'Mot de passe');

Input email $form->addCustomField('input', 'mail', 'input_mail', 'Input email', 'support@noe-interactive.com');

Input date $form->newField('input', 'text', 'input_date', 'Input date', 'Date');

Input error $form->newField('input', 'text', 'input_error', 'Input error', 'Erreur');

Textareas

Zone de texte$form->newField('textarea', '', 'test_textarea', 'Zone de texte', '');

Listes Déroulantes

Liste déroulante classique$form->newField('select', '', 'test_select', 'Liste déroulante classique', ''); + Options

Boutons Radio

Votre Choix

Option 1

Option 2

Option 3

Option 4

$form->newField('input', 'radio', 'test_radio', 'Votre Choix', ''); + Options

Cases à cocher

Case à cocher simple$form->newField('input', 'checkbox', 'test_checkbox', 'Case à cocher simple', '');

Groupe de case à cocher

$form->addCustomField('checkboxes', 'test_checkbox', 'Groupe de case à cocher', '', '',array('options'=>$checkboxGroupOptions));

Boutons

Les différents styles de boutons. Ces styles sont des classes donc elles marchent aussi avec des balises a. Les classes sont interchangeables et peuvent être aditionnées.

Les styles de boutons

Bouton	Classe CSS	Description
	`btn`	Bouton standard le plus simple possible
	`btn btn-primary`	Bouton marquant une action principale (soumission de formulaire)
	`btn btn-secondary`	Bouton marquant une action secondaire (comme une étape suivante)
	`btn btn-disabled`	Bouton désactivé

Les tailles de boutons

Bouton	Classe CSS	Description
	`btn btn-lg`	Gros Bouton, marche avec tous les types de boutons (primaire: `btn btn-primary btn-big` etc)
	`btn btn-wide`	Bouton qui prend toute la largeur de son conteneur

Notifications

Les styles de notifications

Notifications	Classe CSS	Description
Ceci est une info	`noeNotification info`	Message d’information
Ceci est un succès	`noeNotification success`	Message de succès
Ceci est une erreur	`noeNotification error`	Message d’erreur

Labels et Badges

Les styles de labels et badges

Notifications	Classe CSS	Description
Pastille	`label`	Pastille par défaut
Pastille	`label info`	Pastille d’info
Pastille	`label success`	Pastille de succès
Pastille	`label error`	Pastille d’erreur
1	`badge`	Badge par défaut
2	`badge info`	Badge d’info
10	`badge success`	Badge de succès
54	`badge error`	Badge d’erreur

Tableaux

Les tableaux

Heading	Heading	Heading
Content	Content	Content
Content	Content	Content
Footer	Footer	Footer

Ui Elements

Autres Elements

Element	Classe CSS	Description
Loading	`loader`	Loader
	`caret`	Caret

Classes CSS utiles

Classes
Wrappers
Layouts
Grilles
Listes

Classes

Accès rapide

Ajouter les classes double marge standard et triple marge standard

Markup	Classe CSS	Description
.left	`.left`	left
.right	`.right`	right
.hidden	`.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

maxi-size

mini-size

Colored Backgrounds

The quick brown fox jumps over the lazy dog

Imaged Backgrounds

Background Image Statique: bkg-img-static + background-image en inline

Background Image Statique: bkg-img-fixed + background-image en inline

Background Image Paralax: bkg-img-parallaxed + background-image en inline

Background Image Overlay: bkg-img-* avec div dedans bkg-img-overlay + background-image en inline

Layouts

Les Colonnes de Contenu

.grille-collection .has-two-cols-25

Item Titre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in turpis eleifend, ultrices mauris ut, fermentum augue. Praesent porta gravida urna, at convallis leo pulvinar et. Morbi velit enim, finibus vel tempor sed, maximus nec odio. Pellentesque vestibulum erat eu lectus molestie, a rhoncus nibh blandit. Proin vel faucibus elit, eleifend tincidunt ex

Item Titre

.grille-collection .has-two-cols-33

Item Titre

.grille-collection .has-two-cols-50

Item Titre

.grille-collection .has-two-cols-66

Item Titre

.grille-collection .has-two-cols-75

Item Titre

Les Colonnes de texte

.text-colonnes-x2

.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

Grilles

Les Grilles standards

Grille Standard (.grille-collection)

Item Titre

Grille Standard avec background de couleur

Item Titre

Grille de 2 colonnes (.grille-collection .grid-contains-2)

Item Titre

Grille de 3 colonnes (.grille-collection .grid-contains-3)

Item Titre

Grille de 4 colonnes (.grille-collection .grid-contains-4)

Item Titre

Grille de 5 colonnes (.grille-collection .grid-contains-5)

Item Titre

Grille de 6 colonnes (.grille-collection .grid-contains-6)

Item Titre

Listes

Les Listes

Liste Standard (.liste-collection)

Item Titre

Liste Standard avec background de couleur

Item Titre

.liste-collection .has-two-cols-25

Item Titre

.liste-collection .has-two-cols-25 .alternate

Item Titre

.liste-collection .has-two-cols-25 .alternate .alternateright

Item Titre

.liste-collection .has-two-cols-33

Item Titre

.liste-collection .has-two-cols-33 .alternate

Item Titre

.liste-collection .has-two-cols-33 .alternate .alternateright

Item Titre

.liste-collection .has-two-cols-50

Item Titre

.liste-collection .has-two-cols-50 .alternate

Item Titre

.liste-collection .has-two-cols-50 .alternate .alternateright

Item Titre

.liste-collection .has-two-cols-66

Item Titre

.liste-collection .has-two-cols-66 .alternate

Item Titre

.liste-collection .has-two-cols-66 .alternate .alternateright

Item Titre

.liste-collection .has-two-cols-75

Item Titre

.liste-collection .has-two-cols-75 .alternate

Item Titre

.liste-collection .has-two-cols-75 .alternate .alternateright

Item Titre

Composants JS

Onglets
Fenêtres Modales

Onglets

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

Onglet par défaut
Onglet 2
Onglet 3

Onglet par défaut

Contenu onglet 1

Onglet 2

Contenu onglet 2

Onglet 3

Contenu onglet 3

Fenêtres Modales

FancyBox

Element	Classe CSS	Description
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

Couleurs

Palette utilisée

Typographie

Les polices

Les couleurs

Les titres

Ceci est un H1

Ceci est un H2

Ceci est un H3

Ceci est un H4

Ceci est un H5

Ceci est un H6

Les listes à puce

Autres Elements

Icones

Les icônes

Formulaires

Boutons

Les styles de boutons

Les tailles de boutons

Notifications

Les styles de notifications

Labels et Badges

Les styles de labels et badges

Tableaux

Les tableaux

Ui Elements

Autres Elements

Classes

Accès rapide

Wrappers

Conteneurs

Colored Backgrounds

Imaged Backgrounds

Layouts

Les Colonnes de Contenu

.grille-collection .has-two-cols-25

.grille-collection .has-two-cols-33

.grille-collection .has-two-cols-50

.grille-collection .has-two-cols-66

.grille-collection .has-two-cols-75

Les Colonnes de texte

.text-colonnes-x2

.text-colonnes-x3

.text-colonnes-x4

Grilles

Les Grilles standards

Grille Standard (.grille-collection)

Grille Standard avec background de couleur

Grille de 2 colonnes (.grille-collection .grid-contains-2)

Grille de 3 colonnes (.grille-collection .grid-contains-3)

Grille de 4 colonnes (.grille-collection .grid-contains-4)

Grille de 5 colonnes (.grille-collection .grid-contains-5)

Grille de 6 colonnes (.grille-collection .grid-contains-6)

Listes

Les Listes

Liste Standard (.liste-collection)

Liste Standard avec background de couleur

.liste-collection .has-two-cols-25

.liste-collection .has-two-cols-25 .alternate

.liste-collection .has-two-cols-25 .alternate .alternateright

.liste-collection .has-two-cols-33

.liste-collection .has-two-cols-33 .alternate

.liste-collection .has-two-cols-33 .alternate .alternateright

.liste-collection .has-two-cols-50

.liste-collection .has-two-cols-50 .alternate

.liste-collection .has-two-cols-50 .alternate .alternateright

.liste-collection .has-two-cols-66

.liste-collection .has-two-cols-66 .alternate

.liste-collection .has-two-cols-66 .alternate .alternateright

.liste-collection .has-two-cols-75

.liste-collection .has-two-cols-75 .alternate

.liste-collection .has-two-cols-75 .alternate .alternateright

Onglets

Les onglets

Fenêtres Modales

FancyBox