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;}
