Layout.css

Lightweight layout utility library.

Features

  • Sticky footer layout
  • Single page application layout

Demos

Holygrail SPA

Classes

Class Description
.layout-base Required. Height of a page become 100%. If it is not exist, layout-h100 is disabled. Need to add to html element.
.layout-non-scrollable Elements becomes not to be able to scroll. By adding to html element, pages won't be able to scroll. This class is ideal for sites like SPA. It supposes adding to html element.
.layout-max-fullheight Maximum height of elements equals screen height. It supposes adding to directly under the elements of body.
.layout-min-fullheight Minimum height of elements equals screen height. It supposes adding to directly under the elements of body.
.layout-h100 Height of elements become 100%.
.layout-flexbox Elements becomes flexbox.
.layout-flexible Elements becomes flexible size. Using directly under the .layout-flexbox, it will take up the remaining space available.
.layout-scrollable Elements are able to scroll.