CSSFrame - a simple CSS Framework

CSS Framework? Why?

Coming from programming world, you don’t usually have a luxury of building everything from the ground up there. Programmers work with blocks of code, components, classes or even complete applications (services) to combine proper elements and get a desired functionality. Something like mashups if you prefer the web analogy. You can’t work otherwise - nothing would be done on time!
Web developers often start from a blank CSS and HTML files, or by copying random pieces from the previous projects. This approach results in situation when each project is unnecessary unique - meaning longer development times and more labor intensive maintenance. Yes, CSS is simple compared to modern programming languages, but doing repetitive work is not smart, nor efficient. Like when in 18 century uniquely made rifles were replaced with factory made rifles with interchangeable parts, the coding for web development should also become modular.

What are the alternatives?

62.5% + Eric’s reset
Use Eric Meyer’s CSS reset and set base font size to 62.5% (10px from default 16px). It’s a proper start, but why stop there?

YAML
http://www.yaml.de/en/ - “Yet Another Multicolumn Layout”. That’s a real CSS Framework - it’s big! And you’d need to spend some time to understand what (and HOW if you are a good developer) it does things. While being a fantastic tool, it’s “I’ll do it all” approach just not for me. Why use a bomb when sharpshooter could do the job? I’d much rather have a slim and mean and simple and single CSS file to do the job.

YUI
Yahoo gets all my respect for developing great web development platform and standardizing the interface. But when I have to write 10 levels of divs just to get the same layout as I could get with plain table - I don’t see it as a progress, but introduction of unnecessary complexity based purely on ideological reasons. And while we are at it: I will use table for layout when it results in savings in development time, simplicity and maintenance time (the rest being equal) - these savings are the criteria of your effectiveness, not how politically correct you’ve been.

Blueprint CSS
http://code.google.com/p/blueprintcss/ Nice start, and it was Blueprint CSS that inspired CSSFrame. But if I was happy with it, CSSFrame would not need to be created in the first place. Blueprint CSS has good ideas, but feels like an alpha version with so many rough edges, arbitrary selection of default colors (why em and dfn should have yellow background???), half-way implemented vertical rhythm, no support for background colors on columns and other inconsistencies that made me to redo too much to use it.

Arguable CSSFrame choices

Web developers can passionately fight about some CSSFrame choices. Here’s some fuel.

Screen resolution and page width

Is it worth pleasing few 800×600 people at the expense of overwhelming majority 1024+ users? You are free to make your choice, just keep in mind that you can not give a perfect design to both. My take: 1024+ majority should get most comfortable experience and 800 people should not scroll horizontally while reading the main text. In the case of CSSFrame this means that full (usable) width of the page is 940px, no less than two columns (240px) are used for sidebar(s) and the main area is six columns (720px) or less.

em vs px

I’ve surrendered use of em in favor of px. Does it offend your religious believe in necessity of em? Putting aside the crusader’s rage, getting the design the way you want with em will take more effort than with px. (And to build to a vertical rhythm with em is way too much calculation.) My choice is to apply the time where it really matters. And with px text scales just fine in any modern browser. How about support for IE6? See below.

IE6 and older

Wouldn’t it be nice if your design looked the same not only in modern browsers, but in IE6 and below? You can keep dreaming or face the reality - nothing comes free. It takes time and effort to make your site look the same in older browsers. The time taken from other aspects of your web site. And why? OK, if you are the size of Amazon or work for highly formalized company - you have no choice. But otherwise you waste your time trying to aesthetically please people who don’t care about design and whose numbers are constantly shrinking. These users need an accessible interface - as long as they can use it in the same way the modern users can, you can forget your design bells and whistles - your job is done. But even in making the design accessible I still prefer keeping my font fixed (12px for the main text and 10px for smallest) - that’s as far as I am willing to go here.

Forms

There are several alternatives in laying out the form elements: old-fashioned table layout, div for each row, label+input+br and dl-based. label+input+br works for the basic layouts only, not to mention non-semantic br. Correction: it doesn’t actually work even for simplest layouts if you use label tags for radiobuttons and checkboxes (as you should). Div for each row feels stupid with markup messier than tables and not much advantage. I actually liked the table layout for it’s flexibility since the overhead is quite small and I am not a fanatic proclaiming that tables are evil just because I was told so, but dl-based solution allows to easily change from horizontal to vertical layout. Yes, it is an abuse of dl tag as are the most of it applications, but again I see no harm here other than theoretical.
Note that label formatting is actually done on dt level, not label, because you labels can be used inline for checkboxes and radiobuttons.

OOP Infusion

One of the cornerstones of object-oriented programming is polymorphism - different objects respond consistently to same-named calls. When you ask a printer to PRINT, you know what to expect even knowing nothing about how the particular printer implements it. Same concept is used in CSSFrame as far as brain-dead CSS allows for it. Class “narrow” would set the width of form elements to less than normal. Class “none” would remove all margin and padding to return to “bare” reset state.

HTML vs XHTML

While it is indifferent to CSSFrame if you have your pages in HTML or XHTML, the examples are in HTML Strict. It does not make sense to write XHTML at this time - browser don’t care for it. HTML Strict is the way to go as of today. Do your research if curios.

Non-semantic markup

All layout related markup in CSSFrame is quite non-semantic by design. While in theory it sounds no-no, practically it results in greater flexibility and shorter development times. Not to mention that it is the only way I see to have an unchangeable CSS file.

Copyright

