Shaken. Not stirred.

Classic is a friendly CSS library for creating classy websites.

View Project

Stay classy.

Classic has everything you need to get started. It might be opinionated and bloated, but let's face it, that usually makes your life easier.

Classic has been built for internal use, and so currently ships without documentation or support.

Site Structure

Use different sections, panels and components to break up your content.

Highlight content with embedded panels.

Use classes to change colours.

Emphasise content with blockquotes.

          <div>Show off your sweet code.</div><div>By using a code element.</div>
        

Column one.

Read more

Column two.

Read more

Column three.

Read more

Column four.

Read more

Column five.

Read more

The Grid

It comes with a 12 step grid layout, and you can overflow the columns into a horizontal gallery.

Case Study

Column one

Columns are pretty neat for dividing up for your 'at-a-glance' content, like products and services.

Read more

Case Study

Column two

Columns are pretty neat for dividing up for your 'at-a-glance' content, like products and services.

Read more

Case Study

Column three

Columns are pretty neat for dividing up for your 'at-a-glance' content, like products and services.

Read more

Masonry Blocks

If you have 4 compelling panels, try the special masonry layout.

Panel

Panel

Panel

Panel

Editorial

I've whipped up a special layout for posts and anything else editorial or long-form in nature.

What is code?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sagittis libero ac diam mattis, vitae consequat augue suscipit. Aenean efficitur ante convallis ullamcorper scelerisque. Aenean in tincidunt libero. In ac vulputate urna, nec fermentum augue. Nulla est felis, luctus sit amet orci eget, lobortis egestas ligula. Donec varius lobortis eros, sit amet facilisis turpis porta pretium. Aenean ultricies commodo metus vitae scelerisque. Cras et dictum orci. Integer accumsan, libero ut maximus pulvinar, urna libero mollis neque, sit amet hendrerit dui quam quis diam. Morbi scelerisque ornare libero non tempus. Ut convallis dolor id vehicula sollicitudin. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis id scelerisque libero. Nunc maximus finibus dolor ac euismod. Nullam vulputate tortor eu mauris luctus porta.

Mauris sit amet libero vel quam sollicitudin semper. Donec quis efficitur enim, non tempus massa. Nulla volutpat ipsum sed massa condimentum, non dictum lorem dictum. Nulla vitae ante urna. Donec porttitor, tellus eget sollicitudin sagittis, turpis ex pharetra justo, et hendrerit neque erat a mauris.

Nunc finibus risus ut velit malesuada mattis. Donec felis lectus, egestas luctus diam nec, elementum gravida nibh. Suspendisse nec lorem lacus. Aliquam non lectus felis. Ut risus diam, elementum ac cursus laoreet, viverra ac enim. Sed nunc leo, faucibus quis imperdiet sed, posuere sit amet dui. Donec quis mauris nec magna finibus porta. Mauris faucibus quam viverra massa viverra facilisis. Pellentesque vestibulum, augue a aliquam egestas, tortor velit aliquet elit, condimentum ultrices augue enim eget augue. Proin sapien libero, maximus ut tincidunt sed, facilisis sed ante.

Widgets

In general, carousels should be avoided because they hide content from the user, and are slower to navigate than scrolling. On the other hand, people will click anything to see more dogs.

Making Contact

Always make it simple for customers and clients to contact you.