Creating a Time Saving CSS Template

Dec
26
2009

If you are a freelance developer then saving time always works in your favor. One way to help you save time, especially if like me, you find yourself doing a lot of the same kind of work over and over, is setting up templates. In the case of web development, having a customized template for your CSS stylesheet can save you from repetitiously typing the same bits of code that you include in most of your web dev projects.

I am not talking about a full framework necessarily, just a simple stylesheet template that you can open up and immediately dive into. That way when you have an idea for a project and are ready to get started, you have most of the busy work built so you get right into the heart of it. So below I have not only prepared some notes on the process, but also walk you through setting up a basic CSS stylesheet template of your own.

Header Comments

Header comments, while required for WordPress themes, are not always a necessity, but they can come in handy for notating any stylesheet. Any notes that you may need to leave yourself for your work, are easily accessible or added. Just a quick note, if you are creating a WordPress specific template, then instead of ‘Site Name & Site URI’, it should read ‘Theme Name & Theme URI’ in this beginning section.

/*
Site Name:
Site URI:
Description:
Version:
Author:
Author URI:
*/

Color Notations

Noting the color scheme of the site in your stylesheet is another area that is not a necessity per se, but given that we are out to save time through this post, this can be extremely helpful in that regard. This can also prove especially useful if you want to quickly change out certain colors for the client or just to try out a different look. I’ve included the main elements that you normally attach colors to for your site, though there will more than likely be others that you will add yourself.

/*  =COLORS
---------------------------------------------------
	Body Background:
	Main Text:
	Links:
*/

CSS Reset

There’s a lot of controversy surrounding CSS resets and whether they are useful or not. Even among those who deem them as helpful, there is an argument over which reset is the best. I do find resets to both be helpful and time saving when it comes time to check cross-browser compatibility.

Below is the reset I use which is a slight alteration of the Yahoo version. You may want to do a bit of experimentation to find the right reset for you and your projects. If so, I highly recommend you check out 6 Popular CSS Reset Techniques as well as this argument against the use of CSS resets.

/*  =RESET
---------------------------------------------------*/
 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td {
	padding: 0;
	margin: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
ol,ul {
	list-style: none;
	}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
	}
abbr,acronym { border: 0;
	}

Layout Styles

Now that we have set up the basic intro to the stylesheet, we finally get into the styling of the actual site. Below I have listed the basic sections I use in my template, so for the sake of customization you may need to add or remove different sections to suit your personal preferences and style. This is where you will want to think about which style elements you find yourself building into most stylesheets that you create so you can include them and cut down on the time you would spend constructing them.

When adding your own sections make sure to make notations so that you can search through your stylesheet quickly and easily.

Global Elements

/*  =GLOBAL ELEMENTS
-------------------------------------------------------------- */
 
body {
	font-family: ;
	font-size: 100%;
	background: ;
	color: #;
}
 
a:link {
	color: #;
}
 
a:visited {
	color: #;
}
 
a:hover, a:active {
	color: #;
	text-decoration: none;
}
 
h1 {
	color: #;
	font-size: ;
}
 
h2 {
	color: #;
	font-size: ;
}
 
h3 {
	color: #;
	font-size: ;
}
 
h4 {
	color: #;
	font-size: ;
}
 
ol {
	list-style-type: ;
}
 
ul {
	list-style-type: ;
}
 
li {
	margin: ;
}
 
blockquote {}
 
#wrapper {
	width: 960px;
	margin: 10px auto;
}

Header

/*  =HEADER
-------------------------------------------------------------- */
 
#header {}
#logo {}

Navigation

/*  =NAVIGATION
-------------------------------------------------------------- */
 
#nav {}

Content

/*  =CONTENT
-------------------------------------------------------------- */
 
#content {}
#content h2 {}
#content h3 {}
#content p {}

Sidebar

/*  =SIDEBAR
-------------------------------------------------------------- */
 
#sidebar {}
#sidebar h2 {}
#sidebar ul {}
#sidebar li {}

