If you design a fair number of websites from scratch, you’ll find yourself doing a lot of the same setup work over and over and over. Create directory with images folder. Create index file, write content type declaration, write basic page structure. Create CSS file, write CSS reset, write basic CSS structure. Just that setup can take you a decent chunk of time and wither your enthusiasm for getting into the meat of your design.
In this next installment of Designer’s Toolbox, we are offering you a way to avoid all that wasted time with a Blank CSS Template.
Just keep this folder on your system and any time you start a new project, you can just duplicate this folder and get started with the real coding/designing.
So you know what you might be getting into, let’s look at the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PAGE TITLE HERE</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page-wrap">
</div>
<!-- Put Google Analytics Code Here -->
</body>
</html>As you can see, it’s very very simple. Just the page declaration (XHTML 1.0), content type declaration (UTF-8), page title, stylesheet link, and simple structure (body with a page-wrap div). I also included a little reminder to include your analytics code at the bottom, if you will be tracking visitor data on your site.
Now here’s the CSS:
/*
AUTHOR: YOUR NAME HERE
you@domain.com
*/
/* ------------------------------------------ */
/* RESETS, BASIC PAGE SETUP, BASIC TYPOGRAPHY */
/* ------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font: 62.5% Helvetica, sans-serif; }
ul { list-style: none inside; }
p { font: 1.3em/1.3em; margin-bottom: 1.3em; }
a { outline: none; }
a img { border: none; }
/* END RESET */
/* ------------------------------------------ */
/* TOOLBOX CSS */
/* ------------------------------------------ */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
.transpBlack { background: url(transpBlack.png); }
/* END TOOLBOX */
/* ------------------------------------------ */
/* PAGE STRUCTURE */
/* ------------------------------------------ */
#page-wrap {
width: 775px;
margin: 0 auto;
}
/* END STRUCTURE */Also quite simple, mostly just an expanded CSS Reset. The Star Selector (*) does the heavy-lifting of the reset, but there is a couple of extra touches to mention. Setting the font-size in the body to 62.5% allows you to use em sizes like you would pixel (px) sizes. 1.0 em = 10px, 1.1em = 11px, and so on. The overflow-y forces a vertical scroll bar on many browsers to eliminate jumps in horizontal centering.
There is some simple “Toolbox CSS” for things like floating, clearing, and filling areas with transparent color. The page-wrap CSS is included to center your page content.
This definitely looks like it saves a lot of work. Can it be used on WordPress sites? I’ve got a few projects coming up and it looks like it would come in real handy.
The idea of having a default template is good. The way it’s done here isn’t.
For example: the * selector slows rendering down. It also removes wanted margins and paddings from form input fields in certain OS’s/browsers, which cannot be reapplied.
The overflow-y is also nonsense, since your page may not always be scrollable, making the scrollbar obsolete (and confusing to some).
I have yet to see any firm evidence on the star selector noticeably slowing down rendering. I don’t doubt that it does slightly, since the star selector will literally apply it self to every single element on the page. But I have serious doubts that the slight slowdown is even noticeable on even very complex pages.
Also, it’s not the margin and padding being removed with the star selector that screw up default input fields, it’s the border, and notice how the border is not reset here. Default input styles will remain intact (e.g. the glowy buttons in Safari or the blocky beveled buttons in FF or IE). You are correct though that if you strip border in this way, those default styles cannot be reapplied.
Overflow-y is also not nonsense. It applies an empty vertical scrollbar in browsers that don’t already have that (IE by default already does this). This may take up screen real estate when not needed occasionally, but it eliminates the awkward “jump” in horizontal centering when navigation between a page that scrolls and a page that doesn’t.
For a “barebones” template for wordpress, check out Elliot Jay Stocks “Starkers” theme.
thanks for the sofisticated blank css and html template. this guide will help me!
Great RES for the website editpadders like me !
Can you explain the utility of the .transpBlack { background: url(transpBlack.png); } thought ?
I don’t see why you should use 1.3em (~13px) for the p-selectors font size. If there’s something which renders ugly on older browsers (especially without ClearType or similar functions), it’s a font sized at 13.
It’s better to work with even numbers, like 8, 10, 12, 14 and 16. Better readability > fancy designing. (Personal opinion, and can be argued till the end of time)
@Frederic: I use include that as a part of my “toolbox” CSS. It is basically a one-pixel alpha-transparent PNG so that I can apply a transparent black fill to a box without having to use the Opacity attribute. Opacity is great sometimes, applying it to an element forces all the child elements to have opacity also. If those child elements are text, that can be a bad thing. This way you can apply a transparent background and keep fully opaque text.
@koew: I was actually not aware that even pixel sizes rendered better…. I’m gonna have to look into that.
koew’s comments on the ugliness of fonts at odd pixel size’s is a valid one based on my own experience with older browsers on older platforms.
Perhaps I am stuck in a timewarp, but I still feel the need to use even pixel sizes especially at smaller end of the scale.
Other than that I think this is a very useful template and I find your CSS-Tricks site to be an excellent read. Thanks Chris.
Cheers
Thank you for your great idea to avoid many mistakes and waste time with a standard xhtml and css-template…
I should think about this idea for my webprojects, too
Ralph
Chris – I’m with you on the universal selector issue. I’m not convinced that it’s all that bad, and I still use it extensively without any problems.