Tab 1
Tab 2
Tab 3
Content tab 1
Content tab 2
Content tab 3

H1 Title (class="o-h1")

H2 Title (class="o-h2")

H3 Title (class="o-h3")

H4 Title (class="o-h4")

H5 Title (class="o-h5")
H6 Title (class="o-h6")

Ceci est une page d’exemple. C’est différent d’un article de blog parce qu’elle restera au même endroit et apparaîtra dans la navigation de votre site (dans la plupart des thèmes). La plupart des gens commencent par une page « À propos » qui les présente aux visiteurs du site. Cela pourrait ressembler à quelque chose comme cela :

Bonjour ! Je suis un mécanicien qui aspire à devenir acteur, et voici mon site. J’habite à Bordeaux, j’ai un super chien baptisé Russell, et j’aime la vodka-ananas (ainsi qu’être surpris par la pluie soudaine lors de longues balades sur la plage au coucher du soleil).

… ou quelque chose comme cela :

La société 123 Machin Truc a été créée en 1971, et n’a cessé de proposer au public des machins-trucs de qualité depuis lors. Située à Saint-Remy-en-Bouzemont-Saint-Genest-et-Isson, 123 Machin Truc emploie 2 000 personnes, et fabrique toutes sortes de bidules super pour la communauté bouzemontoise.

En tant que nouvel·le utilisateur ou utilisatrice de WordPress, vous devriez vous rendre sur votre tableau de bord pour supprimer cette page et créer de nouvelles pages pour votre contenu. Amusez-vous bien !


Use class="o-text" for skin wysiwyg

                        class="o-text"
                    

Parallax


Parallax element speed 1
                            class="js-animate" data-scroll-speed="1"
                        

Parallax element speed -1
                            class="js-animate" data-scroll-speed="-1"
                        

Parallax element horizontal speed -1
                            class="js-animate" data-scroll-speed="-1"  data-scroll-horizontal="true"
                        

Parallax element horizontal speed 1
                            class="js-animate" data-scroll-speed="1"  data-scroll-horizontal="true"
                        

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae nisi eu dolor suscipit feugiat ut sit amet urna. Curabitur posuere enim scelerisque pharetra hendrerit. Praesent volutpat ante eget efficitur condimentum. Nullam mattis id tortor a efficitur. Suspendisse a viverra purus, ut ultricies sem. Donec condimentum, velit sit amet posuere gravida, turpis ex interdum eros.

If you want to animate some element on scroll, you can create your own animation class in the _anims.scss file (utilities folder)

                                class="u-anim-opacity js-animate"
                            


More doc : https://github.com/locomotivemtl/locomotive-scroll




Grid

You can add some modifier like : -flex, -gutter-small...

                            class="o-layout -flex -gutter-small -reverse -right"
                        
                                    class="o-layout__item u-2/3@from-md u-1/2@from-sm"
                                
                                    class="o-layout__item u-1/3@from-md u-1/2@from-sm"
                                
                                    class="o-layout__item u-1/2@from-md"
                                
                                    class="o-layout__item u-1/2@from-md"
                                
                                    class="o-layout__item u-1/4@from-md"
                                
                                    class="o-layout__item u-2/4@from-md"
                                
                                    class="o-layout__item u-1/4@from-md"
                                

More doc : https://github.com/inuitcss/inuitcss/blob/0420ba8/objects/_objects.layout.scss

Accordion title

Accordion title

Accordion title

Accordion title

Accordion title

Accordion title

Accordion title

Accordion title



Slider

CSS

Work organized please!!
Check this doc : http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces

Abonnez-vous à notre infolettre

Suivez-nous