Introduction

Welcome to our styleguide !

It provide base styles and all the HTML (Twig) / CSS (SCSS) components used in our website.

A styleguide fosters and offers many advantages :

  • consistency and logic in visual identity, leading to a better UX;
  • fast and easy component testing and prototyping;
  • better and more methodical workflow with easier modular components design and faster view assembly;
  • extensible and scalable as much as you want, for improved functionalities or new views;
  • common system vocabulary and basis definition, facilitating communication to all the actors, team members as well as clients;
  • facilitate the arrival of new designers and developpers in the project.

This styleguide is mobile responsive and has cross-browser support (we no longer support IE 9 or lower), built on top of Bootsrap Sass, the official port of Bootstrap 3.

CSS Architecture

To make this design system accessible to all, the CSS selectors follow a specific naming convention making it more legible and easier to use.

CSS principles

The design system follows the CSS principles established by Brad Frost :

  1. "Make it modular" : the components should be independent to insure that the design system is really flexible ;
  2. "Legibility is key" : the naming and coding of a component should be explicit and let the developer easily understand its structure and its purpose ;
  3. "Clarity trumps succinctness" : a component should not sacrifice its legibility in order to be less verbose or to have a shorter syntax. Legibility must remains the key ;
  4. "Keep things flat" : independence between components should be avoided as often as possible, meaning that selector should not be too long and too deep and as DOM-independent as possible ;
  5. "Avoid conflicts" : the components should not conflict with other libraries and systems, or with components from the same design system.

Class prefixes

In addition to this global namespace, we add another limited prefixes to specify the purpose of the element.

There are 6 different prefixes in our design system :

  • the UI components are prefixes with -c ;
  • the layouts are prefixes with -l ;
  • the utilities are prefixes with -u ;
  • the behaviours are prefixes with -js (JavaScript functionalities) ;
  • the states are prefixes with -is and -has ;
  • the views are prefixes with -view ;

Class naming

The selectors from the design system follow the BEM syntax, meaning :

  • Block is the primary independent component block, corresponding to the only name of the element, such as c-card ;
  • Element designates an element FROM the block, meaning a direct or indirect child of the primary block. It is designated by a double underscore __ separator, such as c-card__title ;
  • Modifier is the variation of a block style. it is designated by a double dash --, such as c-card--primary .

Colors

Primary

$color-primary
$red

$color-primary-dark
$red-dark

Secondary

$color-secondary
$night

$color-secondary-dark
$night-dark



Basis

$red
#E74249

$night
#29304A

$blue
#0E65E5

$green
#38D39F

$purple
#6C63FF

$yellow
#FAD35E

$red-dark
#CC3b46

$night-dark
#151A26

$blue-dark
#0D58B2

$green-dark
#30B283

$purple-dark
#5555E5

$yellow-dark
#F4C247



Greys

$grey-ultralight
#F6F6F6

$grey-lighten
#E6E6E6

$grey-light
#DBDBDB

$grey
#888888

$grey-dark
#666666

$grey-darken
#4D4D4D

$grey-ultradark
#222222

Mixins

Container()

The container mixin is used to give an element the behavior of a container. The component will have the different container width according to the media queries breakpoints.

			
				@include container($gutter);

placeholder()

The placeholder mixin helps to easily choose the color of your input placeholder (and invalid state) regardless of the browser context.

			
				@include placeholder($color);

Container

Use container to constrain width of your elements and center it in the page.
Default container (.l-container) is 1140px wide, but you can reduce this width by adding a number from 1 to 11 in .l-container-X

Grid table

The table grid is useful to place some element as if they were in a table. The use of the table CSS display property can, in some specific cases, facilitate the positionning of some elements, letting the browser automatically calculate the width or allowing the use of the vertical-align: middle; CSS property.

Beware the fact that a table display is not a responsive layout.

The table grid is not a table.

Note that the .l-grid-table is made of .l-grid-table__cell that can have a --main modifier, so the cell occupies all the available space (see the second sample).


Lorem ipsum
Dolor sic amet
Consectetur adipisicing
Facilis

