twe4ked web design studios

What is this twe4kcss thing anyway?

twe4kcss is my personal css file that I use whenever creating a website, it has been in the making for the past year and I thought I would give it out so others could possibly get some ideas to use in their own code. You can take this code and use it as you wish, its yours for ever! If you do use it a tweet or link would be greatly appreciated.

Download

The download includes the basefile.css, index.html to test the file and 8 selected icons from FamFamFam.

The code in detail

/* Wordpress information /*
Theme Name: ThemeName
Theme URI: http://somesite.com/
Description: TheDescription.
Version: 0.0
Author: YourNameHere
Author URI: http://somesite.com/
*/

/* === twe4kcss version 1.0 - twe4ked.com
============================================ */

/* === Reset
Import your favourite CSS reset. eg
- http://meyerweb.com/eric/tools/css/reset/
- http://developer.yahoo.com/yui/reset/
============================================ */
@import url('reset.css');

/* === Global
============================================ */
html{font-size:62.5%;} /* Setting the font size to 62.5% means that 1em = 10px, 1.2em = 12px and so on. */
body {line-height: 100%;font: normal 1.2em Arial, Helvetica, sans-serif;background: #fff;color: #111;}
p{font-size: 1.2em;margin:5px 0 20px 0;}
img{border: 0px;} /* Removes border from linked images. */

EM font sizes!

As you can see, the entire site font size is set to 62.5%, this isn’t because I like smaller fonts its to make it easier to use em sizes for fonts. When the html font size is set to 62.5% 1em is equal to 10px, 1.2em is equal to 12px and so on. Using em for font sizes is good practice for accesibility as it scales better.

The CSS Reset

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

If you don’t already have one, grab a CSS reset from someone. I linked a few in the CSS comments, here they are:

http://meyerweb.com/eric/tools/css/reset/
http://developer.yahoo.com/yui/reset/

Personally I use the one from Eric Meyer but they are all pretty similar.

/* === Clearing
- http://www.webtoolkit.info/css-clearfix.html
============================================ */
.clearfix:after {content: ".";display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}
.clearfix {display: inline-block;}
html[xmlns] .clearfix {display: block;}
* html .clearfix {height: 1%;}

/* or */

.clearing {clear: both}

/* === Links
============================================ */
a:link, a:visited {color: #333;}
a:hover {color: #111;}
a:active {color: #111;}

/* Wordpress navigation; uncomment to use */
/*
.current_page_item a {color: #00DF13 !important;}
.current_page_parent a {color: #00DF13 !important;}*/

/* === Headings
============================================ */
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin: 0;}
h1, h2, h3, h4, h5, h6 {font-style:bold;}
h1, h2, h3 {letter-spacing:-1px;font-family:Cambria, Georgia, Times, Times New Roman, serif;}
h1 {font-size:2.6em;}
h2 {font-size:1.8em;}
h3 {font-size:1.6em;border-bottom:1px #333 solid;margin-bottom:10px;}
h4 {font-size:1.2em;margin-bottom:10px;}
h5 {font-size:1.0em;}
h6 {font-size:0.8em;}

/* === Forms
============================================ */
input.text, input.title,
textarea, select {margin:0.5em 0;border:1px solid #bbb;}
input.text:focus, input.title:focus, textarea:focus, select:focus {border:1px solid #666;}
input.text, input.title { width: 300px; padding:5px; }
input.title { font-size:1.5em; }
textarea { width: 540px; height: 200px; padding:5px; }
input:focus { outline: none; } /* Removes the Mac OS X Glowing Blue Outline for Custom Styled Input Fields */

Clearing

I have put in two options for clearing floats; WebToolKits and a basic ‘clear:both;’ class to use the latter ‘<div class=”clearing”></div>

External Links

There is a line to handle external links that automatically puts an arrow after any link that is not on the specified domain. This does not validate but will not break your code.

]/* === Messeges
============================================ */
.error, .success, .notice { padding: .8em; margin-bottom: 1em; border-top: 2px solid #ddd; border-bottom: 2px solid #ddd; }
.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.error a    { color: #8a1f11; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.notice a   { color: #514721; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.success a  { color: #264409; }

/* === Layout
============================================*/
#wrapper {width: 760px;margin:0px auto;background: #eee;border:1px #999 solid;padding:20px;min-height:397px;height:auto !important;height:390px;}

/* === Misc.
============================================*/
blockquote {margin: 20px 0;padding: 0 20px 0 20px;color: #999;border-left: 5px #999 solid;font-size:1.4em;
font-family:Cambria, Georgia, Times, Times New Roman, serif;}

.right {float:right;}
.left {float:left;}

.lock {background: url('images/lock.png') no-repeat left;margin-left:10px; padding:2px 0 2px 20px;}
.heart {background: url('images/heart.png') no-repeat left;margin-left:10px; padding:2px 0 2px 20px;}
.subscribe {background: url('images/feed.png') no-repeat left;margin-left:10px; padding:2px 0 2px 20px;}
.accept {background: url('images/accept.png') no-repeat left;margin-left:10px; padding:2px 0 2px 20px;}
.user {background: url('images/user_gray.png') no-repeat left;margin-left:10px; padding:2px 0 2px 20px;}
.date {background: url('images/date.png') no-repeat left;margin-left:10px; padding:2px 0 2px 20px;}
.comment {background: url('images/comment.png') no-repeat left;margin-left:10px; padding:2px 0 2px 20px;}
.vcard {background: url('images/vcard.png') no-repeat left;margin-left:10px; padding:2px 0 2px 20px;}

/*= www.twe4ked.com =*/

Messages

There are classes included for highlighted messages such as, notice, error, an success.

The Wrapper

The wrapper is set at 760px (the same as this website) centered as a starting point for your future websites.

Misc.

• <blockquote>Blockquote</blockquote>
• Left and right floats
• 8 common icons from FamFamFam are included in the zip file.

Screenshot