It is slow going because I am doing a lot of new things. At least for me. I’m using Compass and Sass, the HTML5 boilerplate, HTML5 tags that I am still coming to grips with, and who knows what the hell else. But I wanted to show you my .scss sheet so far, so you can see what is involved. You can learn a lot just by looking at stuff like this, so if you find it helpful, let me know!

What I’ve learned in the process

Holy crap…there is a lot. What has helped me the most is learning a little more of Compass. I was and still am an idiot in that area, but I think I have read most of the site now. There are a few things that evade my grasp, but for the most part, things are coming together.

My Sass writing, SCSS syntax to be exact, has become faster. I don’t have to keep looking up how to write things now, and I feel like my development time will decrease now because of that. If I had to start a project that was already designed, I could probably chop off about a fourth of the time required if I just wrote the plain CSS out. That will only get better as I go.

Ruby. Yes, if you have kept up here, I have started learning Ruby. Won’t be easy, but I am looking forward to what is going to pop into my head. Once I have a basic knowledge of how to program in it, I’ll throw Rails in, and hopefully start using Haml. This might all be gibberish to you, but I’m more typing out future plans.

So to recap, in one project, I have learned the basics of Compass, Sass, and HTML5, and started learning Ruby, which I am actually not using on it. Pretty tall order for one project that started out as a simple redesign.

What are you learning at the moment? Comment and let me know!

My Sass sheet so far

Here are my Sass stylesheets so far. If anyone that has more experience in Sass than I, sees anything I can improve, please let me know – I would be very greatful.

Main:

$dkgray: #2d2d2d;
$orange: #f15c22;
$wht: #ffffff;
$w: 1020px;
$r: right;
$l: left;
 
@mixin font ($size, $weight, $family: "Arial,Helvetica,sans-serif"){
  font: {
    family: #{$family};
    size: $size;
    weight: #{$weight};
  }
}
 
@mixin sprite($left, $top) {
    background:  url(../images/iconSprite.png) no-repeat $left $top;
}
 
body {
	background: url(../images/background.jpg) repeat-x 0 0 $dkgray;
	color: $wht;
	@include font(16px , "normal");
	p {
		line-height: 1.3;
	}
}
 
ul , ol {
	margin: 0;
}
 
a  {
	color: lighten($orange, 20%);
	zoom: 1;
	outline: none;
	&:active, &:visited {
		@extend a;
	}
}
 
a:hover {
	color: $orange;
}
 
h1 {
	@include font(24px, "bold");
	text-shadow: 2px 2px  5px $orange;
}
 
h2 {
	@include font(18px, "bold");
}
 
.clear {
	float: $l;
	clear: both;
}
 
.border {
	border-bottom: 1px $orange dotted;
	padding: 0 0 5px;
	margin: 0 0 10px;
}
 
.marginTop {
	margin-top: 20px;
}
 
#container {
	width: $w;
	margin: 0 auto;
	overflow: hidden;
}
 
header {
	width: $w;
	height:  337px;
	position: relative;
	background: url(../images/jcIndex_01.png) no-repeat left top;
}
 
#contentRepeat {
	width: $w;
	background: url(../images/jcIndex_03.jpg) repeat-y left top;
}
 
#contentTop {
	width: $w;
	background: url(../images/jcIndex_02.jpg) no-repeat left top;
	min-height: 500px;
	height: auto !important;
	height: 500px;
	overflow: hidden;
	padding: 80px 0 0;
}
 
.ie6 #contentTop {overflow: visible;}
 
#contentLeft {
	width: 580px;
	float: $l;
	margin: 0 0 0 70px;
	h1 {
		@include font(32px, "bold", "Bebas, Arial,Helvetica,sans-serif");
	}
	ul {
		margin: 20px 0  20px 30px;
		li {
			margin: 0 0 10px;
		}
	}
}
 
#contentRight {
	width: 260px;
	float: $r;
	margin: 0 38px 0 0;
	padding: 20px 16px 10px 20px;
	@include border-radius(10px 0px 0px 10px);
	background: none $dkgray;
	border: 2px $wht solid;
	border-right: none;
}
 
 
/*
****************Call to Action in the right sidebar *********************/
 
