Chocolate.css

Inspired by the modernist graphic design movement which rose to popularity in the 1950's, this framework was built from the ground up with the twelve-column grid system in mind. This is, quite possibly, the worlds most pretentious front-end css framework. (Eat it Tyler Brûlé).

Hello.

About

Chocolate is an homage to the modernist graphic design movement which rose to popularity in the 1950's. This framework was built from the ground up with the twelve-column grid system in mind. More information can be found here

Features

Chocolate is a responsive CSS framework which is not only lightweight and highly customizable, but also very simple to use. Built on top of SASS, chocolate ships as standard CSS but can also be compiled from source.

Download.

1. Bower

Chocolate can be installed using the Bower package manager via terminal. Run this command in terminal and let Bower work it's magic.

bower install chocolate

2. Manual

The simplest and fastest way to get started is to include the style CSS file in your project. Just add this file to the head of your html file.

3. Clone Repo

And, if you'd like, you can also clone the GitHub repo via terminal. Chocolate is a work in progress, please feel free to contribute to the project.

Components

01 The Grid

one col
one col
one col
one col
one col
one col
one col
one col
one col
one col
one col
one col
three col
three col
three col
three col
four col
four col
four col
four col
eight col
two col
ten col
one col
eleven col
two col
four col
six col
three col
seven col
two col
two col
one col
four col
one col
two col
two col

02 Typography

H1 Sub heading

H2 Sub heading

H3 Sub heading

H4 Sub heading

H5 Sub heading
H6 Sub heading

Monocle ipsum dolor sit amet boeing 787 artisanal bureaux ut handsome airport. Gaggenau first-class tempor boulevard tote bag eu wardrobe cupidatat Asia-Pacific mollit Baggu. Id hand-crafted ryokan, exclusive remarkable sophisticated boulevard nulla conversation essential laborum.

Grids are good for the soul - R

03 Buttons

Alternate Button Style
Button Sizes
Tip

Button sizes can be applied to any button style. Just append the size class btnLarge, btnSmall orbtnBlock

04 Images

Default

Images are responsive to their parent wrapper. In this case a five col grid layout.

Border

A border can be added to every image by applying the .border class.

Greyscale Filter

Filters can be applied to any image. Simply append the .greyscale class. Greyscale images revert to full color on :hover

Disco Filter + Round Shape

Append the .disco and .round classes

05 Tables and Lists

Colour Hex RGBA
Primary #F4F4EC (123,123,123)
Secondary #F4B603 (123,123,123)
Unordered list:
  • Bespoke Tea
  • Arté
  • Cheese Plate
Ordered list:
  1. Travel
  2. Comfort
  3. Luxury

06 Circle Icons

A
B
C
D
E

The .circleIcon class can be used as a wrapper for text as well as iconFonts. Other helper classes, such as .success can also be applied

1
2
3
4
5

Alternate .circleIconAlt icons with helper classes applied. Similar to buttons.