getbasis-layout
v7.0.2
Published
This is a css module for the Basis.
Downloads
5
Readme
getbasis-layout
This is a css module for the Basis.
repository
- https://github.com/getbasis/layout/
Basis
- Repository: https://github.com/getbasis/basis/
- Documents : https://getbasis.github.io/
Get Started
Install
$ yarn add getbasis
$ yarn add getbasis-layout
Stylus
@import 'node_modules/getbasis-layout/src/css/basis';
@import 'node_modules/getbasis-layout/src/css/layout/container';
Using sticky header
The header fixed to top and the contents is under the header.
HTML
<div class="_l-container" data-l="container">
<header class="_l-header" data-l="header" data-l-header-type="sticky"></header>
<div class="_l-contents" data-l="contents"></div>
<footer class="_l-footer" data-l="footer"></footer>
</div>
JavaScript
import BasisStickyHeader from 'node_modules/getbasis-layout/src/js/sticky-header.js';
new BasisStickyHeader();
Using overlay header
The header fixed to top and overlay the contents.
HTML
<div class="_l-container" data-l="container">
<header class="_l-header" data-l="header" data-l-header-type="overlay"></header>
<div class="_l-contents" data-l="contents"></div>
<footer class="_l-footer" data-l="footer"></footer>
</div>
JavaScript
import BasisStickyHeader from 'node_modules/getbasis-layout/src/js/sticky-header.js';
new BasisStickyHeader();
Using sticky footer
The footer fixed to bottom when the contents is smaller than the height of the window.
HTML
<html data-sticky-footer="true">
<div class="_l-container" data-l="container">
<header class="_l-header" data-l="header"></header>
<div class="_l-contents" data-l="contents"></div>
<footer class="_l-footer" data-l="footer"></footer>
</div>
</html>
Using disable window scroll
Scroll the contents of the page instead of scrolling the window.
HTML
<html data-window-scroll="false">
<div class="_l-container" data-l="container">
<header class="_l-header" data-l="header"></header>
<div class="_l-contents" data-l="contents"></div>
<footer class="_l-footer" data-l="footer"></footer>
</div>
</html>
JavaScript
When with using sticky or overlay header.
import BasisStickyHeader from 'node_modules/getbasis-layout/src/js/sticky-header.js';
import BasisFixedHeader from 'node_modules/getbasis-layout/src/js/fixed-header.js';
new BasisStickyHeader();
new BasisFixedHeader();
Browser support
Modern Browser and IE10+
License
MIT License