v-layout

Stylus mixin for vertical layouts with both fluid and fixed-height elements

Usage no npm install needed!

<script type="module">
  import vLayout from 'https://cdn.skypack.dev/v-layout';
</script>

README

v-layout

Stylus mixin for vertical layouts with any number of fixed-height elements and an optional fluid element or gap. Employs absolute positioning, which, unlike calc-based grids, has been supported by Android for a while now.

Installation

npm i v-layout

In your stylesheet:

@import '~v-layout'

Usage

.container
  position: relative
  v-layout: [full-width] [top-stack-heights...] [fluid | fluid-gap] [bottom-stack-heights...]

Check out the examples.

Restrictions

  • There can only be one fluid element or fluid gap per container.
  • All heights on either side of the gap have to be of the same unit
  • The container must be positioned (position: relative usually has no other side effects)