shelfimage Posted December 24, 2008 Report Share Posted December 24, 2008 (edited) 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 September 4, 2009 by shelfimage Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 24, 2008 Report Share Posted December 24, 2008 (edited) 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 December 24, 2008 by Wickham Quote Link to comment Share on other sites More sharing options...
shelfimage Posted December 24, 2008 Author Report Share Posted December 24, 2008 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. . Quote Link to comment Share on other sites More sharing options...
Wickham Posted December 24, 2008 Report Share Posted December 24, 2008 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. Quote Link to comment Share on other sites More sharing options...
shelfimage Posted December 24, 2008 Author Report Share Posted December 24, 2008 (edited) 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 December 31, 2008 by shelfimage Quote Link to comment Share on other sites More sharing options...
Guest fearless_fool Posted July 16, 2009 Report Share Posted July 16, 2009 (edited) @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 July 16, 2009 by fearless_fool Quote Link to comment Share on other sites More sharing options...
shelfimage Posted September 4, 2009 Author Report Share Posted September 4, 2009 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! Quote Link to comment Share on other sites More sharing options...
newseed Posted September 4, 2009 Report Share Posted September 4, 2009 What are the minor changes? Quote Link to comment Share on other sites More sharing options...
shelfimage Posted September 11, 2009 Author Report Share Posted September 11, 2009 What are the minor changes? I can't remember exactly... mostly formatting changes, added dd, dt to the resets and new classes Quote Link to comment Share on other sites More sharing options...
VAlindaloo Posted November 29, 2009 Report Share Posted November 29, 2009 Thank you! I'm soo new to this and this will help! Linda:) Quote Link to comment Share on other sites More sharing options...
bsmbahamas Posted January 7, 2012 Report Share Posted January 7, 2012 this is awesome and commented much better than the legendary eric meyers css reset, thanks to all that helped to shape it. Quote Link to comment Share on other sites More sharing options...
Guest tori Posted March 28, 2012 Report Share Posted March 28, 2012 Really interesting post, covering with great info Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.