Crescendo

A library for quick layouts.

Why Crescendo?

Mobile First

Crescendo was built with mobile devices in mind, but will ensure sites look good on a whole orchestra of devices.

Lightweight

Take a load off, literally. At 14 kb, Crescendo is perfect for keeping your site slim and light.

Open Source

Not only is Crescendo built with a mobile first philosophy and incredibly lightweight, it is also 100% open source. View it here.

Support

Crescendo is proud to announce it will be supported by all modern browsers. This includes Chrome, Opera, Firefox, Edge, and Safari.

Back to the basics.

Choose your own destiny! No more fighting pre-set styling. Cresendo has removed all styling from its classes except when necessary to function.

The Fixed-width Grid

This the fixed-width grid. It's the same as the fluid grid but it will stop expanding when the screen's width reaches a certain size, either 992 pixels or 1200 pixels, dependent on the screen size.

To use this grid, the "grid" classname is used.

12
1
11
2
10
3
9
4
8
5
7
6
6

The Fluid Grid

This is the fluid grid. It flexes the full width of available space. Just make sure your columns equal 12, and you'll be all set.

To use this grid, the "grid-fluid" classname is used.

12
1
11
2
10
3
9
4
8
5
7
6
6

The Equal-width Columns

For equal-width columns, you can use the prefix you would regularly use, but with the number left off. Each column will have the same width as its siblings in the row, but will break to width 100% at the specified screen size.

col-xl
col-xl
col-xl
col-xl
col-xl
col-xl
col-lg
col-lg
col-lg
col-lg
col-lg
col-md
col-md
col-md
col-md
col-sm
col-sm
col-sm
col-xs
col-xs

Utility Classes

Alignment

.right

.left

.true-center

.hcenter

.vcenter

.start

.end

Components

The Fold

The fold is your standard collapsible element. Just a couple of classes, and you're good to go.

Example Fold

Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci sed in quis. Iste aperiam quis vel optio placeat expedita incidunt, ipsam doloribus rem doloremque accusamus, perspiciatis error obcaecati distinctio magnam sit unde quaerat. Dolore ducimus dicta nesciunt iste, veniam earum vitae aliquam praesentium pariatur, officiis accusantium deserunt sequi mollitia est excepturi exercitationem tenetur blanditiis necessitatibus. Molestias ad sapiente nobis recusandae ipsam autem! Similique voluptate doloremque harum voluptas odio. Laudantium voluptatem nesciunt cum vero aut earum veniam dolor odit nam tempora amet eaque sunt distinctio adipisci libero