layers.css
Pure (s)css html layers, no js at all.
Features
-
layers
are independent, each.layer
has its own fixed header, body, fixed footer and overlay -
layers
are full-viewport, each.layers
is 100% width/height of its parent on all devices/browsers -
layers
handle scroll perfectly, when you touch/scroll a layer, layers below are not scrolled -
layers
are stacked by default, but can be paginated horizontally or vertically just using some modifiers -
layers
can be nested, each.layer-content
may contain another.layers
container
Installation
npm install @fabiocaccamo/layers.css
Usage
HTML
<div class="layers">
<div class="layer">
<div class="layer-header">
<!-- Header -->
</div>
<div class="layer-body">
<div class="layer-content">
<!-- Content -->
</div>
</div>
<div class="layer-footer">
<!-- Footer -->
</div>
<div class="layer-overlay">
<!-- Overlay -->
</div>
</div>
<div class="layer">
<!-- ... -->
</div>
<div class="layer">
<!-- ... -->
</div>
<!-- ... -->
</div>
CSS import
If you aren't using sass
, just include the layers.css
in your html
<link href="css/layers.css" rel="stylesheet" />
SASS import
@import "layers";
SASS/mixins
layer-resize
Resize layer header, content and footer automatically according to the given arguments.
Very useful, especially in media queries.
.layer--custom {
@include layer-resize($header-height, $header-transparent, $footer-height, $footer-transparent);
}
layers-resize
Similar to layer-resize
, with the difference that this must be included at .layers
level and affect all its direct child layers.
Resize layers header, content and footer automatically according to the given arguments.
Very useful, especially in media queries.
.layers--custom {
@include layers-resize($header-height, $header-transparent, $footer-height, $footer-transparent);
}
Elements modifiers:
.layers
-
.layers--pages-horizontal
: layers will be displayed horizontally -
.layers--pages-vertical
: layers will be displayed vertically -
.layers--page-{1,10}
: set the page to display, pages will change with a transition -
.layers--pages-notransition
: pages will change without transition
.layer
-
.layer--hidden
: hide element -
.layer--loading
: show inner.layer-overlay--loading
-
.layer--noheader
: hide inner.layer-header
-
.layer--nofooter
: hide inner.layer-footer
-
.layer--noscroll
: prevent inner content scroll
.layer-content
-
.layer-content--hidden
: hide element
.layer-overlay
-
.layer-overlay--dark
: set dark overlay style -
.layer-overlay--light
: set light overlay style -
.layer-overlay--visible
: show current overlay -
.layer-overlay--loading
: add loading cursor
License
Released under MIT License.