Forms

/*  =FORMS
-------------------------------------------------------------- */
 
input {}
textarea {}
button {}
 
input:focus {}
textarea:focus {}
button:hover {}

Tables

/*  =TABLES
-------------------------------------------------------------- */
 
table {}
tr {}
th {}
td {}

Footer

/*  =FOOTER
-------------------------------------------------------------- */
 
#footer {}
#footer h2 {}
#copyright {}

Default Styles

I have also noticed a tendency on my part to add a few default styles into my CSS project after project, so now I have them included in my template as well. You may find these come in handy for your own stylesheet template, or they may at least get you thinking in that direction. This way you land in a mindset where you might be able to recognize a couple of default styles that you are consistently building into your CSS for inclusion as you customize your template.

/*  =DEFAULT STYLES
-------------------------------------------------------------- */
 
.alignleft {float: left;}
.alignright {float: right;}
.clear {clear: both;}
 
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}
 
.small {font-size: 0.8em;}
.hidden {display: none;}

Download Template

You can download my template here but I highly recommend either tweaking this one for your own personal use or actually creating one from scratch.

That’s A Wrap

If you have any additions or suggestions, be sure to leave a comment and let us know.

A Final Word

We appreciate you stopping by and checking out the post. For more from the Arbenting team, make sure you Subscribe for free to the blog.

33 Responses to “Creating a Time Saving CSS Template”

Louis Gubitosi
December 28th, 2009 at 6:44 pm

thanks for this Angie. This is very helpful!
.-= Louis Gubitosi´s last blog ..Inspirational Apple iPhone Artwork =-.
mypslink
December 28th, 2009 at 10:24 pm

Thank very much. Very helpful.
zolotoy
December 29th, 2009 at 12:18 am

/* Reset (begin) */
/* Reset (end) */

Angie Bowen Reply:
December 29th, 2009 at 1:49 pm
It has a header to denote the beginning of the reset and I always just use the header for the next section to denote the end. However, I fully encourage everyone to alter it in the way that works best for them.
Khaz
December 29th, 2009 at 2:56 am

Nice tutorial ! May I translate it into French for the French community ?
You will be naturally be linked back.

Thanks in advance,

Khaz
.-= Khaz´s last blog ..TypeKit, un service pour ajouter des polices à votre site =-.

Angie Bowen Reply:
December 29th, 2009 at 1:49 pm
Absolutely Khaz, thanks so much! Feel free to translate any of the articles here, no need to ask
Secretaria
December 29th, 2009 at 10:20 am

Very helpful for our new developments! Thanks
.-= Secretaria´s last blog ..Contra el paro en el secretariado, fórmate =-.
Angie Bowen
December 29th, 2009 at 1:50 pm

I’m glad that everyone is finding the article helpful. Thanks so much for all of the comments everyone
Inside the Webb
December 29th, 2009 at 1:51 pm

This really is a time-saving template for any CSS app. I always feel it takes forever to begin an application because you must begin from the very beginning with CSS, never any fun
.-= Inside the Webb´s last blog ..Inside the Webb is back with a New Design =-.

Angie Bowen Reply:
December 29th, 2009 at 5:35 pm
I was the same way until I started using WordPress frameworks which gave me the idea to put this together. I’m not a fan of full on CSS frameworks but something like this saves so much time!
Bianca
December 29th, 2009 at 3:43 pm

Love this post, and definitely something I need to do. You mentioned a few things I haven’t thought of putting in my stylesheet as far as a template goes. Thanks!

Angie Bowen Reply:
December 29th, 2009 at 5:35 pm
Thanks Bianca! I’m glad you found it helpful and found some new additions to your template
Brad Czerniak
December 29th, 2009 at 8:37 pm

Template is a good word to describe the paradigm of my soon-to-be-finished CSS “framework,” Hawidu CSS: http://code.google.com/p/hawiducss/

Maintainers, bugs, feature requests, and general feedback is very welcome.

