Responsive img (Picture tag)

picture(ThumbnailID,size X, size Y,' * custom classes','img ALT');
ThumbnailID = can be passed as ID or Array of 3 URL (Xlarge, large, medium).
Size X & Size Y = apply padding top to the picture tag.
Custom classes = Any classes go see _image.scss for existing classes for modifying img size in mobile (Ex. , -sm-1/1, -sm-1/2, -sm-1/3, -sm-2/3, -sm-3-/4)

Responsive huge title fold viewport width

Grid 2 - testing

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

Style guide

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.

Use class="o-text" for skin wysiwyg

                                        class="o-text"

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"

Hello

My

Dear

Best

Friend

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.

Hello

My

Dear

Best

Friend

Overlay

Afficher overlay (video)

Afficher overlay (Texte)

Accordion title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat rem nisi soluta commodi harum deleniti, voluptatem itaque doloremque temporibus labore fugit iusto nesciunt esse rerum vitae, deserunt quidem aliquid error!

Accordion title

** Need module activation **

Exemple de scrollTo

** Need module activation **

Tab 1

Tab 2

Tab 3

Content tab 1

Content tab 2

Content tab 3

Choix multiples

Parallax need Smoothscroll : true

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"

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

Slider

** Need module activation (Glide or Swiper) **

CSS

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

Responsive img (Picture tag)

Responsive huge title fold viewport width

Grid 2 - testing

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

Hello

My

Dear

Best

Friend

Hello

My

Dear

Best

Friend

Overlay

Accordion title

Accordion title

Accordion title

Accordion title

Accordion title

Accordion title

Accordion title

Accordion title

Merci

Parallax need Smoothscroll : true

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"

Slider

CSS

Demande d'information

Merci, votre demande à bien été envoyée.

Responsive img (Picture tag)

Responsive huge title fold viewport width

Grid 2 - testing

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

Hello

My

Dear

Best

Friend

Hello

My

Dear

Best

Friend

Overlay

Accordion title

Accordion title

Accordion title

Accordion title

Accordion title

Accordion title

Accordion title

Accordion title

Merci

Parallax **need Smoothscroll : true**

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"

Slider

CSS

Demande d'information

Merci, votre demande à bien été envoyée.

Parallax need Smoothscroll : true

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"