Lorem ipsum
Dolor sic amet
Facilis
 			
				

					

						...
					

					...
				


				

					

						...
					

					...
					

						...

Grid

l-col-X define the number of colums used in one column and breaks at 768px to make a unique column, you can add -md at the end of the class to add another breakpoint for example l-col-6 l-col-3-md will produce 4 column above 992p and then 2 column at 768px to end at 1 column

Every grid need to be inside a l-container 


 			

                

                    

    					

    						...
    					

    					

    						...
    					

    					

    						...
    					

    					

    						...
    					

    				

                


                

                    

    					

    						...
    					

    					

    						...
    					

    					

    						...
    					

    				

                


                

                    

    					

    						...
    					

    					

    						...

Grid Utilities


Border Utilities

Those 3 utilities is used to add a border between two columns or to the left of a column grid





Match Height

A useful utility is the .js-matchheight class. Thanks to the jquery-match-height plugin, the utility makes the height of all selected elements exactly equal.

If the items are on multiple rows, the items of each row will be set to the tallest of that row.

There should be no conflict if the utility is used at different places in the same view or within the same component. But if it happens to be the case, you can use the data attribute data-mh="group-name" where group-name is an arbitrary string to identify which elements should be considered as a group. All elements with the same group name will be set to the same height when the page is loaded, regardless of their position in the DOM, without any extra code required.

For performance reason, this utility should be used with care.


			
				

                    

    					
...

    					
...

Headings

Use tags for semantics and classes for styles.

Note : you can add other style with utilities (color, underline...)


h1 default title

h2 default title

h3 default title

h4 default title


 			
				
h1 default title

				
h2 default title

				
h3 default title

				
h4 default title

Texts

Paragraph

Here's different sizes of paragraph. 13px is default


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 


 			
				

					...
				

				

					...
				

				

					...
				

				

					...

List


List without class use default style which include disc icon.
Add class .c-list to remove disc.

  • Etre informé sur cette situation inédite dans sa vie
  • Avoir pu formuler ses envies, désirs et besoins
  • Avoir les moyens de conserver du lien social pour lutter contre l’isolement

  • Etre informé sur cette situation inédite dans sa vie
  • Avoir pu formuler ses envies, désirs et besoins
  • Avoir les moyens de conserver du lien social pour lutter contre l’isolement

  • Etre informé sur cette situation inédite dans sa vie
  • Avoir pu formuler ses envies, désirs et besoins
  • Avoir les moyens de conserver du lien social pour lutter contre l’isolement

  • 1 rue Julien Videment
    44200 Nantes
    France
  • 06 21 12 44 72
  • contact@benevolt.fr

  • Bullet point list item
  • Bullet point list item
  • Bullet point list item

 			
				
    
					
  • Etre informé sur cette situation inédite dans sa vie
    • 
					
  • Avoir pu formuler ses envies, désirs et besoins
    • 
					
  • Avoir les moyens de conserver du lien social pour lutter contre l’isolement
    • 
				


                
    
					
  • Etre informé sur cette situation inédite dans sa vie
    • 
					
  • Avoir pu formuler ses envies, désirs et besoins
    • 
					
  • Avoir les moyens de conserver du lien social pour lutter contre l’isolement
    • 
				


				
    
					
  • Etre informé sur cette situation inédite dans sa vie
    • 
					
  • Avoir pu formuler ses envies, désirs et besoins
    • 
					
  • Avoir les moyens de conserver du lien social pour lutter contre l’isolement
    • 
				


				
    
		            
  • 
		                1 rue Julien Videment 
    
		                44200 Nantes 
    
		                France
		            
    • 
		            
  • 06 21 12 44 72
    • 
		            
  • contact@benevolt.fr
    • 
		        


		        
    
		            
  • Bullet point list item
    • 
		            
  • Bullet point list item
    • 
		            
  • Bullet point list item
    •

Utilities


Change aspect of you text using those utilities below
Works in link, p, heading...


default text

center text

right text


 			
				
default text

				
center text

				
right text

Style

Uppercase text

Serif text

bold text

italic text

text with primary color

text with secondary color

