Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From \$16.50/m

# Build a Responsive, Single Page Portfolio with Sass and Compass

There's a lot that goes into creating a web site these days. We're now building websites using HTML5, CSS preprocessors, APIs, custom typography and more. Our design challenges include responsive architecture, resolution independence and multi-device interaction support. In this article, we'll build a single page portfolio that covers aspects of all these techniques.

## Overview

Let's take a look first at what we will be creating:

This is a customizable, responsive, single-page website that incorporates modern web development techniques including:

1. Responsive design
2. HTML5 markup
3. CSS using SASS and the Compass preprocessor
4. Typography using Google's web fonts service
5. jQuery fetching data from Dribbble's API
6. Cross-browser, responsive, horizontal-scrolling carousel supporting touch interaction (without using javascript)
7. Icon font using the free iconmoon.io font-generator

## Step 1: Creating the Project Root

First we'll start by creating our project's root folder and default index.html file.

## Step 2: Starter Markup

Let's get some basic HTML up and running. Use the following:

In case you're not sure, here's what we're doing:

• Viewport meta tag for responsive design
• html5 shiv from Google's CDN; allows older browsers (IE) to support modern HTML5 elements

## Step 3: Setting Up CSS with Compass

To build out our CSS, we're going to use Compass. If you're not familiar with Compass, you might find Webdesigntuts+' articles on Compass useful and informative. In this tutorial, I'm going to be using a few simple terminal commands to get Compass up and running. If that makes you uncomfortable, you can look into using the GUI compass.app to get your SCSS project started.

### Installing Compass

To begin using compass, you can follow the directions on the Compass website. Or, I'll show you the simple steps right now.

