In: Core CSS, Projects

Core CSS 1.2.1 update

This is a small update to Core CSS 1.2 which includes bug fixes and additions. For more information see the full page details.

There are two new additions with this update. The first is a class to handle negative text indentation for image replacement items, attach this class to any item you want to hide from user view but still have in the page for search engines to read. The second addition is three classes to help you control your text transformations, it’s now easy to handle text that comes in at the wrong case.

I fixed a minor spelling issue with all the charcoal named elements. I’ve left the old spelling in place, if you’ve used this style on other sites you can feel free to update your Core CSS without fear of those older classes breaking. I also adjusted the colors of the standard input elements slightly, they should now be more readable.

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.

Change log 1.2 > 1.2.1
1. + Added new Class txtImg. Used on image replacement items to remove the text from user display.
2. + Added three new Classes to handle Text Transforms: capitalize, uppercase, lowercase.
3. -/+ Fixed a minor spelling error: charcol becomes charcoal. Old spelling left for backwards compatibility.
4. -/+ Amended colors on standard input items to be more user friendly.

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.1 - 2010-01-18 */

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;}
.txtImg{text-indent:-2000px;}

/* 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;}
.capitalize{text-transform:capitalize;}
.uppercase{text-transform:uppercase;}
.lowercase{text-transform:lowercase;}
.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, .charcoal{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, .charcoalBg{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:#e5e5e5; 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:#e5e5e5;}
input[type="submit"]:hover{background-color:#75d0ff;}

Posted: Saturday, February 6th, 2010
Tags: 1.2.1, Core CSS, css, html, minified, reset, standardized, update