@fabiocaccamo/layers.css NPM

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