Compass requires that you install Ruby (if you're on a Mac, it comes preinstalled in Lion). Once you have Ruby installed, simply run these commands from the terminal:

### Setting Up Compass with Your New Project

Now we want to setup compass for our new project. To do this, we'll run a simple command from the terminal. Navigate to your web page's directory (my directory is called 'mySite' and it's in my 'Sites' folder, so I type cd ~/Sites/mySite/ ). Now run this command:

Compass just created a new project. It probably output a bunch of info in the terminal. Don't worry about that right now.

Note: You can configure compass and its directory structure by passing in additional arguments such as: compass create --sass-dir "css" or editing the confib.rb file. We're going to use Compass' default directory structure for simplicity.

### Your New SASS and CSS Directory

Now you've got some new files/folders in your project's root directory created by Compass. These include:

• "sass" folder with .scss files
• "stylesheets" folder with regular .css files
• "config.rb" file which holds Compass configuration information

Compass works by taking SASS formatted .scss files in the "sass" directory, processing them, and outputting them as normal, browser-readable .css files in the "stylesheets" directory.

We're not going to use any of the default files created by compass, so go ahead and delete all the files in the "sass" and "stylesheets" directories.

## Step 4: Creating Our First SASS and CSS File

Now to get Compass up and running, let's create our first .scss file.

In the "sass" directory, create a file called style.scss. Make sure it has the ".scss" extension, otherwise compass won't know to compile it. Now type the following in that file:

Here's what we're doing in this SASS file:

• @import "compass/reset" is importing a Compass module that will include some CSS to reset browser defaults (it's like including a CSS reset for default margins, heading sizes, padding, etc.)
• @import "compass/css3" is importing a Compass module that will include mixins (which we'll cover later) for writing cross-browser CSS3 rules with vendor prefixes
• body is our very first, custom CSS rule.

To compile your SASS code, go to the terminal and navigate to wherever your site is located (again, mine is in my "Sites/mySite" folder, so I run cd ~/Sites/mySite/). Then run this command:

This will compile your SCSS file named style.scss into the normal, browser-readable CSS format, name it style.css, and copy it to the "stylesheets" directory. You can look in the "stylesheets" folder and open the newly compiled "style.css" file. You'll see a bunch of CSS resets and at the end of the file you'll see the body {color: #333} that we wrote. Nice job! You've got Compass up and running now!

### Note: Automatic Compiling

compass compile only compiles your .scss file once. Having to type compass compile in the terminal each time you save a file would be a pain. So, if you're going to be working a lot, it's probably a good idea to run (from your project's directory) compass watch. This will watch your SASS directory and if anything changes, it will automatically recompile your CSS. Now, each time you save "style.scss" your "style.css" file will automatically recompile!

Now you just need to link up our stylesheet to our HTML document. Add this piece of code between your <head> tags:

## Step 5: Setting Up Typography Using Google Web Fonts

We're going to use Google Web Fonts in order to use potentially non-native fonts in our website.

Implementation is rather simple. First, we need to choose a font. I chose "Bitter" to use for my headings.

Click "add to collection" under the font's actions:

Now click on "use" so we can learn how to use the font we've selected in our web page:

I'm planning on using the italic and the normal version of the font. So let's select the checkbox for the italic version of the font.

Google gives you various options for using the font in your web page. We're going to use the 'standard' method. It's the easiest method and uses Google's hosting services for providing the font.

Take this snippet and add it in the <head> of the document.

Perfect! Now all we have to do to use that font is declare the font's name in our CSS font stack, like so:

## Step 6: Creating the Header

So we've done a lot of setup here for our project. We've got our basic HTML page structure, we've got our CSS setup to be built using Compass, and we've got our typography set to load from Google's Web Fonts. Now let's start creating markup for our page elements.

We're going to create our page header which will have two components: an avatar and an introduction.

To create the avatar, I created an image that is 200x200 pixels and resized it in the markup to 100x100. This will make the image crisp for retina devices. The image itself should just be a square. We'll make it round and add decorative features using CSS. Right now you should have something simple like this:

### Basic Styles

Before specifically styling the header we are going to setup some basic page styles:

Here we're just setting some general page styles, such as centered aligned text, font size, responsive images, and links that aren't underlined. You may also have noticed our comment using //. In normal CSS you'd have to do single-line comments like this: /* this is a single line comment */. But in SASS, you can use //. Your page should look something like this:

Note: If your page doesn't look like that, it's probably because you didn't recompile your stylesheet! You can re-read Step 4 which talks about compiling your stylesheet with compass.

### H1 Tags

Let's style our <h1> tags, since we'll use them in each section of our HTML document.

Notice we're using our Bitter font family from Google Fonts. This will style all of our primary headings the same. Now we've got our primary heading in our hierarchy looking, well, primary!

Now let's add some spacing for our header, a divider, and make our H1 in the header italic:

Notice how we are nesting CSS rules? This is the bread and butter of CSS preprocessors. Nested selectors are prefixed with their parents when the CSS is processed.

Remember how I said we would style our avatar with CSS? Let's do that now:

You may be wondering what the @include code is? It is a compass CSS3 mixin. Essentially, it takes the CSS rules you give it and outputs them with all the CSS3 browser prefixes you need. So instead of typing the rule multiple types for different browsers, you only have to write it once and Compass takes care of the rest! No more -webkit-box-shadow, -moz-box-shadow, etc. Here's an example:

Quick Tip: With SASS, you can manage your CSS color values using variables. Say you use #000 in ten different places in your CSS. If you want to change that to #333, you'd have to find and change it everywhere you used it. With variables, you'd only have to change it in one spot! Check out the SASS documentation to learn more.

Now you should have something like this:

Because of our usage of CSS3 rules, this won't look the same in older browsers. However, you'll still be able to see the basic, square avatar. So we're doing a good job of progressive enhancement.

## Step 7: Creating the Dribbble Content Carousel

Now let's create our main content. What we're going to create here is a horizontally-scrolling carousel that uses pure HTML and CSS to allow for touch-based interaction on capable devices.

### The Markup

We're going to fill our carousel with content from Dribbble. So, to achieve this, let's start with markup for this content.

Let's take a look at what we're doing here:

• Create a <div> for our carousel. This will house the container for the Dribbble shots as well as the gradient masks we're going to apply on each side of the carousel. These masks will give the effect that the content is disappearing on the sides of the viewport as the user scrolls.
• Put a default "loading" image in the Dribble shots list. This will be replaced once we load all the images with javascript
• Add directions "scroll to view" to make it clear to the user they can swipe/scroll the content in the container.

We'll have something basic that's partially styled like this:

## Step 8: Fetching the Content from Dribbble using Javascript

The javascript to load a user's shots from Dribbble is actually quite simple thanks to jQuery and Dribbble's API.

### Create a javascript file and load jQuery

Since we are using jQuery, we'll load that from Google's CDN. We'll also create a new javascript file in which we'll put our own javascript we're about to write. So add these scripts before the closing <body> tag:

### Setting up variables

Now, in our "dribbble.js" file, let's begin writing our script. Let's start with some simple comments and declare two variables we'll be using:

Notice our two variables:

• dribbbleUsername is the Dribbble username of the person's content we want to fetch (in this case, we're just using mine)
• html is where we'll store the markup we're going to generate and insert in the DOM

### Get the JSON from Dribbble's API

Now we're going to request the info we need from Dribbble's API using getJSON

Here we are making a request to Dribbble's API. Notice we are inserting the variable dribbbleUsername in the request URL. This is telling Dribbble we want a bunch of shots from a specified user. Dribbble's API will process the request and return a bunch of JSON that we store in the data function callback.

If you actually visit that link in a browser, you'll see what Dribbble's API is returning.

This convoluted text has all the info we need to generate a list of the user's most recent Dribbbles! Now we just need to parse it.

### Loop over the results and generate the HTML

Now that we have all this JSON telling us what the user's latest shots are, we're going to loop over it and get the stuff we need. The JSON contains a bunch of information but we're only going to need values for the following keys:

• The shot image url: url
• The shot name: image_url
• The shot URL: title

If you run the JSON that Dribbble returned through a formatter (such as JSONLint), you'd get something a lot more readable. This would allow you to easily see each key/value pair Dribbble returned. That's where we are picking out the values we want.

Dribbble returned all of that information for each shot! Now we just loop over each shot, get the values we want, and generate an HTML list. Take a look at this example markup. This is what we want to generate for each shot, where the asterisks indicate the key values we got from our JSON:

So let's run our loop. We're going to get the ten latest shots that Dribbble returned:

Do you see what we did there? Here's what we are doing:

1. Create a variable numberOfShots which defines how many dribbble shots we'll be displaying on our page (how many times the for loop will run)
2. Run a for loop taking the variable html and concatenating all the HTML we need for a list of shots from Dribbble
3. Insert the generated list markup into the DOM where we have our "loading" placeholder

You should have something like this now that lists all the shots on a single page:

## Step 9: Styling the Carousel of Dribbble Shots

Now that we have all our Dribbble shots in our markup, we want to create the CSS for our carousel.

### Overflowing Content Horizontally

As we mentioned before, we are going to create a horizontally-scrollable container that will respond to touch-based interactions on mobile devices. So, let's get started with the following CSS

Here we are giving relative positioning to .carousel because we're going to absolutely position our masks inside that container. Also, the .shots-container, if you remember, is the container for our list of Dribbble shots. This will be the container that responds to touch-based interactions in webkit browsers. The -webkit-overflow-scrolling: touch rule, if supported, will provide native scrolling on touch devices. This will be much smoother than anything javascript can provide. By setting our overflow on the x-axis (horizontally) to scroll, we can create scrollable content that flows beyond its container.

### Lining Up the Shots Horizontally

Now that we have a container for horizontal content, we need to line up all our Dribbble shots horizontally. This is a big block of code, but don't worry, we'll go over it:

Here's what we're doing with our CSS. First, we are giving .shots a fixed width. This fixed width will extend beyond the viewport of the browser. However, because we set it's parent to be scrollable, users will be able to scroll the content that's overflowing the screen.

You'll notice that .shots width is calculated based on the width of its child

• elements. In the case above, each shot has a set size for:
• width (400px)
• margin (10px on each side for a total of 20px)
• padding (10px on each side for a total of 20px)
• border (1px on each side for a total of 2px)

This means each <li> element will have a total width of 442 pixels and since there are ten of them, the parent needs to be 4420 pixels wide. You'll notice that we shrunk down the size of each shot at mobile sizes (because the 400px dribbble shot won't fit mobile devices with a width of 320px). So we adjusted our .shots container and it's child <li> elements accordingly using breakpoints.

A few other things of note: we gave .shots li a loading image background, so users know we're trying to retrieve the data if the page load is taking a long time. Also, the left and right padding on .shots is where our masks will go. Here's what you should have so far:

You'll see your dribbble shots disappear off the screen but are accessible by scrolling. If you load them onto a device like the iPhone, you'll be able to use native swipe interactions to scroll through the carousel!

As noted in the markup, we have two <span> elements that will act as masks on the left and right edges of the screen. This will help aid in visually hinting that there is more content off the screen and that the user should try scrolling. Here's our CSS:

Notice we used the css3 gradient mixins from Compass to creating our gradients. Then we just absolutely position them inside of their parent .carousel. See how they gently hide the content as it disappears off the screen?

## Step 10: Creating the Footer

Now let's start creating our footer. First we'll start with the markup

You'll have some basic markup without any styling, like this:

### Styling the Footer

Let's give our footer some basic styling.

## Step 11: Refining the CSS

Let's refine our styles just a bit by adding a little more CSS:

Great, now you should have something like this:

## Step 12: Adding Icon Fonts

Now we want to add icons to each of the links in our footer. Because we want our icons to be resolution independent but also work in older browsers, we're going to use the icon font technique.

To make this easy, we're going to use the icon font generator service icomoon

Visit the icomoon app. You'll see a bunch of icons provided for free that you can choose to include in your font.

Now we just need to find icons for each of the social services we're using. Because these are such common services, there are free icons available for us to use. It is worth noting that if you needed to use your own icon as part of the font, icomoon allows you to upload your vector icon and include it in your font (though we won't cover that in this tutorial). Here's a list of icons we'll be using:

• Instagram
• Dribbble

Find each one and select it. Once you've found them all, click "generate" at the bottom of the app

Once you click on "generate" you'll be taken to a page where you can review all the icons you've selected. It looks like this:

At this point you have an overview of the icons that will be generated in your font. icomoon also gives you various customization options; however we are not going to use any of them at this point. Just go ahead and download your font.

### Rundown of Files

Here's an overview of what we have:

• index.html - this is a kind of demo page that gives you an overview of what icons you downloaded, information about each one, and a working demo of their usage
• lte-ie7 - this is a javascript file that you can include in your HTML if you want IE6 and IE7 to support your icon fonts (we're not going to do that)
• /fonts - this folder contains our icons packaged as a font. There are a variety of font file formats since different browsers need different formats
• style.css - this file has the necessary CSS code to begin using the icon fonts. We'll be copying code from here

You should take the /fonts folder and move it into the root directory of your website, as these fonts are assets that we'll serve to browsers.

### Incorporating the Fonts Into the Webpage

We are going to be using the CSS pseudo-class approach to bring the icons into our webpage. So, if we look in the style.css file that came with our icons, there are a variety of CSS classes for each icon. We need to add those to our <li> elements, like this:

Now that we have the markup, we'll import the custom font using CSS. We'll borrow these styles from style.css that came with our icon font.

Note: since we were copying/pasting from the file we downloaded, we had to change the url() reference that points to our fonts by adding ../

Now we will copy and paste the CSS for each of the icons

icomoon generated all of this code for us, but here's a brief overview of what's happening:

• The first block of code declares shared styles for each of the icons
• Each icon needs a corresponding class that uses the content rule to declare which font character the browser should use. Essentially, the character \e000 corresponds to the facebook icon in the font file. \e001 to the twitter icon, etc etc.

Your icons should show up now without any special styling:

## Step 13: Styling the Icons

Now we are going to style our icons according the brand colors of each service. Let's start out by giving our icons some nice spacing.

Here's an overview of what we're doing here:

• <li> - we're using the compass mixin inline-block() which will output some good CSS for cross browser support for inline-block positioning. We're also setting the CSS transition rule (using a Compass mixin) for some nice hover effects we'll add in a bit.
• &:hover - we're using the compass mixin scale(1.25) which will translate to transform: scale(1.25); with proper browser prefixes. This rule will slightly enlarge the icons and links on hover for a nice UI interaction.
• &:before - we're positioning the icons (which, if you remember, are displayed using a :before pseudo element) above the link text
• <a> - we're setting up each link as a set-width block. We're also adding support for text truncation in case the service we're linking to has a really long name

Now you should have something like this:

Now we just want to add some color to our services. We want to add the brand color to each icon and it's text. Don't forget, we're going to add a hover interaction. When the user hovers over a service, we'll slightly enlarge the text and icon (using the scale(1.25) CSS we just inserted) while also inverting the colors. So the background becomes the brand color while the text and icon will become white. So, we need to set colors for each brand:

As mentioned earlier, you might even want to set variables for these colors, to fully take advantage of Sass' capabilities.

That's it! Now you should have something like this:

## Conclusion

Now you know some techniques for building modern web pages such as:

• Implementing scalable icons as fonts
• Retrieving JSON from an API
• Using custom fonts from Google's web font service
• Building CSS with a preprocessor like Compass
• Implementing a scrolling carousel for touch devices using pure CSS

I hope you've learned a few things along this journey. Feel free to customize this page further and make it your own!