Style Guide

Elements de design

Couleurs

Palette utilisée

@color1 : #222
@color2 : #333
@color3 : #666
@color4 : #C83502

Typography

Les polices

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

Les couleurs

@color-titres : black;
@color-chapo : gray;
@color-body : gray;
@color-lien : #C83502;
( @color4;)
@color-lien-hover : #666;
( @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

Autres Elements

Element class= Description

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
.icon-eye
.icon-download
.icon-torso
.icon-briefcase
.icon-email-envelope
.icon-map-pin-5
.icon-linkedin
.icon-chart-line
.icon-share
.icon-prize-award
.icon-phone
.icon-sweden
.icon-flag
.icon-code-html-file-1
.icon-files
.icon-page-search
.icon-phone-2
.icon-keyboard
.icon-hand-up
.icon-history
.icon-sun
.icon-gauge
.icon-spinner
Composants

Formulaires

Inputs
Input text | $form->newField('input', 'text', 'input_text', 'Input Classique', 'Input text');
Mot de passe | $form->newField('input', 'password', 'input_mdp', 'Input mot de passe', 'Mot de passe');
Adresse email | $form->addCustomField('input', 'mail', 'input_mail', 'Input email', 'support@noe-interactive.com');
Date | $form->newField('input', 'text', 'input_date', 'Input date', 'Date');
Erreur | $form->newField('input', 'text', 'input_error', 'Input error', 'Erreur');
Text Areas
$form->newField('textarea', '', 'test_textarea', 'Zone de texte', '');
Listes Déroulantes
$form->newField('select', '', 'test_select', 'Liste déroulante classique', ''); + Options
Boutons Radio
$form->newField('input', 'radio', 'test_radio', 'Votre Choix', ''); + Options
Cases à cocher
$form->newField('input', 'checkbox', 'test_checkbox', 'Case à cocher simple', '');
$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

Notifications

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

Les styles de 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

Tableaux

Les tableaux

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

Ui Elements

Autres Elements

Element class= Description
Loading
loader Loader
caret Caret
Classes CSS utiles

Classes

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

maxi-size

mini-size

Colored Backgrounds

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
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

Grilles et Listes

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

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

item titre

Item description

item titre

Item description

item titre

Item description

Composants JS

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
Contenu onglet 1
Onglet 2
Contenu onglet 2
Onglet 3
Contenu onglet 3

Fenêtres Modales

FancyBox

Element class= 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
@nicolasgrekas Unfortunately for me that’s already the case :)07 Dec / 15:01