text with blue color

			
				
Uppercase text

				
Serif text

				
bold text

				
italic text

				
text with primary color

				
text with secondary color

				
text with blue color

Basic Buttons

Buttons can be used as a link or a button. If you use the button tag, do not forget its type attribute : 'button' or 'submit' when necessary.

Note : Every button class need a modifier to specify which colors you're using

Then you can add some options to change the aspect :

  • c-button--wired : used to remove background and add border around the button (second example)
  • c-button--large : 10px higher

Default Secondary 

 			
                Default

        		Primary

                Secondary

Option : --wired


Default Primary Secondary 

 			
				Default

                Primary

                Secondary

Option : --s


Button S size Button S size 

 			
                Button S size
				
        		Button S size

Option : disabled


Button full (width)

Those buttons are used in the homepage it creates two buttons taking all viewport width equally

Voir les profils de benevolts
Voir les missions de bénévolat 

 			
                

        		    

                        
                            

                                

                                    
                                    Voir les profils de benevolts
                                

                            

                        
        		    

        		    

                        
                            

                                

                                    
                                    Voir les missions de bénévolat

Social Buttons

There are 3 types of social buttons. For social button you have to add a classname by the name of the social network (exemple : .c-button-social--facebook).
And if you're using .c-button-square don't forget to add suffix -square, (example : .c-button-social-square--facebook)


c-button-social

contextuals c-button-social (only used in footer)

c-button-social-square

Tooltip

Tooltip can be used in any element, mainly in an icon as you can see below.

Step :

  • Add class .js-tooltip-trigger
  • Add attribute data-original-title="fill" to complete the text that need to be in the tooltip
  • To define specific style to the tooltip add .c-tooltip-trigger

NOTE : certain elements like i or p can't be focus with tab key so to correct that you have to add attribute tabindex="0"



Tooltip inside a paragraph 



 			
                

                

                    Tooltip inside a paragraph

Forms

Individual form controls automatically receive some global styling. All textual input, textarea, and select elements with .c-form-control are set to width: 100%; by default (use a container to constrain width). Wrap labels and controls in .c-form-group for optimum spacing.

If an input is required add the modifier c-form-label--required in the label tag.

Textarea


When implementing textarea add class .c-form-control--textarea to textarea tag.

You can add a count characters to the textarea which will inform users how much characters they can type.
To do so, add those 4 attribute into the textarea tag ng-init="maxlength = 100" name="inputInfo" ng-model="inputMessage" ng-maxlength="maxlength" then add label with the style you want and add those attributes ng-class="{'u-secondary': formTextarea.inputInfo.$error.maxlength}" ng-bind-template="({{(maxlength - formTextarea.inputInfo.$viewValue.length)}} caractères restants)"
Note : To make it works you need a form with a name and an input with a name as well
Seconde note : the hack {{ }} allowed us to use angular ng-bind-template into twig files.

Addon icon


You can add an icon to the right of the input to specified the type of value your expecting.
Surround c-form-control with a div which has the class .c-addon-container then add any icon you need in a span (like : <span class="c-icon icon-calendar-o" aria-hidden="true"></span>)

Selectbox


Add class c-form-control--select the the select tag.
Don't forget to add arrow icon with "Addon icon" method. Above section.

Selectbox with placeholder value


You can decide to add a default value in your selectbox, for that, add an option with two attributes disabled select

Checkboxes


Checkboxes don't use the same class as the other inputs, replace c-form-control by c-checkbox.
Only the label is visible by users so don't forget to link the input (id="") with the label (for="")

Form file


Input file are handle with angular


Cliquez sur l'image pour la modifier

 			
				

					
					
				

                
Cliquez sur l'image pour la modifier

Input form (footer)


This input is only used in the footer which allowed to have an input and a button in the same line.

Forms error

To use error state, add .has-error to the parent element. Any .c-form-control within that element will receive the validation styles.


Votre nom est invalide !

Message invalide !

La date est invalide !

