Sass Tutorial: Building an Online vCard with Saas & Compass

Today we are going to continue our discussion on Sass and this will be the final part of our Sass series. This time, rather than a theoretical approach, this is going to be a bit more practical. We will create an online vCard using Sass along with Compass.

The idea is that the vCard should be easily adjustable, for color and size. In the process, we will be using a few Sass and Compass features like Variables, Mixins, Operations, Selectors Inheritance, Nested Rules and Compass Helpers. If you have missed our previous posts from this series, we suggest you have a look at them first before continuing.

Planning and Wireframing

When working with Sass and Compass, planning is essential. We typically need to have the big picture on how our final result (e.g. page or website) is going to be. It will be helpful to browse some sites like Behance or Dribbble for ideas. We can then draft the ideas onto paper or construct it in a wireframe, like this example below.

As you can see from the image above, our vCard contains contact info about ‘John’ – a picture profile, some information about John, such as his name, email address, phone number and a brief description about who he is or what he does. That will be our ‘bio’ section.

Below are his social identities in the form of social buttons. This will be our ‘social’ section.

Preparing Assets

Before we start coding, here are some essentials to get ready. I gather that by now you should have Sass and Compass installed in your machine.

(If you are not sure whether you have installed them, you can run this command sass -v or compass -v through Command Prompt or Terminal or, you can always use application like Scout App if you prefer working with a GUI.)

We will also need a few assets like font icons and social media icons, which you can get from places like ModernPictograms and Social Media Icons.

Lastly, since we are using Command Prompt/Terminal for this tutorial, we need to navigate to our directory and run Compass project with these two commands: compass init and compass watch.

HTML Markup

Below is the HTML markup of our vCard, it’s pretty straightforward. All sections are wrapped within logical HTML5 tag <section>.

<div class="vcard">
<section class="bio cf">
	<img src="images/me.jpg" width="80" height="80">
	<div class="detail">
		<ul>
			<li class="name">Thoriq Firdaus</li>
			<li class="email">me@email.com</li>
			<li class="phone">(+62)1.2345.678.9</li>
			<li class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend at pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.</li>
		</ul>
	</div>
</section>
<section class="social cf">
	<ul>
		<li class="social-facebook"><a href="#">Facebook</a></li>
		<li class="social-twitter"><a href="#"> Twitter</a></li>
		<li class="social-google"><a href="#">Google+</a></li>
		<li class="social-dribbble"><a href="#">Dribbble</a></li>
	</ul>
</section>
</div>

As you can see above, the social identities included in the ‘social’ section is structured within list elements so we can easily display them side-by side. Each of them is given a class name following this convention social-facebook, social-twitter, social-google and so on.

Compass Configuration

We need to configure Compass a bit by uncommenting a few lines in config.rb file, as follows:

# You can select your preferred output style here (can be overridden via the command line):
output_style = :expanded

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false

If you cannot find config.rb file, you probably haven’t run this command compass init in your project directory.

Importing Files

Since we will be using Compass, we need to import it using;

@import "compass";

And it is my personal preference to reset default styles from the browsers so that the output will be rendered more consistently. Compass, in this case, has a Reset module. This module is based on Eric Meyer’s CSS reset and can be imported using;

@import "compass/reset";

However, I prefer using Normalize that thankfully also comes in Sass/Scss format. Download the file here, save it in sass working directory and import it into our stylesheet.

@import "normalize";

Recommended Reading: Reviewing CSS Style Priority Level

Variables

We certainly will have a few constant values in the stylesheet, thus we will store them in variables and these two variables below will define the base color of our vCard.

$base: #fff;
$dark: darken($base, 10%);

While the $width variable below will be our page’s width; it will also be the basis for defining other element sizes.

$width: 500px;
$space: $width / 25; // = 20px

And the $space variable, as you can see, will be the default spacing or column size in our vCard which in this example would be 20px;

Compass also has Helpers to detect image size and we will make use of this feature on our picture profile, as follows;

$img: image-width("me.jpg") + (($space / 4) * 2);

The extra Addition of (($space / 4) * 2) in the code above, is to calculate the total image width including the border that will frame the picture. A frame generally has two sides; top and bottom / left and right, that is why we multiply the division result by 2.

Selector Inheritance

