Accueil / Styleguide

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
.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

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

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

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

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