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
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.
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:
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.
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
|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, slide down, bounce||bounceDownIn|
It's a very simple tabs module. Tabs consist of:
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.