Jump to content


Photo

Initial CSS File To Jump Start Your Project


  • Please log in to reply
11 replies to this topic

#1 shelfimage

shelfimage

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,112 posts
  • LocationNashville

Posted 24 December 2008 - 02:51 PM

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.c...ead=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, 04 September 2009 - 10:25 AM.

  • 0

#2 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 24 December 2008 - 03:01 PM

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, 24 December 2008 - 03:08 PM.

  • 0

#3 shelfimage

shelfimage

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,112 posts
  • LocationNashville

Posted 24 December 2008 - 03:13 PM

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.

.
  • 0

#4 Wickham

Wickham

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 1,732 posts
  • LocationSalisbury UK

Posted 24 December 2008 - 03:21 PM

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.
  • 0

#5 shelfimage

shelfimage

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,112 posts
  • LocationNashville

Posted 24 December 2008 - 03:30 PM

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, 31 December 2008 - 10:49 AM.

  • 0

#6 Guest_fearless_fool

Guest_fearless_fool
  • Guests

Posted 16 July 2009 - 03:00 PM

@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, 16 July 2009 - 03:01 PM.

  • 0

#7 shelfimage

shelfimage

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,112 posts
  • LocationNashville

Posted 04 September 2009 - 10:22 AM

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! :)
  • 0

#8 Eddie

Eddie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,618 posts
  • LocationTexas

Posted 04 September 2009 - 12:31 PM

What are the minor changes?
  • 0

#9 shelfimage

shelfimage

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,112 posts
  • LocationNashville

Posted 11 September 2009 - 11:21 AM

What are the minor changes?

I can't remember exactly... mostly formatting changes, added dd, dt to the resets and new classes
  • 0

#10 VAlindaloo

VAlindaloo

    New member

  • New Members
  • 7 posts

Posted 29 November 2009 - 05:30 PM

Thank you! I'm soo new to this and this will help!

Linda:)
  • 0

#11 bsmbahamas

bsmbahamas

    New member

  • New Members
  • 9 posts
  • LocationBahamas

Posted 06 January 2012 - 07:13 PM

this is awesome and commented much better than the legendary eric meyers css reset, thanks to all that helped to shape it.
  • 0
"We are what we repeatedly do. Excellence, therefore, is not an act, but a habit." -- Aristotle: was a Greek philosopher

#12 Guest_tori

Guest_tori
  • Guests

Posted 28 March 2012 - 04:23 AM

Really interesting post, covering with great info
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users