This is a css module for the Basis.
- Repository: https://github.com/getbasis/basis/
- Documents : https://getbasis.github.io/
$ yarn add getbasis
$ yarn add getbasis-layout
@import 'node_modules/getbasis-layout/src/css/basis';
@import 'node_modules/getbasis-layout/src/css/layout/container';
The header fixed to top and the contents is under the header.
<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>
import BasisStickyHeader from 'node_modules/getbasis-layout/src/js/sticky-header.js';
new BasisStickyHeader();
The header fixed to top and overlay the contents.
<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>
import BasisStickyHeader from 'node_modules/getbasis-layout/src/js/sticky-header.js';
new BasisStickyHeader();
The footer fixed to bottom when the contents is smaller than the height of the window.
<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>
Scroll the contents of the page instead of scrolling the window.
<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>
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();
Modern Browser and IE10+
MIT License