CSSFrame was influenced by so many, that it is more a compilation that an original work. Since credit for the work is shared with so many and the creation of it was possible because of the Open Source spirit, the code is licensed under “Take it and do whatever you want with it”. However if you keep a link to cssframe.com, you may consider me to be your friend. And it would be nice of you to keep reference to cssframe.com in the source code. But if you don’t - I wouldn’t have problem with it (I’ll be haunting you in nightmares - that’s all)

/* cssframe.css (CSSFrame.com v.2007-11-01); no need to modify; accompany with cssframesnippets.css*/

/* reset */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
margin:0;padding:0;border:0;
font-weight:inherit; font-style:inherit;font-size:100%; font-family: inherit;
vertical-align:baseline; text-align:left;}
table{border-collapse:separate; border-spacing:0;}
blockquote:before,blockquote:after,q:before,q:after{content:”";}

/* set some */
caption,th,strong,dt{font-weight:bold;}
em,quote,blockquote,cite{font-style:italic;}
ul,ol,li,dd{margin-left:1em;}
ol.none,ul.none{list-style:none;} /*use .none for blank lists*/
ol.none,ul.none,ol.none li,ul.none li,li.none,dl.none dd,dd.none,dl.none{margin:0;}
dl.none dt, dt.none{font-weight:inherit;}
option{padding-left:0.4em;}
img{display:block;} /* for strict mode */

/* font size x18px */
body{font-size:12px; line-height:18px;}
h1,h2,h3,h4,h5,p,ol,ul{margin-bottom:18px;} /*all but h6*/
div p:last-child {margin-bottom:0;}
h1{font-size:36px; line-height:36px}
h2{font-size:24px; line-height:36px}
h3{font-size:18px;}
h4{font-size:12px; font-weight:bold;}
h5{font-size:12px; font-weight:bold;}
ul ul,ul ol,ol ul,ol ol{margin-top:9px; margin-bottom:9px;}/*use .none to nullify margins*/

/* grid */
body{text-align:center;}
.container{text-align:left; margin:0 auto; width:960px;} /*feel free to overwrite*/
.col1,.col2,.col3,.col4,.col5,.col6,.col7,.col8,.colhalf{float:left;}
.col1{width:120px;}
.col2{width:240px;}
.col3{width:360px;}
.col4{width:480px;}
.col5{width:600px;}
.col6{width:720px;}
.col7{width:840px;}
.col8{width:960px;}
.colhalf{width:50%;}/*.colhalf should be inside .colX and have no .colX inside;*/
.padr1{padding-right:120px;}/*pads right*/
.padr2{padding-right:240px;}
.padr3{padding-right:360px;}
.padr4{padding-right:480px;}
.padr5{padding-right:600px;}
.padr6{padding-right:720px;}
.padr7{padding-right:840px;}
.padl1{padding-left:120px;}/*pads left*/
.padl2{padding-left:240px;}
.padl3{padding-left:360px;}
.padl4{padding-left:480px;}
.padl5{padding-left:600px;}
.padl6{padding-left:720px;}
.padl7{padding-left:840px;}
/*.colcontent should be inside .colX and have no .colX inside
feel free to change, but border+padding should be divisible by 18px*/
.colcontent{padding:9px;}
.colcontent_border{padding:8px; border-width:1px;}
.colcontent_vborder{padding:9px 8px; border-width:0 1px;}
.colcontent_hborder{padding:8px 9px; border-width:1px 0;}

/* common */
.small{font-size:.8em;}
.smaller{font-size:.9em;}
.larger{font-size:1.1em;}
.large{font-size:1.2em;}

.left{float:left; margin:0 18px 18px 0;}
.right{float:right; margin:0 0 18px 18px;}
.sidenote{border-width:1px; padding:8px 10px; margin-bottom:18px;}
.highlight{background-color:#ffa;}
span.replace{position:absolute; left:-2000px;}/* text for images */
p.last{margin-bottom:0;}
/*Use .clearfix on parent containers to autoclear floats*/
.clearfix:after{content:”.”;display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
/* Hide from IE-mac \*/* html .clearfix{height:1%;}.clearfix{display:block;}/* End hide */

/*
cssframesnippets.css
Copy the blocks of code from this file to your main stylesheet file.
It is assumemed that a link to cssframe.css would precede this code.
Make sure to start your CSS with “Starter CSS” block from below
- this is the only block you are supposed to copy, the rest is optional.
Feel free to modify any of the code below according to your needs.
Remove comments to save space.
Code blocks:
- Starter CSS (required to be copied): sets colors, fonts and some other initial stuff
- Forms CSS: nicely formatted forms
- Table CSS: in case you need nice tables
*/

/*– Starter CSS - start your style sheet by copying this block –*/
/* layout */
.container{width:960px;} /*Also can be 840, 720, 600…*/
.container{background:url(images/grid.png);}
/* border styles and colors */
.colcontent, .colcontent_border, .colcontent_vborder, .colcontent_hborder, .sidenote{border-style:solid; border-color:#666;}

/* colors */
body{color:#000; background:#fff;}
a{text-decoration:underline;}
a:link{color:#008;}
a:visited{color:#3D3D88;}
a:hover,a:active{color:#00d;}
.quiet{color:#666;}

/* font-family (sizes are set already) */
body{font-family:Georgia,”Times New Roman”,Times,serif;}
select,input,textarea{font-family:Arial,Helvetica,sans-serif;}
pre,code{font:”Courier New”, Courier, mono;}

/*for dev only*/
.bgcolor {background-color:#efe;}
.bgcolor1 {background-color:#fee;}
.bgcolor2 {background-color:#eef;}
/*– Starter CSS end — */