Styling Our Behance Portfolio Website Using LESS

During the previous part of this series, we learned about the Behance API, using it to capture a user's portfolio pieces and display them on a web page. In this part we will style the web page, presenting the portfolio pieces in a suitably attractive way.

Tools We'll be Using

To get started, we will prepare our toolkit:

Normalize

We will use Normalize to make the basic element styles more consistent across different browsers and minimize the chance of unexpected results.

LESS Mixins Libraries

We will also be using LESS for styling our website. Whichever preprocessor you prefer, it's definitely recommendable to use them in your workflow. I'm a big fan of, instead of having to trawl the desired color in the color picker from a separate application, simply using LESS control functions such as lighten() and darken() to give us a range of color variants.

To help us further, we will use LESSHat to help us write less code with its Mixins collection. We will also use Remixins developed by Christopher Ramírez. Remixins is a collection of Mixins to convert px into rem units in. The collection includes the Mixins for specifying font-size, margin, padding, width and height, and CSS position (left, right, bottom, and top).

In addition, we will also need a tool to compile LESS into regular CSS. In this tutorial, we will use an app called Koala, which is available in Windows, OSX, and Ubuntu. You can, of course, use whatever compiler you prefer, but with any luck, you'll be able to follow this tutorial regardless of the platform you are using.

For more about LESS, please refer to these tutorials:

Google Fonts

Default system fonts like Arial just aren't doing it for me today. So in this tutorial I will use Google Fonts instead. I've picked Cantata One for the heading and Open Sans for the default body text. This is a personal preference, you're free to exclude Google Fonts or use alternatives if you wish.

Foundation Icon Fonts

We will also use font icons for a bit of decoration on our website. These days we have a ton of options for font icons. However, during my search I was quite surprise that only few of these fonts include the Behance icon in their collection. In any case, for this tutorial we will use Foundation Icon Fonts 3, as it has includes the Behance icon and is also available through a CDN.

Setting up Our Assets and Tools

In our project root directory, let's create some new folders named less and css (which will be the output folder of the LESS file). Create a new file named style.less and grab Remixins as well as LESShat. Put these three LESS stylesheets in the less folder. At this stage, the list of files and folders in our project directory should look like this:

|-- css
|-- index.html
`-- less
    |-- lesshat.less
    |-- remixins.less
    `-- style.less

Then add Normalize, the Foundation Icon Fonts, and our Google Font stylesheet inside the head tag, along with style.css, which will be the output file of style.less.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
<link href='http://fonts.googleapis.com/css?family=Cantata+One|Open+Sans:300,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/style.css">

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>

Also, open Koala app (or whichever form of compiling you prefer) and add our project directory to it.

Adding the Icon Fonts

Before we write any styles, let's add a few icons to our website. First we will add the map location mark beside the user's location element with the fi-marker class. Add this class in beside the profile-location class like so:

1	...
2	<div class="profile-location fi-marker">{{user.city}}, {{user.country}}</div>
3	...

This will add a :before pseudo element to the div, injecting the marker icon in through our Foundation Icons. Next, we will add the Behance logo into the footer section with the fi-social-behance class.

1	...
2	<p><a class="power-logo fi-social-behance" href="http://www.behance.net/" title="Behance" target="_blank">Behance</a></p>
3	...

Setting up Mixins and Variables

Let's open our style.less, and import both lesshat.less and remixins.less using the (reference) mark.

1	@import (reference) 'lesshat.less';
2	@import (reference) 'remixins.less';

The (reference) mark was introduced in LESS 1.5. It means that LESS will use the file only as reference, it will not compile and output the content into the file. It's a very powerful feature which minimizes duplicate and unnecessary styles.

Inside style.less, we'll add the following variables which store the color palette and font family of our website.

@bg-body   : #fafafa;
@bg-header : #303746;

@color-base  : #353537;
@color-name  : #e0e0e0;
@color-title : #6b919f;

@font-body  : 'Open Sans', Arial, sans-serif;
@font-name  : 'Cantata One', Georgia, Times, serif;

Placing these variables in one place acts as a sort of style guide, but it also helps us to maintain our styles in a more convenient way. For instance, if there's anything in the website we want to change, we can simply change the value within these variables. It's a much safer way to modify styles, instead of performing "Search and Replace".

Starting to Style

Basic Element Styles

Even though we have added Normalize which has standardized our elements styles, we still have a few styles to tweak to follow our particular need. To begin, we will alter the box-sizing, setting all the elements' (including the pseudo-elements') box-sizing to border-box. This will give our dimensions a much more controllable basis to work from.

We can apply this with the .box-sizing Mixins from LESSHat library, as follows:

1	, :before, *:after {
2	.box-sizing(border-box);
3	}

