CSS Boilerplate
Views:
I use this as a starting point for styling any new web site - well maybe not the "Fancy Styles", they are mostly for general web pages rather than web applications.
This is more or less the template I'll use to control javascript in any new web site. It usually gets dropped in to a new site along with my HTML Boilerplate and Javascript Boilerplate and Javascript Utility Class.
@charset "UTF-8";
/* _\|/_
(o o)
+---------oOO-{_}-OOo---------+
| |
| |
| |
+-----------------------------*/
/*********************************************************************************************
* Basic Styles & Resets
*/
body {
font-family: tahoma, helvetica, arial, sans-serif;
color: #000;
background-color: #fff;
margin: 0;
padding: 0;
}
@media print {
body {
font-size: 12pt;
}
}
@media screen, tv, projection {
body {
font-size: 12px;
line-height: 18px;
font-weight: normal;
}
}
body * {
margin: 0;
padding: 0;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin: 0;
padding: 0;
}
img, a img, fieldset {
border: 0;
}
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: purple;
}
h1, h2, h3, h4, h5, h6, legend {
font-size:100%;
font-family: tahoma, helvetica, arial, sans-serif;
font-weight: bold;
}
ol, ul {
list-style-type: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th {
text-align: left;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
q:before, q:after {
content: '';
}
.clear {
display: block !important;
float: none !important;
clear: both !important;
position: relative !important;
}
@media screen, tv, projection, print {
.hide, .hidden {
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
}
/*********************************************************************************************
* Fancy Styles
*/
@media screen,tv,projection {
}
/*
* Mast Head div#masthead
*/
@media screen, tv, projection {
div#masthead {
}
div#masthead h1 {
}
div#masthead h1 a {
text-decoration: none;
font-size: 2em;
}
}
/*
* Primary Navigation div#primarymenu
*/
div#primarymenu {
}
div#primarymenu ul {
}
div#primarymenu li {
display: block;
float: left;
font-size: 1.1em;
}
@media print {
div#primarymenu {
display: none;
}
}
/*
* Section Navigation div#secondarymenu
*/
div#secondarymenu {
}
@media print {
div#secondarymenu {
display: none;
}
}
/*********************************************
* Main Area for displaying content div#main *
*********************************************/
@media screen, tv, projection {
div#main {
}
}
/* Reset some important styles for printing! */
@media print {
div#main, div#main div {
width: 100% !important;
height: auto !important;
margin-top: 2em;
font-size: 12pt;
overflow: visible !important;
color: #000;
float: none !important;
clear: both !important;
}
}
/*
* Main Content - the main body of text goes here div#maincontent
*/
div#maincontent p,
div#maincontent ul,
div#maincontent ol {
margin-bottom: 1em;
}
div#maincontent h2,
div#maincontent h3,
div#maincontent h4,
div#maincontent h5,
div#maincontent h6 {
color: navy;
margin-bottom: 1em;
}
div#maincontent h2 {
font-size:1.2em;
}
div#maincontent h3 {
font-size:1.1em;
}
div#maincontent h4 {
font-size:1em;
}
div#maincontent.menu h3 {
font-size:1.2em;
}
div#maincontent a {
text-decoration:underline;
color: blue;
}
div#maincontent ul {
list-style-position: outside;
list-style-type: disc;
padding-left:2em;
}
@media screen, tv, projection {
div#maincontent {
}
}
/*
* Breakout - secondary content related to Main Conent div#breakout
*/
@media screen, tv, projection,print {
div#breakout {
}
}
@media print {
div#breakoutwrapper, div#breakout {
display: none !important;
}
}
/*
* Form styling for forms in the main content area
*/
@media screen, tv, projection {
div#main form {
width: 579px;
margin: 10px 0 0 0;
padding-bottom: 20px;
}
div#main form input, div#main form textarea, div#main form select {
width: 255px;
}
div#main form input {
vertical-align:middle;
}
div#main form textarea {
height: 70px;
}
div#main legend {
display: none;
}
div#main legend.required {
background: url('../img/required.gif') 245px 2px no-repeat;
display: block;
}
div#main legend.required span {
display: block;
float: left;
width: 260px;
}
div#main legend.required span {
visibility: hidden;
}
div#main legend.required span.show {
visibility: visible;
}
div#main label {
display: -moz-inline-box;
display: inline-block;
width: 255px;
vertical-align: top;
}
div#main fieldset input.warning, div#main fieldset textarea.warning, div#main fieldset select.warning {
background-color: red;
}
div#main fieldset input.checkbox {
width: auto;
}
div#main fieldset a {
margin-left: 186px;
}
div#main form li {
list-style: none;
padding: 5px 0;
}
div#main form li.required {
background: url('../img/required.gif') 245px 8px no-repeat;
}
div#main label span {
display: block;
width: 250px;
}
div#main input[type=checkbox] {
width: 12px;
}
div#main form input.button {
margin: 10px 0 0 255px;
width: auto;
}
}
/***************************************************
* End of Main Area for displaying content div#main *
****************************************************/
/*
* Footer div#footer
*/
div#footer ul {
float: right;
margin-right:-1px;
}
div#footer li {
display: block;
float: left;
border-right: 1px solid #666;
padding:0 8px;
}
div#footer {
float: none;
clear: both;
height: 25px;
font-size: 0.9em;
overflow: hidden;
background-color: transparent;
}
@media print {
div#footer {
display: none;
}
}
/*!****************************************************************************
scalable Inman Flash Replacement (sIFR) version 3.
Copyright 2006 – 2008 Mark Wubben, <http://novemberborn.net/>
Older versions:
* IFR by Shaun Inman
* sIFR 1.0 by Mike Davidson, Shaun Inman and Tomas Jogin
* sIFR 2.0 by Mike Davidson, Shaun Inman, Tomas Jogin and Mark Wubben
See also <http://novemberborn.net/sifr3> and <http://wiki.novemberborn.net/sifr3>.
This software is licensed and provided under the CC-GNU LGPL.
See <http://creativecommons.org/licenses/LGPL/2.1/>
*****************************************************************************/
@media screen {
.sIFR-flash {
visibility: visible !important;
margin: 0;
padding: 0;
}
.sIFR-replaced, .sIFR-ignore {
visibility: visible !important;
}
.sIFR-alternate {
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
display: block;
overflow: hidden;
}
.sIFR-replaced div.sIFR-fixfocus {
margin: 0pt;
padding: 0pt;
overflow: auto;
letter-spacing: 0px;
float: none;
}
}
@media print {
.sIFR-flash {
display : none !important;
height : 0;
width : 0;
position : absolute;
overflow : hidden;
}
.sIFR-alternate {
visibility : visible !important;
display : block !important;
position : static !important;
left : auto !important;
top : auto !important;
width : auto !important;
height : auto !important;
}
}
.sIFR-dummy {
width: 0px;
height: 0px;
margin-left: 42px !important;
z-index: 0;
}