There are apparently a few selectors in our stylesheet that will have same styling rules. To avoid repetition in our code, we will need to specify these styles in the first place and inherit them with the @extend directive whenever needed. This method, in Sass, is known as Selector Inheritance, a very useful feature that is missing in LESS.

.float-left {
	float: left;
}
.box-sizing {
	@include box-sizing(border-box);
}

Styles

When all that is necessary has been setup, then it is time to style our vCard, starting with a background color to our HTML document;

html { 
	height: 100%;
	background-color: $base;
}

vCard

The following styles define the vCard wrapper. If you have been working with LESS previously, this code will be familiar to you and easy to digest.

.vcard {
	width: $width;
	margin: 50px auto;
	background-color: darken($base, 5%);
	border: 1px solid $dark;
	@include border-radius(3px);
	ul {
		padding: 0;
		margin: 0;
		li {
			list-style: none;
		}
	}	
}

The wrapper’s width inherits the value from $width variable. The background color is darker by 5% from the base color, whilst the border color will be darker by 10%. This coloring is achieved using Sass color functions.

The vCard will also have 3px radius of rounded corners that is achieved using Compass CSS3 Mixins; border-radius(3px).

Bio Section

As we have noted early in this tutorial, the vCard can be divided into two sections. These nested styles below will define the first section that contains the picture profile with a few details (name, email and phone).

.bio {
	border-bottom: 1px solid $dark;
	padding: $space;
	@extend .box-sizing;
	img {
		@extend .float-left;
		display: block;
		border: ($space / 4) solid #ffffff;
	}
	.detail {
		@extend .float-left;
		@extend .box-sizing;
		color: darken($base, 50%);
		margin: {
			left: $space;
			bottom: $space / 2;
		}
		width: $width - (($space * 3) + $img);
		li {
			&:before {
				width: $space;
				height: $space;
				margin-right: $space;
				font-family: "ModernPictogramsNormal";
			}
			&.name:before {
					content: "f";
			}
			&.email:before {
					content: "m";
			}
			&.phone:before {
					content: "N"; 
			}
		}
	}
}

There is one thing from the code above that we think you need to take a notice. The width in .detail selector is specified with this equation $width - (($space * 3) + $img);.

This equation is used to dynamically calculate the detail’s width by subtracting the picture profile width and the spaces (padding and margin) from the vCard total width.

Social Section

The styles below are for the second section in the vCard. There is actually no difference with plain CSS here, only now they are nested, and a few values are defined with variables.

.social {
	background-color: $dark;
	width: 100%;
	padding: $space;
	@extend .box-sizing;
	ul {
		text-align: center;
		li {
			display: inline-block;
			width: 32px;
			height: 32px;
			a {
				text-decoration: none;
				display: inline-block;
				width: 100%;
				height: 100%;
				text-indent: 100%;
				white-space: nowrap;
				overflow: hidden;
			}
		}
	}
}

In this section, we will display the social media icons using the image sprite technique, and Compass has a feature to do that job faster.

First of all, we need to put our icons in a special folder – let’s name the folder /social/, for example. Back in the stylesheet, concatenate those icons with the following @import rule.

@import "social/*.png";

The social/ above refer to the folder where we store the icons. This folder should be nested within the image folder. Now, if we take a look at in our image folder, we should see a sprite image generated with random characters, like social-sc805f18607.png. At this point, nothing still not happens at the front-end, until we apply the styles with the following line.

@include all-social-sprites;

Final Result

Finally, after all the hard work we can now see the result like this:

In case we think that 500px is too wide later on, we only need to change the value in $width variable – for example, 350px – the rest will “magically” be adjusted. You can also experiment with the color variable.

Conclusion

In this tutorial we have shown you how to build a simple online vCard with Sass and Compass; this is just an example, however. Sass and Compass are indeed powerful, but sometimes it is not necessary. For instance, when we are working on a website with a few pages and probably will also only need fewer lines of styles, using Sass and Compass is considered excessive.

This post closes our Sass series and we hope you enjoyed it. If you have any question regarding to this subject don’t hesitate to add it in the comment box below.

Related posts:

  1. Syntactically Awesome Stylesheets: Using Compass in Sass
  2. Getting Started with Sass: Installation and the Basics
  3. CSS Preprocessors Compared: Sass vs. LESS
  4. LESS CSS Tutorial: Designing A Slick Menu Navigation bar

via hongkiat.com http://www.hongkiat.com/blog/sass-compass-vcard/