Elements

MCPVR has tons of cool elements that makes your web-site nice and stylish with little efforts

Vertical rhythm

The main feature of MCPVR is vertical rhythm. Basic typography elements are already tuned to fit in the rhythm.

All other elements can be adjusted to the rhythm with helper classes:

.leader - adds top-margin to the element
.trailer - adds top-margin to the element
.rhythm - adds top and bottom margins to the element

And, if it's not good enough - there's always .double to double any of those

Containers

Containers were made to serve as wrappers for grid rows.

But they can also be used as side-padded wrappers for anything else

Containers and vertical rhythm

By default containers are going one after another without any margins. You can add rhythm classes to specify needed separation and keep the rhythm

Preview

This paragraph is inside a .container

This paragraph is inside a .text.container

Segments

MCVPR has also a class to specify padded element: .segment. Add .double-padded to make a double padded segment

Preview

This div is a .segment

This div is .double-padded

This div is .double-padded inside a .segment

This div is a.segment inside a .double-padded

Grid

MCVPR has very simple adaptive grid system. Just place .row inside a .container and fill it with .cols with needed size

Column sizes

You can add more breakpoints by changing variables/devices.scss

	Phone (320px)	Phone Landscape (480px)	Tablet (600px)	Laptop (1024px)	Desktop (1240px)
.col.phone-*
.col.phone-landscape-*
.col.tablet-*
.col.laptop-*
.col.desktop-*

You can also specify column offset using .offset-device-*.

If you need padding-free grid - add .raw to your row

If you need you can reverse column order by adding .reverse or .reverse-device to a row

Preview

.col.phone-5

.col.phone-4

.col.phone-3

.col.phone-landscape-3.tablet-4

.col.phone-landscape-4.tablet-4

.col.phone-landscape-5.tablet-4

.col.phone-4

.col.phone-3

.col.offset-phone-4.phone-4

.col.offset-desktop-3.phone-3

Reversed

.col.phone-5

.col.phone-4

.col.phone-3

.col.phone-landscape-3.tablet-4

.col.phone-landscape-4.tablet-4

.col.phone-landscape-5.tablet-4

.col.phone-4

.col.phone-3

.col.offset-phone-4.phone-4

.col.offset-desktop-3.phone-3

Reversed only on phone

.col.phone-5

.col.phone-4

.col.phone-3

.col.phone-landscape-3.tablet-4

.col.phone-landscape-4.tablet-4

.col.phone-landscape-5.tablet-4

.col.phone-4

.col.phone-3

.col.offset-phone-4.phone-4

.col.offset-desktop-3.phone-3

Forms

Framework includes implementation of floating labels design pattern