Modules
Modules (.m-) are larger building blocks that you can use throughout site. Basically it's some kind of pattern, which you are using through whole site grid.
-
Modules uses a (.m-) prefix.
-
Modules can contain other objects and components.
-
Modules are context aware.
-
Modules in most cases have js-hook
Accordion
An accordion allows users to toggle the display of sections of content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it’s current value to 0.
Collapse
Toggle the visibility of content across your project. Collapsing an element will animate the height from it’s current value to 0. Click the buttons below to show and hide another element via class changes:
Dropdown
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Velocity JavaScript plugin. They’re toggled by clicking, not by hovering.
Modal
Use modal module to add popups, user notifications, or completely custom content. Toggle a working modal demo by clicking the button below. It will show centered modal.
-
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the body so that modal content scrolls instead.
-
Clicking on the modal “backdrop” will automatically close the modal.
-
For now one modal window at a time. Nested modals aren’t supported. Maybe in feature we'l have sliding modal
-
Modals use position: fixed, which can sometimes be a bit particular about its rendering. Place your modal .njk in a special wrapper in layout.
-
Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in modals. To achieve the same effect, use js $('#elem').trigger('focus').
-
To init modal, add .js-m-modal and data-modal-target="id" to button.
-
Just add desired data-modal-effect to button for animation
| Animation | Data-modal-effect | Taste it |
|---|---|---|
| Fade, quick slide up | slideUpIn | |
| Fade, long slide up | slideUpBigIn | |
| Fade, quick slide down | slideDownIn | |
| Fade, long slide down | slideDownBigIn | |
| Fade, quick slide left | slideLeftIn | |
| Fade, long slide left | slideLeftBigIn | |
| Fade, quick slide right | slideRightIn | |
| Fade, long slide right | slideRightBigIn | |
| Fade, expand | expandIn | |
| Maybe scale? | shrinkIn | |
| Fade, slide down, bounce | bounceDownIn |
Tabs
It's a very simple tabs module. Tabs consist of:
Velocity.js
Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. We use it in all our modules with animations. Check Github for more info.
©