In this tutorial we’ll be focusing on coding a PSD layout, using the responsive Skeleton boilerplate. There are plenty of tutorials on how to code a design using HTML and CSS, often with an extra dash of JavaScript, but the main purpose of this tutorial is to get things built using the latest version of the Skeleton framework (2.0.4). There have been some great improvements since we last covered it!
First of all, let me introduce Skeleton, then we’ll jump into some coding.
What is the Skeleton Boilerplate?
Skeleton is the brainchild of Dave Gamache. It’s a twelve column, fluid grid, with a default max width of 960px, basic typography and minimum styles for common HTML elements such as buttons, links, inputs and textareas.
Its strength lies in the fact that it’s a light CSS framework. Coming in just at shy of 400 lines of code, Skeleton is designed to be a starting point, not a full framework crammed with UI design like Bootstrap, Foundation or SemanticUI.
Why Use Skeleton?
Because it’s simple to use, and it’s a great start for building your own responsive frameworks.
So What’s New?
Dave Gamache introduced and updated several features in Skeleton v2.0:
utility classes such as .u-full-width, .u-max-full-width which is perfect for 100% width containers
typography
buttons
forms
lists
tables
Getting Started
During this tutorial we are going to code the design shown above, made by Samir Timezguida. Along the way we’ll:
Download Skeleton and write our own HTML markup
Pull the images from the PSD and write the CSS
Add a JavaScript flavour on top which will add some interactivity
Let’s begin by downloading Skeleton framework from www.getskeleton.com and grabbing the PSD from the source files.
Sketching and Planing
You may prefer a different approach, but I like to begin by sketching the layout to visualise every section. There are plenty of sections across the layout:
Hero
Introduction
Creativity
Work
Help
Clients
About
Video
Why us
Quote
Get in touch
Contact
Footer
This is my sketched outcome for the desired HTML structure:
Sections
For each section we’ll make a wrapper (or band) container which will fill the whole window width, with the section name as class name. Inside it we are taking advantage of Skeleton by building the grid to make a container and row wrapper. The HTML for each section will be a variant of this:
Now it’s time to take each section and add the markup. Don’t worry about styles, images, fonts and so on, for now we’re concentrating purely on the HTML structure.
Menu
For the menu, we need to add the “hamburger” icon and an unordered list filled with the internal links. Each link will point to a specific section.
Note: the keen-eyed among you may recognise the fa fa-bars classes on the <i> element for the navigation icon. These are typical of Font Awesome icons, which we’ll implement later on in the process.
Hero
The hero section, as seen in the PSD, comprises one stretched image, a title and a subtitle. For the background image we’ll add a different container, for the title we’ll use h1 and for the subtitle a h2. Here, you see, i’m using u-full-width, the new skeleton utility class.
Introduction
The introduction contains two elements; a title and a subtitle. We prepare the html to support the title’s border, by adding a separator class, which will add border-bottom and some spacing.
Creativity
Creativity has a full-width background and a button. You can also see the centered class on the h4; a utility class which we’ll create in the next tutorial to help us centre elements on both the vertical and horizontal axes.
Work
This is the biggest section on the website and contains an additional two rows; one for work filter links and one for work items.
Work filters contains an unordered list filled with links which will filter the work items.
The work items themselves will be four columns wide, containing the work image, the work title and the work description.
You can also see that I’m using another utility class, vertical-centered, which will centre the item on the vertical axis. The description for each work item also has a border at the bottom. To achieve this we’ll reuse the separator class seen earlier, whilst adding an extra class for additional styling, color and size.
Help
The help section has the same html structure as the creativity section, but we’re differentiating them by adding different class names.
Clients
This section contains an unordered list with the client images. I’m using placehold.it to generate placeholder images.
About
Here we have two different rows, one for the introduction text and one for the people.
The introduction row contains a title and a subtitle, just like we previously saw in the introduction section.
The people list is an unordered list containing four items, the last one being for hiring purposes. Each list item is three columns wide and contains an image, a link, the name and the position of the individual.
Video
The video section contains just one button and the stretched background image. In the coming tutorials, we’ll make this a modal window pointing to a Youtube video.
Why us
Moving on, the “why us” section is made of two individual sections; one for a brief introduction and the other one for current services.
The introduction section is twelve columns wide and contains the title wrapped in an <h3> and the text for a brief description wrapped in an <h4>. As you’ll see below, the title also has separator class to create the border effect mentioned earlier.
In the services section, each list item contains an image and a description.
Quote
This section inherits the same html structure as the creativity section, but with different text for the centered button.
Get in touch
Just a couple more to go! This section offers a brief storyline for the form. It’s built with an html structure which will probably look quite familiar by now, with a title and a description having a separator between them.
Contact
The contact form section comprises two columns, one for location meta and social profile links and one containing the form which helps the user to contact the firm.
Again I’m using markup to support Font Awesome, which we’ll integrate in the next tutorial.
The first column is four columns wide and the second one is eight columns wide. Here you can really see the power of Skeleton boilerplate, because we’re using nested columns and rows. The form has different sizes within it; the first two inputs are six columns wide inside a wrapper which is eight columns wide.
Footer
Our footer contains some text wrapped in a twelve columns container.
That’s all for Now!
This tutorial has demonstrated exactly what Skeleton is for: we’ve used its markup to flesh out the structure of a web page. In the coming tutorial we’ll take that structure and add some styling to give it a completely unique look. See you there!