HyperPlan CSS

View project on GitHub

Introduction

HyperPlan CSS is essentially a remake of Angular Material's CSS layout with some ideas taken from other popular CSS grid systems like Pure or Tachyons.

It is mobile-first, responsive, based on CSS3 flexbox and less than 7Kb (minified + gzipped)

Getting Started

Copy the line of code below and paste it in the head of the html file(s) you want to include HyperPlan CSS in. 
<link rel="stylesheet" href="https://unpkg.com/hyperplan@latest/dist/hyperplan.min.css">
or install via npm: 
npm install hyperplan --save

Browser Support

The browser support for the latest flexbox specification is:

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+ (prefixed with -webkit-)
  • Android 4.4+
  • iOS 7.1+ (prefixed with -webkit-)

Container Layouts

HyperPlan CSS consist of two types of classes: the container classes (cp-c-*) and item classes (cp-i-*).

Use the .cp-c-row and .cp-c-column classes on a container element to specify the layout direction for its children: horizontally in a row or vertically in a column.

First item in row
Second item in row
First item in column
Second item in column

Note these classes only affect the flow direction for that container's immediate children / items.

Layouts and Responsive Breakpoints

To make your layout automatically change depending upon the device screen size, use one of the following classes:

Key CSS Media Query Applies Classnames
None None Always .cp-c-*
.cp-i-*
sm @media screen and (min-width: 35.5em) ≥ 568px .cp-c-sm-*
.cp-i-sm-*
md @media screen and (min-width: 48em) ≥ 768px .cp-c-md-*
.cp-i-md-*
lg @media screen and (min-width: 64em) ≥ 1024px .cp-c-lg-*
.cp-i-lg-*
xl @media screen and (min-width: 80em) ≥ 1280px .cp-c-xl-*
.cp-i-xl-*

Items within a Layout Container

Child elements of a container element with a cp-c-* classname must be items with a cp-i-* classname. This ensures that the content will be rendered properly.

To customize the size and position of items inside a container element, use the .cp-i-* classes:

.cp-i-20
.cp-i-50
.cp-i-flex

Add the .cp-i-flex class to a layout's child element and the element will flex (grow or shrink) to fit the area unused by other items.

.cp-i-flex
.cp-i-flex
.cp-i-flex

An item class can also be given an integer value from 5-100 as its suffix (e.g., .cp-i-45). The element will stretch to the percentage of available space matching the value. Currently, the flex classes integers are restricted to 33, 66, or multiples of 5.

.cp-i-30
.cp-i-45
.cp-i-25
.cp-i-33
.cp-i-66
.cp-i-50
.cp-i-flex
responsive...
flex 33% on mobile,
and 66% on bigger devices.
flex 66% on mobile,
and 33% on bigger devices.

Additional Flex Values

Classname Description
.cp-i-flex Will grow and shrink according to the remaining space after all items are sized. Starts with zero size.
.cp-i-auto Will grow and shrink according to the remaining space after all items are sized. Starts with a size based on its width or height.
.cp-i-none Will not grow or shrink. Sized based on its width or height.
.cp-i-nogrow Will shrink as needed, but won't grow. Starts with a size based on its width or height.
.cp-i-noshrink Will grow as needed, but won't shrink. Starts with a size based on its width or height.

Item Alignment

The .cp-c-align-*-* classenames are used to define how the items are be aligned in both the layout's direction and perpendicular to the layout's direction.

For example, .cp-c-row .cp-c-align-start-center would align items to the left horizontally and center them vertically.

Layout Direction Alignment in Layout Direction Alignment in Perpendicular Direction
row start (default) start
column center center
end end
spacearound stretch (default)
spacebetween

Spacing

HyperPlan CSS tries to balance consistency and control over the spacing in your layouts. Several spacing options are available and all can be used in combination with the responsive keys (e.g. .cp-c-xl-padding-5.
Index Size
0 0
1 0.25rem
2 0.5rem
3 1rem
4 2rem
5 4rem
These are the available spacing options:
  • .cp-c-padding-*
  • .cp-c-padding-h-*
  • .cp-c-padding-v-*
  • .cp-c-margin-*
  • .cp-c-margin-h-*
  • .cp-c-margin-v-*

Resources

A Complete Guide to Flexbox
A Visual Guide to CSS3 Flexbox Properties