Use class="o-text" for skin wysiwyg
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")
class="o-text"
Parallax
Parallax element speed 1
class="js-animate" data-speed="1"
Parallax element speed -1
class="js-animate" data-speed="-1"
Parallax element horizontal speed -1
class="js-animate" data-speed="-1" data-horizontal="true"
Parallax element horizontal speed 1
class="js-animate" data-speed="1" data-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
More doc : https://idangero.us/swiper/api/
CSS
Work organized please!!
Check this doc : http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces