This is a css module for the Basis.
- Repository: https://github.com/sass-basis/basis/
- Documents : https://sass-basis.github.io/
$ npm install --save sass-basis
$ npm install --save sass-basis-layout
@import 'node_modules/sass-basis-layout/src/css/basis';
@import 'node_modules/sass-basis-layout/src/css/layout/container';
The header fixed to top and the contents is under the header.
<div class="l-container">
<header class="l-header" data-l-header-type="sticky"></header>
<div class="l-contents"></div>
<footer class="l-footer"></footer>
</div>
import BasisStickyHeader from 'node_modules/sass-basis-layout/src/js/sticky-header.js';
document.addEventListener(
'DOMContentLoaded',
() => {
new BasisStickyHeader({
container: '.l-container',
header : '.l-header',
contents : '.l-contents'
});
},
false
);
The header fixed to top and overlay the contents.
<div class="_l-container">
<header class="_l-header" data-l-header-type="overlay"></header>
<div class="_l-contents"></div>
<footer class="_l-footer"></footer>
</div>
import BasisFixedHeader from 'node_modules/sass-basis-layout/src/js/fixed-header.js';
document.addEventListener(
'DOMContentLoaded',
() => {
new BasisFixedHeader({
container: '.l-container',
header : '.l-header'
});
},
false
);
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">
<header class="l-header"></header>
<div class="l-contents"></div>
<footer class="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">
<header class="l-header"></header>
<div class="l-contents"></div>
<footer class="l-footer"></footer>
</div>
</html>
When with using sticky or overlay header.
import BasisStickyHeader from 'node_modules/sass-basis-layout/src/js/sticky-header.js';
document.addEventListener(
'DOMContentLoaded',
() => {
new BasisStickyHeader({
container: '.l-container',
header : '.l-header',
contents : '.l-contents'
});
},
false
);
import BasisFixedHeader from 'node_modules/sass-basis-layout/src/js/fixed-header.js';
document.addEventListener(
'DOMContentLoaded',
() => {
new BasisFixedHeader({
container: '.l-container',
header : '.l-header'
});
},
false
);
Modern Browser and IE10+
MIT License