In: Core CSS, Projects

Core CSS 1.2 update

I’ve being using Core CSS at every opportunity, for both personal and production sites. Using the code so frequently has helped me find some flaws and add a few classes that we’re sorely missing. Core CSS gets an update to 1.2.

The first thing I noticed that needed changing was the way the standard width classes were named; fullWidth and quarterWidth while intuitive just aren’t as intuitive as width100 and width25. Switching to percentages made way more sense.  I’ve listed a full change log below, but I think you’ll agree Core CSS has become that little bit easier to use.

As always; using this code requires you include Eric Meyer’s Reset CSS before Core CSS. This can be included either at the beginning of Core CSS or in a separate file which is called first – I prefer the first method.

Change log 1.0 > 1.2
1. – Removed standardized ‘P’ style (I found there were far less bugs if this was set per project).
2. + Added ‘P.mini’ class (complements P.open nicely).
3. + Added ‘fixed’ class (useful for quick positioning).
4. -/+ Revamped all width definitions to exactly match widths required (fullWidth becomes width100 etc).
5. + Added ‘lightestGrey’ class (useful for dark background small-print).
6. + Added ‘lightestGreyBg’ class (helpful for footer backgrounds etc).
7. + Added ’superLightGreyBg’ class (extension of lightestGreyBg, again for footers, box backgrounds etc).
8. -/+ Revamped ‘input’ styles to be more neutral (should now be a proper option, rather than just a reminder to change the styles).

There are three ways for you to download the code.
1. Copy and paste the code listed below.

2. Download a file containing the full Core CSS.

3. Download a file containing a minified version of Core CSS.

/* core.css Paul West [http://www.yaypaul.com] */
/* Version: 1.2 - 2009-08-22 */

body{background: #fff;}

/* Block level */
div{overflow:hidden;}
.visible{overflow:visible;}
p.closed{margin:0;}
p.open{margin:35px 0 0 0;}
p.mini{margin:10px 0 0 0;}
.float{float:left !important;}
.floatRight{float:right !important;}
.relative{position:relative !important;}
.absolute{position:absolute !important;}
.fixed{position:fixed !important;}
.hidden{display:none}
.block{display:block}
.top{position:fixed; top:0; z-index:10;}

/* Page frameworks */
.frameworkCenter{margin:0 auto;}
.frameworkLeft{left:0; top:0; position:absolute;}
.frameworkRight{right:0; top:0; position:absolute;}

/* Page layout */
.width100{width:100% !important;}
.width75{width:75% !important;}
.width66{width:66% !important;}
.width50{width:50% !important;}
.width25{width:25% !important;}
.width33{width:33% !important;}
.width20{width:20% !important;}

/* Clearing */
.clear{clear:both;}
.clearLeft{clear:left;}
.clearRight{clear:right;}

/* Content control */
.left{text-align:left !important;}
.right{text-align:right !important;}
.center{text-align:center !important;}
.justify{text-align:justify !important;}
.small{font-size:smaller;}
pre{background-color:#fff; border:#333 dashed 1px; padding:10px;}
blockquote{padding:20px; font-style:italic;}

/* Links */
a{text-decoration:underline;}
a:hover{text-decoration:none;}
a:visited{text-decoration:underline;}

/* Colours */
.white{color:#fff !important;}
.black{color:#000 !important;}
.chalk{color:#eee;}
.charcol{color:#333;}
.darkestGrey{color:#484848;}
.darkGrey{color:#666;}
.midGrey{color:#888;}
.lightGrey{color:#ccc;}
.lightestGrey{color:#e5e5e5;}

/* Background colours */
.whiteBg{background-color:#fff !important;}
.blackBg{background-color:#000 !important;}
.chalkBg{background-color:#eee;}
.charcolBg{background-color:#333;}
.darkestGreyBg{background-color:#484848;}
.darkGreyBg{background-color:#666;}
.midGreyBg{background-color:#999;}
.lightGreyBg{background-color:#ccc;}
.lightestGreyBg{background-color:#e5e5e5;}
.superLightGreyBg{background-color:#f5f5f5;}

/* Normalise headings */
h1, h2, h3, h4, h5, h6{font-weight:normal;}

/* Table formating */
table td{padding:2px;}
td.first{padding:2px 2px 2px 4px;}

/* Input formating */
input, select, textarea{font-family:Arial, Helvetica, sans-serif; margin-right:10px; padding:4px; background-color:#dbdbdb; border:0;}
input:focus, select:focus, textarea:focus{background-color:#f5f5f5;}
input[type="radio"]{border:0 solid !important;}
input[type="checkbox"]{border:0 solid !important;}
input[type="submit"]{background-color:#888;}
input[type="submit"]:hover{background-color:#4aa056;}

Posted: Saturday, September 26th, 2009
Tags: 1.2, Core CSS, css, html, minified, reset, standardized, update