#calltoAction {
	width: 260px;
	height: 181px;
	background: url(../images/calltoAction.png) no-repeat left top;
	color: $dkgray;
	padding: 25px 0 0;
	h1 {
		@include font(16px, "bold");
		color: $dkgray;
		text-align: center;
		text-shadow: none;
	}
	h2 {
		@include font(42px, "bold", "Bebas, Arial,Helvetica,sans-serif");
		@include sprite(210px, 13px);
		color: $dkgray;
		text-align: center;
		padding: 0 18px 4px 0;
		text-shadow: 2px 2px 3px #999;
		border: none;
		a {
			color: $dkgray;
			&:hover {
			color: $orange;
			}
		}
	}
	h3 {
		@include font(16px, "bold");
		color: $dkgray;
		text-align: right;
		margin: 0 20px 0 0;
	}
}
 
/*
****************Social Media in right sidebar***********************/
 
#social {
	margin: 20px 0 30px;
	overflow: hidden;
	ul {
		margin: 0 0 0 20px;
		padding: 0;
		li {
			list-style: none;
			float: left;
		}
		.twitter {
			@include sprite(0px , -58px);
			margin: 0 15px 0 0;
		}
		.linked{
			@include sprite(-70px , -58px);
			margin: 0 15px 0 0;
		}
		.rss {
			@include sprite(-139px , -58px);
		}
		a {
			display: block;
			width: 63px;
			height: 65px;
		}
	}
}
 
/*
****************Recent Posts in right sidebar *********************/
#recent {
	margin: 20px 0;
	h3 {
         background: $orange;
		 @include font(16px, "bold");
		 text-transform: uppercase;
         @include linear-gradient(color-stops($orange, darken($orange, 25%)), left); 
         padding: 10px 20px;
         margin-top: 0;
         position: relative;
        @include box-shadow( darken($dkgray, 10%), 1px, 1px, 3px);
        color: $wht;
        text-shadow: 0 1px 0 $dkgray;
		@include font(24px, "bold", "Bebas, Arial,Helvetica,sans-serif");
	}
	.arrow {
         width: 0; height: 0;
         line-height: 0;
         border-left: 20px solid transparent;
         border-top: 10px solid darken($orange, 20%);
         top: 103%;
         left: 0;
         position: absolute;
	}
	ul {
		margin: 0 0 0 20px;
		list-style: none;
		overflow: hidden;
		padding: 10px;
		background: none darken($dkgray, 10%);
		@include font(14px, "normal");
		li {
			margin: 0 0 15px;
			.date {
				font-weight: bold;
				color: $orange;
			}
			a {
				color: $wht;
				&:hover {
					color: $orange;
				}
			}
		}
	}
 
}

Nav:

nav {
	position: absolute;
	top: 240px;
	left: 67px;
}
 
nav li {
	float: left;
	border-right: 1px $orange dotted;
	margin: 0 12px 0 0;
	padding: 0 12px 0 0;
	line-height: 18px;
	a {
	color: $orange;
	text-decoration: none;
	display: block;
	float: left;
	@include font(18px, "bold");
	.byline {
		@include font(12px, "normal");
		text-transform: uppercase;
	}
	&:hover {
	color: $wht;
	}
}
}
 
nav li:nth-child(6) {
	border: none;
}

Footer:

footer {
	width: $w;
	min-height: 222px;
	height: auto !important;
	height: 222px;
	overflow: hidden;
	background: url(../images/jcIndex_05.jpg) no-repeat left bottom;
	h3 {
		@extend .border;
	}
}
 
.ie6 footer  { overflow: visible;}
 
#footerLeft {
	width: $w - 760;
	float: left;
	margin: 50px 50px 0 70px;
}
 
#footerMiddle {
	@extend #footerLeft;
	margin: 50px 50px 0 0;
}
 
