moonpixel I have been using the 960 Grid System CSS Framework , 960px frame divided into 12 or 16 columns, as for the kind of websites I work on (large graphics, less text) the pixel based layout is suitable. After I did about 10-20 sites using this framework I started realising that the time it saves me when creating the layout, at the end of the day I spend extra when making tweaks to the site (and there always are tweaks) and I did revert back to using custom templates based on my specific needs. I did create a “website” template composed just from the very basic elements I keep using again and again.
Now after 2 years of building sites from my website templates, messing, adding and removing stuff I came to a simplified version (site structure, xhtml, css, jquery, swfobject) which you can download for free just below.
I am still using a css reset from 960.gs, and the main css template which saves me most of time looks like this:
/* CSS Document 2010 Moonpixel http://moonpixel.com */ /*=================MAIN START==============*/ .tt1 {background:#FF0000;} .tt2 {background:#FF00FF;} .tt3 {background:#FFFF00;} html { } body {font: 13px/1.5 Myriad, Arial, sans-serif; background:url(../_images/bck2.jpg) 50% 0 repeat-x;} a:focus {outline: 1px dotted invert;} a:link {color:#000; text-decoration:none;} a:visited {color:#000; text-decoration:none;} a:hover {color:#000; text-decoration:none;} a:active {color:#000; text-decoration:none;} #footer a:link {color:#666; text-decoration:none;} #footer a:visited {color:#666; text-decoration:none;} #footer a:hover {color:#666; text-decoration:none;} #footer a:active {color:#666; text-decoration:none;} hr {border-color: #ccc; border-style: solid; border-width: 1px 0 0; clear: both; height: 0;} p { } sup {position: relative;top: -3px;vertical-align: top;font-size: 80%;} sub {position: relative;bottom: -5px;vertical-align: top;font-size: 80%;} h1 {font-size: 25px;} h2 {font-size: 23px;} h3 {font-size: 21px;} h4 {font-size: 19px;} h5 {font-size: 17px;} h6 {font-size: 15px;} .xxsmall {font-size: 10px;} .xsmall {font-size: 12px;} .small {font-size: 14px;} .medium {font-size: 16px;} .large {font-size: 22px;} .xlarge {font-size: 26px;} .xxlarge {font-size: 32px;} ol {list-style: decimal;} ul {list-style: square;} li {margin-left: 30px;} p, dl, hr, h1, h2, h3, h4, h5, h6, ol, ul, pre, table, address, fieldset {margin-bottom: 20px;} #wrapper {overflow:hidden; width:960px; margin:20px auto;} html body * span.clear,html body * div.clear,html body * li.clear,html body * dd.clear{background:none;border:0;clear:both;display:block;float:none;font-size:0;list-style:none;margin:0;padding:0;overflow:hidden;visibility:hidden;width:0;height:0} .margin-left {margin-left:20px;} .margin-right {margin-right:20px;} .margin-top {margin-top:20px;} .margin-bottom {margin-bottom:20px;} .margin-left-half {margin-left:10px;} .margin-right-half {margin-right:10px;} .margin-top-half {margin-top:10px;} .margin-bottom-half {margin-bottom:10px;} .margin-bottom-none {margin-bottom:0;} img.centered {display:block;margin-left:auto;margin-right:auto;} img.alignright {display: inline;} img.alignleft {display: inline;} .alignright {float:right;} .alignleft {float:left;} .bold {font-weight:bold;} .italic {font-style:italic;} .text-left {text-align:left;} .text-right {text-align:right;} .uppercase {text-transform:uppercase;} /*=================MAIN END==============*/ /*=================HEADER START==============*/ #header {width:960px;float:left;} /*=================HEADER END==============*/ /*=================CONTENT START==============*/ #content {width:960px;float:left;} /*======LEFT COLUMN START======*/ #left-column {width:160px;float:left;} #menu-sub {float:left;} #menu-sub ul {list-style:none;} #menu-sub ul li {font-size:16px;} /*======LEFT COLUMN END======*/ /*======MAIN COLUMN START======*/ #main-column {width:640px;float:left;} /*======MAIN COLUMN END======*/ /*======RIGHT COLUMN START======*/ #right-column {width:160px;float:left;} /*======RIGHT COLUMN END======*/ /*=================CONTENT END==============*/ /*=================FOOTER START==============*/ #footer {width:960px;float:left;text-align:center;color:#666;} /*=================FOOTER END==============*/
Tags: css, css framework, css html template download, css template, css xhtml template download
