FlowHeight

Responsive web elements: position and style based on the browser window's height.

Inspired by FlowType.JS

What does FlowHeight do?

If you are building an awesome Landing Page or trying to style different sections and make their elements responsive across multiple devices, FlowHeight can help you!

FlowHeight changes the font-size based on the browser window's height. This allows for a perfect element fit at any screen height using the unit rem.

Demo

Check the demo here!

Getting Started

Step 1: Install FlowHeight

• Download the latest release.
• Clone the repo: git clone https://github.com/andresouza/flowheight.git.
• Install with Bower: bower install flowheight.

Step 2: Call FlowHeight

Simply call Flowheight before the close of your body tag:

$('html').flowheight();

Step 3: Make Changes

$('html').flowheight({
   minimum   : 500,
   maximum   : 1200,
   minFont   : 12,
   maxFont   : 40,
   fontRatio : 30
});

Step 4: Position the elements where you want and style them

h1 {
  font-size: 1.5rem;
  padding: 1rem 0;
}

img {
  position: absolute;
  top: 10rem;
  left: 5rem;
  height: 20rem;
}

#element {
  width: 15rem;
}

Options

Thresholds

Set minimum and maximum height thresholds.

$('html').flowheight({
   minimum : 500,
   maximum : 1200
});

Set minimum and maximum font-size thresholds.

$('html').flowheight({
   minFont : 12,
   maxFont : 40
});

Font-size

Set your own font-size using the fontRatio variable. When using fontRatio, increase the value to make the font smaller (and vice versa).

$('html').flowheight({
   fontRatio : 30
});

Brought to you by...

Andre Souza

FlowHeight is inspired by FlowType.JS

FlowHeight is licensed under the MIT License. See the LICENSE file for copy permission.