Thanks!
.-= Brad Czerniak´s last blog ..CSS is Syntactically Inconsistent =-.
Luigi
December 30th, 2009 at 9:42 am

wow! thank you so much! this article ends up in my delicious bookmark list!
ps. and the feed of this awesome blog ends up in my google reader ehhehee
Stacy
December 30th, 2009 at 9:49 am

Angie,

This is something I know I have been needing for a while now. Starting from scratch with a style sheet on every project is a real pain. Thanks so much for offering this up, as it will be a real time-saver for me and plenty of other web designers and developers.

Have a nice day!

Stacy
Hata Nerde
December 30th, 2009 at 9:54 am

Very helpfull. Thank you for your post.

And good is “Buy me a cofee” =)
.-= Hata Nerde´s last blog ..ASP – Sunucuda Hangi Bileşenler Yüklü? =-.
joyoge bookmark
December 30th, 2009 at 4:58 pm

helpful list, thanks for the post..
.-= joyoge bookmark´s last blog ..60+ Beautiful Happy New Year Ave Wallpapers | Tutorial Lounge =-.
Friday Fix Dec 28 - Jan 1
December 31st, 2009 at 6:30 am

[...] Creating a Time Saving CSS Template [...]
edansys » Blog Archive » links for 2009-12-31
December 31st, 2009 at 6:32 pm

[...] Creating a Time Saving CSS Template » Arbenting Freebies – The Product of Being Creative (tags: css) [...]
CSS Brigit | Creating a Time Saving CSS Template
January 1st, 2010 at 10:54 am

Creating a Time Saving CSS Template…

A tutorial showing how to create a time saving css template….
Rick
January 2nd, 2010 at 6:58 am

Thank you. Very helpful indeed.
.-= Rick´s last blog ..We Do Joomla and WordPress Too! =-.
Web, Email, Logo Design | BrandleDesign
January 4th, 2010 at 1:47 pm

Thanks Angie. This is some great advice!
.-= Web, Email, Logo Design | BrandleDesign´s last blog ..BrandleDesign Launches Today! =-.
Angie Bowen
January 4th, 2010 at 3:16 pm

Thanks so much for all of the comments everyone. I’m glad you’re all finding it helpful.
Forget Resolutions 2010: Less Talk More Action (& Week in Review!) | Website In A Weekend
January 4th, 2010 at 4:38 pm

[...] Arbenting is full of lots of cool, free graphics stuff, like photoshop brushes, css templates, and lots more. Check it [...]
This Weeks Twitter Design News Roundup N.18 : Speckyboy Design Magazine
January 5th, 2010 at 2:40 am

[...] Creating a Time Saving CSS Template [...]
qumk.net » Blog Archive » CSS:template
January 7th, 2010 at 10:59 pm

[...] Creating a Time Saving CSS Template [...]
ипотпал
January 10th, 2010 at 4:05 am

Thank you, thank you very much.
Tony Dunsworth
January 29th, 2010 at 10:42 am

Great article. I did a variation of this where I have added in HTML5 pieces since I use it a lot more than I use others. It makes it easy to switch back and forth since I can just decide which to leave blank and which to enter code into.
ram singh mehra
February 11th, 2010 at 11:33 pm

Thanks for mam,
This tutorials is very helpful for me!
.-= ram singh mehra´s last blog ..Adobe Online Festival =-.
Wordpress Blog Services - Modern CSS Layouts, Part 2: The Essential Techniques
May 6th, 2010 at 5:32 pm

[...] Creating a Time Saving CSS Template (Arbenting) [...]
Modern CSS Layouts, Part 2: The Essential Techniques
May 14th, 2010 at 5:28 pm

[...] Creating a Time Saving CSS Template (Arbenting) [...]
Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine
May 16th, 2010 at 8:07 am

[...] [...]
Modern CSS Layouts, Part 2: The Essential Techniques | Best Web Magazine
June 24th, 2010 at 2:30 am

[...] [...]