Update On Redesign Of JC-Designs.net And The Sass

Update On Redesign Of JC-Designs.net And The Sass

Home page is coming along

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

Tags: ,

Leave a Reply