#footerRight {
	@extend #footerLeft;
	margin: 50px 0 0;
}
 
#copyright {
	width: $w;
	clear: both;
	float: $l;
	margin: 30px 0 0;
	text-align: center;
	@include font(12px, "normal");
}

Let me know if you have any questions!

Coupon Code: webmachine

After downloading Yslow, here was the stats of my home page (http://www.jc-designs.net):

Then, I downloaded something called Minify, which you can get here. It is a php script that combines all your css files into one, and all your js files into one. The directions are pretty easy.

Once you have downloaded it, put it on your server in the root directory, and open this url: http://yoursite.com/min/builder/.

You then add all of your css files, in the order you have them in. Be careful here…if you have any @import in your main css file, it will screw it up. Trust me, I found this out before I actually read the line that tells you that. Once you have all the files listed, click on update. It then gives you the html to use to replace the linked css files. Plus a line to add to one of the minifier config files. I know, sounds scary, but on that build page, it tells you exactly what to do. Then you do the same for the js files.

What does all that crap get you? Read on!

Well after I did this to my home page, here is what Yslow gave me for a performance score:

I went from a D grade, to a C. Dropped the number of http requests by 10, from 34 to 24, and my total weight went from 417.3k to 228.9k. Not freakin’ bad for 10 minutes worth of work. I then went and updated the rest of my site.

Of course…I wanted to do this to my blog here….but i can’t. Well, at least I don’t want to, cause I’m scare. For one, I can do nothing to my js scripts other than the file I wrote, but it is only 1.8k…not over worried. The other though is for a WordPress plugin, and the other is actually linking to Google’s jQuery 1.4 min file. Not sure what I can do with those. So if anyone with experience in WordPress and Minify can help me out, let me know. I also only have 2 css files – 1 for a plugin, and my main one. both are fairly small. I could reduce it with Minify, but I’m not into going through all my files again. I’m not even done with the blog yet, so maybe later.

Anyway, for the small amount I did, I hope you see the worth of both of these items.

Its not very intuitive, and I’ve had to get a lot of help, but all-in-all, I’m diggin’ it. So, for those that actually already use it, this is for you.

Zen Coding is a nice little plugin with some real crap documentation. I only know how to do a few things with it so far, which I’ll let you know how to do.

First things first….get the plugin here (they have a ton of versions for different frameworks…including Dreamweaver.

Here is how to install it…follow this closely.

1. Install EclipseMonkey using update site: http://download.eclipse.org/technology/dash/update (you can skip this step if you have Aptana installed)
2. Create top-level project in your current Eclipse workspace, name it, for example, zencoding
3. Create scripts folder inside newly created project
4. Extract contents of downloaded zip plugin into this folder.
5. Restart Eclipse/Aptana if needed

Soooo…..what do you do with it? Let’s say you want divs with ids of: container, header, content, and footer. Click in the file you are working in where you want these to appear, and type this:

div#container>div#header>div#content

Select it, go to Scripts>Zen Coding>Expand Abbreviation….and you get:

<div id="container">
    <div id="header"></div>
</div>

Now lets say you actually wanted an unordered list with 5 list items containing a tags within the content div….you would type this instead:

div#container>div#header>div#content>ul>li*5>a

and you get:

<div id="container">
    <div id="header">
         <div id="content">
<ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>
        </div>
    </div>
</div>

Now, if you wanted a bunch of divs that were not children of each other, you would do this:

div#left+div#right

So…..the + is for non-children elements, > is for children elemts, * is for multiple elements within an element.

At the moment, that is all I’ve worked through. I’ll add more as I find them out. Again, the documentation for this is garbage.

One thing to note, the shortcut keys were not what I wanted….they were set to Command + whatever. I wanted Alt….sooo follow these instructions to change them:

“There’s a Key command describing current shortcut, which is M3+E in this case (M3 stands for Alt). Just change this shortcut and save the file.”

Well, mine was set to M4 when i installed it…so I actually changed it to M3. Which as it says, means Alt.

Have fun with it! And if you know more about it, please let me know.