Huh, what?!

BaCSS (pronounced “base”) is a stylesheet that is just that, a base set of styling for anything you’re building. It will add basic styling to anything and everything. “Why?” You may ask. Because nobody wants to show clients default browser styling. This page is using it.

Download it here.

Jus' like 'at

If you need IE support

You can include the JavaScript version of BaCSS. This will pull in the latest CSS as well as ie7-js which is required for CSS3 selector support.

<script src="http://github.com/sambowler/bacss/raw/master/latest.js"></script>

If IE support is no biggy

Just include the CSS or download to customise to your needs (you can drop me an email if there's something that you feel should be included and other people would benefit from).

<link rel="stylesheet" href="http://github.com/sambowler/bacss/raw/master/latest.css" media="screen">

Take A Look At It In Action →

Houston, we have a problem (a paragraph with the class “error”).

Houston, we fixed it (a paragraph with the class “success”).

Inline elements (this is a h1)

Pellentesque abbreviation tristique bold text et netus et strong text ac turpis egestas. emphasised text qua, Sit amet, ante. italic text sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Sub and sup: ¹/₄ amet est et ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Blockquote (this is a h2)

“No, Mr. Bond. I expect you to die”

Button (this is a h3)

Here’s .

Unordered list (this is a h4)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Vestibulum auctor dapibus neque.
Morbi in some code sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

A citation.

Ordered list (this is a h5)

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

Definition list (this is a h6)

Defining: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Various: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Things: Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Form

Fieldset & legend

Text input

Text input with placeholder

Select

Multiple select

Textarea A textarea

Checkboxes & radio buttons

Images (floated left by default)

Le Valais by yago1.com on Flickr

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Swiss Alps by yago1.com on Flickr.

Pre And Code

# This is code in a pre tag

There are also the following related elements:

<code>
<samp>
<kbd>
<var>