Styleguide

Couleurs
Typography
Layout
Formulaires
Buttons
Ui Elements

Couleurs

Couleurs du site

@color1 : #282421

@color2 : #333

@color3 : #6c6c6c

@color4 : #f4f4f2

@color5 : #9a977d

@color6 : #dd483e

@color7 : #7e3d8e

colorATC : #282421

colorPromouvoir : #8fa131

colorDevelopper : #253b4a

colorObserver : #33887c

colorEspacePro : #9a977d

Typography

Les polices

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

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

Les couleurs

@color-titres : black;

@color-chapo : black;

@color-body : gray;

@color-lien : black;

@color-lien-hover : #6c6c6c;
( @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 Liste Liste		Liste standard
Liste sans bullets Liste sans bullets Liste sans bullets	`.bullets-none`	Liste sans bullets

Layout

Accès rapide

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

Grille Collection

Grille Standard

item titre

Item description

item titre

Item description

item titre

Item description

item titre

Item description

item titre

Item description

item titre

Item description

Grille Standard avec background de couleur

item titre

Item description

item titre

Item description

item titre

Item description

item titre

Item description

item titre

Item description

item titre

Item description

grid-contains-2

item titre

Item description

item titre

Item description

grid-contains-3

item titre

Item description

item titre

Item description

item titre

Item description

grid-contains-4

item titre

Item description

item titre

Item description

item titre

Item description

item titre

Item description

grid-contains-5

item titre

Item description

item titre

Item description

item titre

Item description

item titre

Item description

item titre

Item description

grid-contains-6

item titre

Item description

item titre

Item description

item titre

Item description

item titre

Item description

item titre

Item description

item titre

Item description

has-two-cols-25

item titre

Item description

item titre

Item description

has-two-cols-33

item titre

Item description

item titre

Item description

has-two-cols-50

item titre

Item description

item titre

Item description

has-two-cols-66

item titre

Item description

item titre

Item description

has-two-cols-75

item titre

Item description

item titre

Item description

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

Liste Collection

Liste Standard

item titre

Item description

item titre

Item description

item titre

Item description

Formulaires

Inputs

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

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

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

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

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

Text Areas

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));

Buttons

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	class= »	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	class=	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

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

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

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

Couleurs

Couleurs du site

Typography

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

Layout

Accès rapide

Wrappers

Conteneurs

Colored Backgrounds

Imaged Backgrounds

Grille Collection

Grille Standard

Grille Standard avec background de couleur

grid-contains-2

grid-contains-3

grid-contains-4

grid-contains-5

grid-contains-6

has-two-cols-25

has-two-cols-33

has-two-cols-50

has-two-cols-66

has-two-cols-75

text-colonnes-x2

text-colonnes-x3

text-colonnes-x4

Liste Collection

Liste Standard

Formulaires

Buttons

Les styles de boutons

Les tailles de boutons

Ui Elements

Les icônes

Les styles de notifications

Labels et badges

Les onglets

Les tableaux

Autres Elements