Veuillez cocher la case !

 			
				

					
					
					
Votre nom est invalide !

				


				

					
					
					
Votre adresse email est invalide !

				


				

					
					

						
					

					
La date est invalide !

				


				

					
					

						
					

				


				

					
					
					
Veuillez cocher la case !

Images

The images of the platform are managed with the lazysizes plugin. It allows 3 useful but optional features :

  • image responsivness, thanks to polyfill to support srcset HTML attribute ;
  • lazyloading ;
  • cover and contain behaviours, thanls to polyfill to support obect-fit CSS property;

Image with Lazyload

An image with lazyload class goes throught 3 steps :

  • lazyload : the image isn't loaded nor requested
  • lazyloading : the image is requested and loading
  • lazyloaded : the image is fully loaded.

Lazyload and object-fit

It is also possible to use the power of the object-fit CSS property to tell an image to occupy all a given space (cover).

Use the utility .u-object-fit-cover.

In order to use the property correctly, a height must be defined. if this height isn't given by the style of your view or of your component, you can use the modifier c-img--tall

Broken images

When an image is broken, this message will be displayed :


un alt qui décrit l'image

Badge

Badges are used to display images or icons in a circle.

Note : when you display an icon in the badge you will likely change default color for a red (secondary color), then add .u-bg-secondary


.c-badge .c-badge--xxxs (20px)

.c-badge .c-badge--xxs (36px)

.c-badge .c-badge--xs (40px)

.c-badge .c-badge--s (60px)

.c-badge (80px)

.c-badge .c-badge--m (100px)

.c-badge .c-badge--l (160px)

Videos

Basic card

Empty card


The c-card component adds white background and a box-shadow to convey a visual coherence accross the platform and to demarcate areas of informations. It's a simple block with card style. By default, a .c-card has no padding and no height.

You can add any other component inside a card.

Disabled card


You can add .c-card--disabled class to a card to make it disabled.


Un titre

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error minima culpa atque libero aut voluptatum nam ratione amet consectetur nemo, dicta nesciunt, quibusdam pariatur omnis iusto, porro, quos ipsa.

Placeholder card


This card is used to complete blank space in a row of basic card

Profil cards

Profil card


Les Pompiers ont du Cœur

Tours

Vous avez déjà sollicité 6 benevolts

Synthèse des Retours d’expérience

24 avis

À propos

Grilling is going to the dogs. According to the Hearth, Patio & Barbecue Association, 81 percent of Americans own a grill and average grill usage is up to 26 times per

Accueil & formation

Chopped, sliced or wedged, hard-cooked eggs are the basis of egg salad and add protein and a happy glow to tossed and composed salads and casseroles. Chopped yolks and whites comprise Eggs Goldenrod and Polonaise Sauce. Whole hard-cooked eggs become comforting, familiar deviled eggs or zingy, newly rediscovered pickled eggs.
Simply sprinkled with an herb or more fancily coated in sausage for Scotch eggs, hard-cooked eggs are nature’s own.

Site web

http://example.com/ 

 			
				

					

						
					

					

						
Les Pompiers ont du Cœur

						
 Tours

					

					

					
Vous avez déjà sollicité 6 benevolts

					

					
 Synthèse des Retours d’expérience 

					

						   24 avis
					

					
 À propos 

					

						Grilling is going to the dogs. According to the Hearth, Patio & Barbecue Association, 81 percent of Americans own a grill and average grill usage is up to 26 times per
					

					
 Accueil & formation 

					

						Chopped, sliced or wedged, hard-cooked eggs are the basis of egg salad and add protein and a happy glow to tossed and composed salads and casseroles. Chopped yolks and whites comprise Eggs Goldenrod and Polonaise Sauce. Whole hard-cooked eggs become comforting, familiar deviled eggs or zingy, newly rediscovered pickled eggs. 

						Simply sprinkled with an herb or more fancily coated in sausage for Scotch eggs, hard-cooked eggs are nature’s own.
					

					
 Site web 

					http://example.com/

Profil card (edition mode)


Informations

Cliquez sur l'image pour la modifier

