Jump to content

Initial CSS File To Jump Start Your Project


shelfimage

Recommended Posts

Here is a copy of my initial css file that I use to jump start my projects. The original css download post at the former Killersites.com forum is here for reference: http://killersites.com/mvnforum/mvnforum/viewthread?thread=10970#54819.

 

The original posts have had over 13,000 combined views there has been over 420 downloads at my Killersites' Box.net account. My Thanks to everyone that has contributed!

 

:: Download at Box.net :: http://www.box.net/shared/j2q23gqzue

 

:: CSS to copy & paste ::


/* ======== DomainName.com Screen Stylesheet ::
Author:    Name, Website
Created:    Date Intitals
Updated:    Date Initials
TOC:        Resets; HTML & Body; Links; Typography; Lists; Tables;
       Classes; Template; Navigation; Page Styles; Forms; Other;
----------------------------------------------------------------- */

/* ======== Resets ::
----------------------------------------------------------------- */
body, address, blockquote, h1, h2, h3, h4, h5, h6, p, pre, dl, ol,
ul, dd, dt, li, fieldset, form {margin:0;padding:0;}

/* ======== HTML & Body ::
----------------------------------------------------------------- */
html {font-size:100.01%;height:101%;}
body { 
height:100%;
font:62.5%/1.4 Arial,Tahoma,Geneva,Helvetica,sans-serif;
background:#fff;
color:#333;
}

/* ======== Links ::
----------------------------------------------------------------- */
a,a:visited {text-decoration:underline;}
a:active, a:focus, a:hover {text-decoration:none;outline:none;}
a img {border:none;}

/* ======== Typography ::
----------------------------------------------------------------- */
/* ==== Resets for Nested elements 
- Helpful for Relative Font Size Sites (Not Needed for Fixed Font Size Sites) ==== */
blockquote p, p blockquote, div div, div li, div p,div dt,div dd,
li li, li li li,ul ul, p address, p pre, pre p,
td address, td h1, td h2, td h3, td h4, td li, td dd, td dt, td p, td pre {font-size: 100%;}

abbr,acronym {text-decoration: none;border:0}
address, h1, h2, h3, h4, h5, h6, dd, dt, li, p, pre {padding:.6em 0;}
h1 {font-size:2.2em;}
h2 {font-size:1.8em;}
h3 {font-size:1.6em;}
h4 {font-size:1.4em;}
h5 {font-size:1.2em;}
h6 {font-size:1.1em;}
address,blockquote,div,dd,dt,li,p,th,td {font-size:1.2em;}
dt {font-weight:bold;}
pre {font-size: 12px;}
q:before,q:after {content:'';}

/* ======== Lists ::
----------------------------------------------------------------- */
dl, ol, ul {margin-left: 20px;}
li, ol, dd, dt {vertical-align:middle;list-style-position: inside;}

/* ======== Tables ::
----------------------------------------------------------------- */
table {
border:none;
border-collapse:collapse;
border-spacing:0;
overflow:hidden;
word-wrap:break-word;
}
caption, th, td {text-align: left;vertical-align:top;}

/* ======== General Purpose Classes ::
----------------------------------------------------------------- */
.alignleft {text-align:left;}
.alignright {text-align:right;}
.center {text-align:center;}
.clear {clear:both;padding:0;margin:0;line-height:0;}
.external {/* if needed with new window JS */}
.floatleft {float:left;}
.floatright {float:right;}
.hidden {display:none;}
.inline {display:inline;}
.large {font-size:20px;font-weight:bold;}
.light {color:#999;}
.png {/* if needed with png fix JS */}
.small {font-size:10px;font-weight:normal;}

/* ======== Template ::
----------------------------------------------------------------- */
#wrap {width:900px;margin:0 auto;}
#header { }
#content { }
#main {float:right;}
#sidebar {float:left;}
#footer {clear:both;}

/* ======== Navigation ::
----------------------------------------------------------------- */
/* ==== Main Menu ==== */
#menu ul {margin:0 auto; list-style: none;}
#menu li {float: left;}
#menu a {display: block;}

   /* 2nd Tier Child Menu with accessible drop down method */
   #menu li ul {position: absolute;top: -999em;left: -999em;}
   #menu li:hover ul, #menu li.hover ul {top: auto;left: auto;}

/* ==== Footer Menu ====- */
#footer ul { }
#footer li { }
#footer li a { }
#footer li a:active, #footer li a:focus, #footer li a:hover { }

/* ======== Page Styles ::
----------------------------------------------------------------- */


/* ======== Forms ::
----------------------------------------------------------------- */
label {cursor:pointer;}
fieldset {border:0;}
input,label,select,textarea {
line-height:1.2;
vertical-align:baseline;
font-size:inherit;
font-family:inherit;
}
input[type="radio"], input[type="checkbox"] {position:relative;top:1.5px;}
input[type="text"],textarea {padding:.2em;}
textarea {overflow:auto;}

/* ======== Other ::
----------------------------------------------------------------- */

 

There are many helpful tips, suggestions, and solutions posted here in the original forum!

 

The very first, original thread that started this conversation offers additional information of the origins of these CSS settings and why I use what I do. I explored many CSS reset and CSS framework approaches and realized that they were overkill for the majority of my projects.

 

This file is not meant to fit everyone's projects and needs. It will reset the most common cross browser inconsistencies and provide a method of organization, commenting, and serve as a foundation to build your own file.

 

Will you please post any suggestions, changes, or improvements?

Also, please keep replies focused to the subject of initial css files, css reset files, frameworks, etc., to keep this thread a useful tool for everyone at KS.

 

 

:: Revision History ::

-> Ver. 2.0 -> 6-7-08 -> New version carried over from original thread and added resets for caption, th, td

-> Ver. 2.1 -> 6-10-08 -> Revised to include basic typography settings suggested by Wickham:

Using a unitless line-height in the body, and fixes for margin and padding in typography section.

-> Ver. 3.0 -> 12-20-08 -> Updated Typography and Form sections. Corrected issue with nested resets. Support for an IE6 hover bug as suggested by Eric (eewatson).

-> Ver. 3.1 -> 9-4-09 -> Updated Resets, Forms, Changed Comment Style, less than 4 rules are written on the same line to conserve space and reduce file size.

 

.

Edited by shelfimage
Link to comment
Share on other sites

It certainly is useful to have a starting point for a quick webpage, before you add detailed edits.

 

 

In most places font is % or ems but in two places, pre and .small, it's in px. Could this cause the display to look a bit odd (edit: in IE which doesn't resize text when in px) when someone resizes text?