Next, we will set the html font size to 62.5%, which is one approach to making relative units more manageable.

1	html {
2	font-size: 62.5%;
3	}

62.5% here is measured against the browser standard of 1em which is 16px; so 62.5% of 16px is equal to 10. By doing this, we will easily be able to figure out the conversion of rem in px by multiplying it by 10. 1.2rem, for instance, will be equal to 12px and so forth. In addition to this, if we take a look at remixins.less source, we will find the base font size in @base-font-size-px variable is set to 10.

You can refer these articles for further on CSS relative unit:

Taking the "Erm.." Out of Ems by Ian Yates
Taking Ems Even Further by Ian Yates

We use a figure element to contain the portfolio image cover. But our figure element has inherited margin values from Normalize which causes unintended white-space between the portfolio images. So, here we will remove the margin from the figure element.

1	figure {
2	margin: 0; /overwrite Normalize.css default style/
3	}

The Clearfix Hack

Using a clearfix hack is a popular method as a recourse to some layout troubles caused by floating elements failing to clear their child elements. So here we will add the clearfix tip by Nicolas Gallagher which we have turned into LESS.

.clearfix {
    *zoom: 1;
    &:before,
    &:after {
        content:" ";
        display: table;    
    }
    &:after {
        clear: both;    
    }
}

If you take a look at our HTML structure, we have added clearfix class to some elements.

The Body Styles

For the body, we will set the the font styles that apply through the entire page. These styles include the font size, font color, font weight, font family and the background color. Here, we will use the .font-size() mixin from Remixins library to generate the font size. All Mixins included in the Remixins library generate a px unit fallback, helpful for browsers that do not support the rem unit.

body {
    .font-size(16px);
    background-color: @bg-body;
    color: @color-base;
    font-family: @font-base;
    font-weight: 300;
}

Having saved the file, Koala will automatically compile the output. And the above code should look like this in regular CSS.

body {
  font-size: 16px;
  font-size: 1.6rem;
  background-color: #fafafa;
  color: #353537;
  font-family: 'Open Sans', Arial, sans-serif;
  font-weight: 300;
}

The Header Styles

Next, we will add the styles for the website Header, as follows.

.portfolio-header {
    .padding(50px, 0);
    background-color: @bg-header;
    text-align: center;
    .profile-avatar img {
        .size(80px);
        border-radius: 50%;
    }
    .profile-name {
        .font-size(24px);
        .margin-bottom(10px);
        color: @color-name;
        font-family: @font-name;
        font-weight: 400;
    }
    .profile-fields {
        .max-width(320px);
        .font-size(14px);
        color: lighten(@bg-header, 50%);
        margin-left: auto;
        margin-right: auto;
        .field-list {
            padding: 0;
        }
        .field-item {
            display: inline-block;
            &:after {
                content:' ,';
            }
            &:last-child:after {
                content:'';
            }
        }
    }
    .profile-location {
        .font-size(14px);
        color: lighten(@bg-header, 30%);
        &:before {
            .margin-right(10px);
            .font-size(18px);
        }
    }
}

This is quite a chunk of syntax, so let's break it down into pieces and examine what it's doing. Firstly, we've added background color in the Header with the color stored in our @bg-header variable. We use .padding() Mixins from Remixins to add padding at the top and bottom side of the Header, thus delivering more vertical white-space. We've also added text-align:center so our content looks more in order.