Votre mobilité


 			
				

					

						
Informations

						

							
							
						

						
Cliquez sur l'image pour la modifier

						

							
							
						

						

							
							
						

						

							
							

								
								
							

						

						

							
							
						

						

							
							
						

						

							
							
						

						

							
							
						

						

							
							
						

				        

				            
				            
				        

						

				            
				            
				        

						

							
							
						

					


					

						
Votre mobilité

Search Benevolt card


Note: Don't forget to add js-matchheight to the card component if needed.

Skill card


Mécanique (Intéressé)

24 avis

Let’s face it, cooking is not a top priority in the lives of every man, woman, or child on the planet. In fact, far too people have made learning to cook a priority in their lives.

Lire la suite
Envoyer un message Voir les avis 

 			
				

					

						

							

								

									
								

							

						

						

							

								

									
Mécanique (Intéressé)

								

								

									

										24 avis
										 
									

								

							

							

							

								Let’s face it, cooking is not a top priority in the lives of every man, woman, or child on the planet. In fact, far too people have made learning to cook a priority in their lives.
							

							Lire la suite
							

							Envoyer un message
							Voir les avis

Mission card


Jardinage

East Osvaldoview

Nom d’une mission moins long

Je suis à la recherche d’une main verte pour m’aider à redonner un semblant d’ordre à mon jardin avant l’été.

Informations pratiques

Possibilités les lundis et mardis à partir de 16h et les samedis après-midi. Tout l’outillage nécessaire est à disposition sur place.

Date de début

06 janvier 2017

Durée

2 heures

Fréquence

Hebdomadaire

Lire moins
Se porter volontaire 
 			
				

					

						

							

								

									
								

							

						

						

							

								

									
Jardinage

								

								

									
 East Osvaldoview

								

							

							

							

								Nom d’une mission moins long
							

							

								Je suis à la recherche d’une main verte pour m’aider à redonner un semblant d’ordre à mon jardin avant l’été.
							

							

								Informations pratiques
							

							

								Possibilités les lundis et mardis à partir de 16h et les samedis après-midi. Tout l’outillage nécessaire est à disposition sur place.
							

							

		    					

		    						

		    							Date de début
		    						

		    						

		    							06 janvier 2017
		    						

		    					

		    					

									

										Durée
									

									

										2 heures
									

		    					

		    					

									

										Fréquence
									

									

										Hebdomadaire
									

		    					

		    				

							Lire moins
							

							Se porter volontaire

Mission form card


Déposer une annonce

 			
				

					

						
Déposer une annonce

Skill form card


Ajouter une activité


 			
				

					
Ajouter une activité

Testimonials card


Retours d'expérience

24 avis
Très bien

Novembre 2017

Chopped, sliced or wedged, hard-cooked eggs are the basis of egg salad and add protein and a happy glow to tossed and composed salads and casseroles. Chopped yolks and whites comprise Eggs Goldenrod and Polonaise Sauce. Whole hard-cooked eggs become comforting, familiar deviled eggs or zingy, newly rediscovered pickled eggs.

Signaler cet avis
Très bien

Novembre 2017

Chopped, sliced or wedged, hard-cooked eggs are the basis of egg salad and add protein and a happy glow to tossed and composed salads and casseroles. Chopped yolks and whites comprise Eggs Goldenrod and Polonaise Sauce. Whole hard-cooked eggs become comforting, familiar deviled eggs or zingy, newly rediscovered pickled eggs.

Signaler cet avis
Très bien

Novembre 2017

Chopped, sliced or wedged, hard-cooked eggs are the basis of egg salad and add protein and a happy glow to tossed and composed salads and casseroles. Chopped yolks and whites comprise Eggs Goldenrod and Polonaise Sauce. Whole hard-cooked eggs become comforting, familiar deviled eggs or zingy, newly rediscovered pickled eggs.

Signaler cet avis
Voir plus d'avis 

 			
				

					

						

							

								Retours d'expérience
							

						

						

							

								24 avis
								 
							

						

					

					

					

						

							

								    Très bien 
							

						

						

							

								
								Novembre 2017
							

						

					

					

						Chopped, sliced or wedged, hard-cooked eggs are the basis of egg salad and add protein and a happy glow to tossed and composed salads and casseroles. Chopped yolks and whites comprise Eggs Goldenrod and Polonaise Sauce. Whole hard-cooked eggs become comforting, familiar deviled eggs or zingy, newly rediscovered pickled eggs.
					

					Signaler cet avis
					

						Voir plus d'avis

