Style Cheat-Sheet

kschembri · August 2005

I was wondering if someone could be so kind enough as to create a Vanilla Style Cheat-Sheet. If your not sure what i mean by this check out the cheat-sheet for Wordpress: http://www.techwench.com/05-2005/15-theme-cheat-sheet. Im trying to create a style and this is the best way to learn personally, it would also help other users to learn how to create a style easily too.

nathan · August 2005

I can't garantee anything, but I will certainly give it a try when I get a little free time.

lech · August 2005

/me tips his hat GOOD LUCK!

3stripe · August 2005

sounds good, i'm holding off on finishing my style until i get some more pointers on how to go about it. a checklist or similar would be great.

kschembri · August 2005

I can't wait. Hope he goes around doing it.

nathan · August 2005

The pressure is on. Guys, I am going to have to wait until next Wednesday, then I will give it a shot.

andy · August 2005

want an easy solution to start with?

make a blank global.css,

paste this


*{
	border: 1px dotted silver;
	margin: 0.5em;
	padding: 0.5em;
}

body, html{
	border: none;
	margin: 0;
	padding: 0;
}

body{
	font:62.5% verdana, arial, sans;
}

#MenuForum:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* Hides from IE-mac \*/
* html #MenuForum {height: 1%;}
/* End hide from IE-mac */
	
/* - end clearing - */

#MenuForum li{
	float: left;
}

#Body{
	margin-left: 23em;
}

#Panel{
	float: left;
	width: 20em;
}

.PageList li{
	display: inline;
}

.MetaItem, .MetaItemLabel{
	display: inline;
	line-height: 3em;
}

.DataItemLabel{
	float: left;
}

gives you this:

combine that with the firefox web dev tool bar's "Display ID and Class Details" functionality and you should have a good start.

Mark · August 2005

I'm going to say it one more time: Andy is the bomb.

Mark · August 2005

Added to the wiki

andy · August 2005

rock, thanks mark.

the rules there only really cover the discussion list page, and the header.

using the universal selector to apply padding, margin, and border will still give you a clear idea of page elements on other pages. they just won't look as pretty.

* is your friend.

lech · August 2005

well damn, that's something I wouldn't have thought of. Rock on andy! /me bookmarks this thread for safe keeping.

kschembri · August 2005

Andy, i would kiss you but that would be wrong.

Style Cheat-Sheet

Comments