.portfolio-header {
    .padding(50px, 0);
    background-color: @bg-header;
    text-align: center;
...

We've set the user's avatar image size with .size() Mixins and made circlular by setting the border-radius to 50%. You can see these styles are declared in .profile-avatar img.

1	.profile-avatar img {
2	.size(80px);
3	border-radius: 50%;
4	}

Below are the rules for the user's name. Here we set the font size with a .font-size() mixin. We've deployed the @color-name variable for the font color, and passed the font family with the @font-family variable. And lastly, we've added font-weight: 400; to make the font look bolder than the rest.

.profile-name {
    .font-size(24px);
    .margin-bottom(10px);
    color: @color-name;
    font-family: @font-name;
    font-weight: 400;
}

Next, we will look at the rules for the user creative fields area, which we target with .profile-fields. In Behance, you can add as many skills or field specialties as you wish. That means each user may have short, or really long skill descriptions. I've therefore decided to set the width with a max-width. We set the font color for 50% lighter from the Header background with lighten(@bg-header, 50%).

Furthermore, each of the field items is separated by a comma which we've supplied through an :after pseudo-element. However, logically, the last item should not have a comma, so we've selected the last item with :last-child and set the content property to be empty content:''.

.profile-fields {
    .max-width(320px);
    .font-size(14px);
    color: lighten(@bg-header, 50%);
    margin-left: auto;
    margin-right: auto;
    .field-list {
        padding: 0;
    }
    .field-item {
        display: inline-block;
        &:after {
            content:' ,';
        }
        &:last-child:after {
            content:'';
        }
    }
}

Following, are the style rules for styling the user location. Here we set the color slightly lighter than the background color, 30% to be exact. And we've also slightly extended the gap between the text and the marker icon from Foundation Icon Fonts by adding margin-right to the :before pseudo-element.

.profile-location {
    .font-size(14px);
    color: lighten(@bg-header, 30%);
    &:before {
        .margin-right(10px);
        .font-size(18px);
    }
}

After adding these styles, the Header should now look something like this:

Styling the Portfolio Section

The following snippet contains all the styles for our portfolio.

.portfolio-area {
    .margin(50px, auto);
    .max-width(960px);
    width: 100%;
    .portfolio-list {
        padding-left: 0;
    }
    .portfolio-item {
        .margin-bottom(30px);
        .height(320px);
        .padding(0, 15px);
        float: left;
        list-style-type: none;
        width: 33,33333333333333%;
    }
    .portfolio-content {
        text-align: center;
    }
    .portfolio-cover {
        width: 100%;
    }
    .portfolio-image {
        border: 8px solid #fff;
        max-width: 100%;
    }
    .portfolio-title {
        .font-size(14px);
        color: darken(@color-title, 10%);
        text-transform: capitalize;
        vertical-align: middle;
        width: 100%;
    }
    .portfolio-fields {
        .font-size(12px);
        color: darken(@bg-body, 30%);
        .field-list {
            padding: 0;
        }
        .field-item {
            display: inline-block;
            &:after {
                content:' ,';
            }
            &:last-child:after {
                content:'';
            }
        }
    }
}

Many of the styles above are decorative. But here are a few key things worth noting:

First, we set the .portfolio-area width to 100%, but preserve the maximum width at 960px. This will allow the width to adapt gracefully in smaller viewport size. Also, as you can see above, we've set the .portfolio-item width to 33,33333333333333%. This is because we will display three items on each row. The 33,33333333333333% is derived from the division of 100% by 3.

The .portfolio-cover width is set to 100%, it will therefore fill its parent's width. The .portfolio-image is set with max-width:100% so the image will not exceed the parent width regardless of the size. All these width settings will help us make our website fluid.

Now, the portfolio section should looks like this.

Styling the Footer

Next, we will add the styles for the Footer. The Footer is plain and simple; it only consists of "Powered by" text and a Behance icon from Foundation Icon Fonts. Below are all the style rules for the Footer.

.portfolio-footer {
    .margin(30px, auto);
    .max-width(960px);
    text-align: center;
    width: 100%;
    .power-by {
        .font-size(12px);
        color: darken(@bg-body, 30%);
        text-transform: uppercase;
    }
    .power-logo {
        .width(36px);
        .height(36px);
        color: #1769ff;
        display: inline-block;
        margin: 0 auto;
        overflow: hidden;
        position: relative;
        text-decoration: none;
        text-indent: 100%;
        white-space: nowrap;
        &:before {
            .line-height(38px);
            .font-size(36px);
            display: inline-block;
            height: 100%;
            left: 0;
            position: absolute;
            text-indent: 0;
            top: 0;
            width: 100%;
        }
    }
}

Similarly to the portfolio section, we set the Footer width to 100% and align it to the center of the browser's window with margin: 0 auto;. We also align all the content to the center to make it look orderly. We then hide the text inside .power-logo using the Kellum Method and display only the Behance logo with its brand color, blue #1769ff.

Note: Behance have a whole developer's section on their Branding Guidelines if you want to take a look.

The Footer should now look fairly complete, like so.

Making the Website Responsive

We have a fluid layout, but now we are going to make our web page responsive. Fortunately, our website is just a single page website with a very simple layout. So it won't require any lengthy code to make it responsive. To begin with, we will add the (crucial) meta viewport in the head tag.

1	<meta name="viewport" content="width=device-width, initial-scale=1.0">

Next we add some Media Queries, as follows.

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .portfolio-area .portfolio-item {
        width: 50%;
    }
}
@media only screen and (max-width: 767px) {
    .portfolio-area .portfolio-item {
        height: auto;
        width: 100%;
    }
}

These media queries will display two items in a row between 959px and 768px viewport width, and one item when the viewport width is 767px and lower.

Our portfolio website in different viewport sizes

Next Time...

Having styled the aesthetics of our page, all that's left to do is add some flair. In the next and final part of this series, we'll allow visitors to click on each thumbnail and see a larger version, plus we'll add some CSS3 animations to improve the experience.