Edited by Wickham
Link to comment
Share on other sites

In most places font is % or ems but in two places, pre and .small, it's in px. Could this cause the display to look a bit odd (edit: in IE which doesn't resize text when in px) when someone resizes text?
Well, for my projects it is ok and I don't worry as much as I once did about it because all modern browsers 'Zoom' by default instead of increasing text size. IE6 and FF2 are the only browsers that are still showing significant usage that resize text and do not support zoom.

 

The % is a reset explained in the first post. It forces an 'em' to be 10px regardless of monitor resolution and size. So I start with a %, use em for typography, and then force a large or small size using px. The classes there are just examples, but I use them in my CMS sites as the classes that TinyMCE grabs and makes available for site owners. So, if a site owner wants to float something or make a font small, they assign the appropriate class using the Style dropdown option of TinyMCE and in some cases FCKEditor.

 

.

Link to comment
Share on other sites

Well. I'm being a bit fussy; it's just that if a person with bad eyesight enlarges only the text in IE6 or IE7, the 10px .small class text will still be 10px, which could be difficult for them to see, but IE7 has a zoom so it's probably only IE6 which my comment applies to, and that's not got a huge share of the market now.

Link to comment
Share on other sites

Well. I'm being a bit fussy; it's just that if a person with bad eyesight enlarges only the text in IE6 or IE7, the 10px .small class text will still be 10px, which could be difficult for them to see, but IE7 has a zoom so it's probably only IE6 which my comment applies to, and that's not got a huge share of the market now.

right. it is only IE6 that applies to which is why I no longer worry about it. I have the same concerns you write about. Thankfully modern web browsers are finally beginning to behave like modern web browsers. But, remember, this is an example of what works best for my projects. 90% of my projects are from agencies that hire me as their lead developer and want fixed width, fixed fonts, fixed everything to match the specifications exactly. Unfortunately there is little room for me to propose better approaches when I receive the final PSD and specs approved by the client.

Edited by shelfimage
Link to comment
Share on other sites

  • 6 months later...
Guest fearless_fool

@shelfimage: this tyro thanks you for a VERY useful bit of work -- your default.css is a great way to get going.

 

Have you run it through the W3C validator, i.e. http://jigsaw.w3.org/css-validator/? I tried it and it came up with 1 error ("Property word-wrap doesn't exist : break-word") and 5 warnings. Are any of these worth looking at?

 

best,

 

- ff

Edited by fearless_fool
Link to comment
Share on other sites

  • 1 month later...
Have you run it through the W3C validator, i.e. http://jigsaw.w3.org/css-validator/? I tried it and it came up with 1 error ("Property word-wrap doesn't exist : break-word") and 5 warnings. Are any of these worth looking at?

Cool!

 

Correct, word-wrap is an IE only property. I'm not too worried about that though. The warnings that are shown will be there until the person using the file applies it to their project and makes it their own. It is only a skeleton that needs to be modified for each project.

 

 

UPDATED VERSION - New version uploaded to Box.net (http://www.box.net/shared/j2q23gqzue) with minor differences. The important parts are Resets; HTML & Body; Links; Typography; Lists; Tables; and Forms - because they help reset elements and make it easier to be cross browser compatible. The other sections are just examples of what might be needed for typical projects. Enjoy! :)

Link to comment
Share on other sites

  • 2 months later...
  • 2 years later...
  • 2 months later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...