Creating your own tool kit – Part I: CSS

How many of you start every design from scratch? Meaning you will code your html and css from the beginning. If you are a beginner, probably quite a few. Which is a good thing, because that is how you learn your chops. I do it every once in a while, so I don’t forget things. Most of the time I am starting from a starter file I created. I have different versions of CSS files, depending on what I am building. At work, the one I made is very detailed, and can be because we follow a strict structure. It also helps because I consistently use the same id names, and when I firebug something, I know right away what the hell is going on.

Creating a file like this to be reused is just one of the tools web developers have in their “tool kit.” Things we have to speed up the time it takes to build a site. Tonight is part one in how ever many I decide to do. They won’t be consecutive, but spread out whenever I get one together. For my next one, I would like to do a base CSS file, but using Sass and showing the neat little tricks you can do with it.

Now…onward! I created one tonight for anyone that wants it, and you will see it below. The first 3 lines of mine is a very small reset. It takes the margin and padding to zero on a bunch of elements, so there is no problems with IE, and every browser starts the same. You will also see display: inline wherever I have a left or right margin added. This is to take care of the IE6 margin doubling.

Most of the numbers and colors are generic, but those are the main things that I change. I start with a very basic layout, and add the details as I go. With this type of CSS file handy, now I don’t have to rewrite the same thing over and over again, and it takes less development time.

Here is the CSS code for you – written in long block form. Keep in mind this is just a basic CSS stylesheet that I created for you tonight. The ones I normally use are much bigger. Customize to your heart’s content!

body, p, ul, ol, li, h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}
 
body {
	color: #666666;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	background: url(../images/) repeat-x left top #ffffff;
}
 
img {
	border: none;
}
 
h1 {
	color: #ff0000;	
}
 
h2 {
	color: #00F;	
}
 
h3 {
	font-style: italic;	
}
 
a {
	outline: none;
	zoom: 1;
}
 
a:focus {
	outline: none;
}
 
a:hover {
	color: #00F;	
}
 
li {
	list-style: none;
	background: url(../images/) no-repeat left 4px;
	padding: 0 0 0 10px;
	margin: 0 0 10px;
}
 
.small {
	font-size: 11px;
}
 
.highlight {
	font-weight: bold;
	color: #ff0000;
}	
 
#container {
	width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}
 
#header {
	width: 1000px;
	height: 200px;
	background: url(../images/) repeat-x left top;
}
 
#contentRepeater {
	width: 1000px;
	background: url(../images/) repeat-y left top;
}
 
#contentTop {
	width: 1000px;
	background: url(../images/) no-repeat left top;
	min-height: 500px;
	height: auto !important;
	overflow: hidden;
	_overflow: visible; /* IE6 - put this in IE specific stylesheet - here just to show */
}
 
#sideBar {
	width: 200px;
	float: right;
	margin: 20px 40px 0 0;
	display: inline;
}
 
#content {
	width: 600px;
	float: left;
	margin: 20px 0 0 40px;
	display: inline;
}
 
#content ul {
	padding: 0 0 0 40px;	
}
 
#footer {
	clear: both;
	background: url(../images/) repeat-x left top #ff0000;
	color: #ffffff;
}
 
#footer a {
	color: #ff0000;
	padding: 0 5px;
}
 
#footer a:hover {
	color: #00F;	
}
 
#footerContent {
	width: 1000px;
	margin: 0 auto;
	text-align: center;
}

And here is the html that would go with it (note I am only including the body and its contents here:

<body>
	<div id="container">
    	<div id="header"> </div>
        <div id="contentRepeater">
        	<div id="contentTop">
            	<div id="sideBar"></div>
                <div id="content"></div>
            </div>
        </div>
    </div>
    <div id="footer">
    	<div id="footerContent"></div>
    </div>
</body>

Enjoy!

jQuery junkBox

.slice(start, end);
This method can have two values to it, a start index number, and an end index number. You are getting a matched subset of what you are searching for. In the below example, we are getting all the li’s within an element with an id of nav, and only items 3,4,5, and 6 are getting a new color.

$('#nav li').slice(2, 7).css('color', '#000000');

Tags: ,

Leave a Reply