Media card


Quel domaine ?

Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita

Quel domaine ?

Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita

 			
				

					
					

						
Quel domaine ?

						
Quanta autem vis amicitiae sit, ex hoc intellegi maxime potest, quod ex infinita

Headband

Headband is used in the home page and content pages. If you need content inside the headband, Add a div inside .c-headband with classes .l-container .c-headband__container and put your content inside.


Pourquoi rester retraité quand on peut devenir Benevolt ?

Rejoignez Benevolt.fr le premier site de bénévolat dédié aux jeunes retraités !

Proposer mes services
Deux personnes se tenant la main


Deux personnes se tenant la main 

 			
				

					

						
Pourquoi rester retraité quand on peut devenir Benevolt ?

						
Rejoignez Benevolt.fr le premier site de bénévolat dédié aux jeunes retraités !

						Proposer mes services
					


					Deux personnes se tenant la main
					

				


				

					Deux personnes se tenant la main

Block illustration


Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia voluptate in fuga tempore odio, id qui amet iure, consectetur quisquam et est perspiciatis aut maiores nihil, error ipsam perferendis odit.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia voluptate in fuga tempore odio, id qui amet iure, consectetur quisquam et est perspiciatis aut maiores nihil, error ipsam perferendis odit.

Rating

Rating component works with angular bootstrap ui - rating, you can configure the number of stars you want to display, to do so, change the maximum number attribute max=""

Note: the stars are icon font by default they have the same size as the text. If you need to increase their size you can surround them around p tag with proper class to define font size (see example below)


X avis
X avis 

 			
				

					  X avis
				


				

					 
					X avis

Scrollspy + Affix

The ScrollSpy plugin is for automatically updating nav targets based on scroll position.
To implement it you need to surround your navigation with a div with class js-scrollspy, then add class nav to your list ul.

The affix plugin is for keeping fixed the lateral nav when users scroll. It simulates display: sticky property.
Here's how to implement it :
1. add classes js-affix c-affix in the list markup (ul)
2. add class js-affix-container to the container where the list will be able to scroll into



Introduction

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Qui sommes-nous en tant qu’entreprise ?

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quel est notre sujet ?

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


 			

				

					

						


							

								
							


						


						


							
Introduction

							
Qui sommes-nous en tant qu’entreprise ?

Toggle

The toggle component is a specific block which uses the collapse behaviour from UI bootstrap. It is mostly used for navs and lists.
Note that the collapse behaviour defined by UI Bootstrap uses a boolean to detect if the targeted component is collapsed. A ng-click event toggles the boolean value and an uib-collapse attribute shows/hides the content whether the specific boolean is true or not.
It means that this component needs the described specific attributes and needs a unique boolean.


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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


 			
				
				

					
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Toggle with style

Then you can stylize the toggle components as you wish, you're not force to use a button a paragraph can do the job as well.
Here's an example of stylized collapse


Toggle collapse Vertically

There is a lot of exciting stuff going on in the stars above us that make astronomy so much fun. The truth is the universe is a constantly changing, moving, some would say “living” thing because you just never know what you are going to see on any given night of stargazing. 


 			
				

				

					
						
Toggle collapse Vertically

					

		            
		        

				

					

						There is a lot of exciting stuff going on in the stars above us that make astronomy so much fun. The truth is the universe is a constantly changing, moving, some would say “living” thing because you just never know what you are going to see on any given night of stargazing.

Modal

Modals are dialog prompts.

The modal component uses the Angular UI module which provides an $uibModal service.

Creating modals is straightforward: create a template and controller in the appropriate folders, and reference them when using $uibModal.

			
				$uibModal.open({
					templateUrl: 'myModalContent.html',
					controller: 'ModalInstanceCtrl',
				});

Template sample :

Examples of modal used in benevolt :