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.
Loading...
thanks for this Angie. This is very helpful!
Louis Gubitosi´s last blog ..Inspirational Apple iPhone Artwork
Thank very much. Very helpful.
/* Reset (begin) */
/* Reset (end) */
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.
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
Absolutely Khaz, thanks so much! Feel free to translate any of the articles here, no need to ask :)
Very helpful for our new developments! Thanks
Secretaria´s last blog ..Contra el paro en el secretariado, fórmate
I’m glad that everyone is finding the article helpful. Thanks so much for all of the comments everyone :)
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
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!
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!
Thanks Bianca! I’m glad you found it helpful and found some new additions to your template :)
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
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
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
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ü?
helpful list, thanks for the post..
joyoge bookmark´s last blog ..60+ Beautiful Happy New Year Ave Wallpapers | Tutorial Lounge
Thank you. Very helpful indeed.
Rick´s last blog ..We Do Joomla and Wordpress Too!
Thanks Angie. This is some great advice!
Web, Email, Logo Design | BrandleDesign´s last blog ..BrandleDesign Launches Today!
Thanks so much for all of the comments everyone. I’m glad you’re all finding it helpful.
Thank you, thank you very much.
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.
Thanks for mam,
This tutorials is very helpful for me!
ram singh mehra´s last blog ..Adobe Online Festival