ProtoType CSS Starter kit

A breakdown of the components included

Type Styles

These common text elements have some default sizing and have the margin and width of the main text block. Also, there's no default h4, because I rarely find that you need one, but feel free to add it in.

h1: Headline 1

h2: Headline 2

h3: Headline 3



  1. Ordered
  2. List

There's also a default link style using a border instead of underline. You may have strong feelings about this though...

A utility class to center-align text.

And a paragraph style for drop-caps:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.


Images

Going to show off the image styles with this pretty lion photo from unsplash.

Size to text column

Float Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Float Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Centered but not constrained to the main text column

A simple grid system for tiling images.

No media queries to break-down the grid, so add as necessary.

The 'tight' class can be added to reduce the space between grid element.

Or the 'nopad' class to remove all space.

A full-bleed image outside of the containing divs

A container with a background image

Inline styles are used for padding and setting the image, but these can be written into the stylesheets as well if used consistently


Blockquotes

A variety of options for quote styles. These are mostly with pull-quotes in mind more so than academic blockquote style.

The default style bolds text. Size to text column.

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor”

Don't fit to text column. Center text. Add a background.

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor”

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Float Right

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor”

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Float Left

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor”

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Border Style

“Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor”

A simple code style

code {
  font-size: 90%;
  line-height: 1.2em;
  font-family: Monaco, Consolas, "Andale Mono";
  display: inline;
  color: #555555;
  padding: 1em 1em;
  background: #f4f4f4;
}

Some hr Styles

These are all center-aligned by default, but that can be changed.

Full width


Text-block size


The following use an :after selector. Internet Explorer does not allow this on an hr element, so a div can be used instead.

Small

Ellipses