Fast scroll
Jquery module that scroll the page vertically to a specifif target.
Scroll to target "A" on click here
target "A" is here !
Scroll to target "B" on click here
Exclusion zone.
Offset the scroll by the height of this !
(Linked to "B" example)
target "B" is here !
- all the datas-... attributes of a same action must use the same unique name.
- data-stp-fastscroll-exclusion allow you to offset the scroll by the height of a specific element.
This element can be placed everywhere in the page, its height will offset the scroll even if the element isn't close to the target.
Clear
A simple "clear: both" class. Usefull to get a standard flow after some "float" elements
float
float
float

Classic text block after some float elements. The clear, juste before, repair the flow of the page.

Autoloader
Jquery/Less module that display a waiting screen on top of the page when needed.
autoloader("start");
autoloader("stop");
- No need to create an html structure, the module js will create it on click.
- This require FontAwesome in the project (for the rotating)
Autopopup
Module that create popups dynamically. You write a single div tag with the good attributes and the html strucure will be created on initialization.
Launch the popup
All the numericals values represent pixels :
- rounded edges : r5, r10, r15, ..., r45, r50
- width : w100, w200, w300, ..., w900, w1000
- internal margins : m5, m10, m15, ..., m45, m50
Lift
Jquery module that add a specific class to an element when the top of the window touch it.
Mainly usefull to change an element from "static" to "fixed" when needed, but you can find other uses of it.
.stp-lift-on
- no css by defaut with this module. You have to specify our own css for the .stp-lift-on class.
- you can use this in other ways that a simple fixed position : hide the block, show a popup when scroll pass a specific point, etc. - the "pusher" (data-stp-lift-pusher) can use any type of tag (div, label, ...).
Block Ratios
Less module that allows you to create fixed ratio block (3/2, 16/9, 4/3, ...) to pu anything in it (pictures, iframes, ...)
1
2
3
4
5
1) Classical structure (block-x-x>div>div>img) : the picture size is defined by a max-width and max-height at 100%.
2) Fast structure block-x-x>div>img : the picture will take 100% of the width.
3) Other example with another ratio.
4) Same example but with an horizontal picture, no vertical centering with this module
5) custom ratio : you have to use a less mixin in your own css : .block-ratio(@width,@height), targeting .my-custom-ratio (you can use any class name);
Navbar to mobile
Classic navbar mobile that switch classes an dynamically manages a black background.
1) Add a "data-stp-menu-open" attribute on a button and specify the name of the targeted menu
2) Add a "data-stp-menu" attribute on the menu itself to name it
3) Use the "stp-menu-open" class to show/animate the menu (no css by defaut)
4) Set an element with a "data-stp-menu-close" attribute in the menu to close it on click
Placeholder mixins
Less mixin that changes the color of placeholder
- Only one argument available : a color (text or hex).
Parallax
JS module that creates a parallax effect by manipulating the "background-position" property.
- Only "background-position" is manipulated, you have to use other background attributes, like "background-size", by your own.
- "background-position" is fixed horizontaly to 50% by the JS.