Advertisement
  1. Web Design
  2. Skeleton
Webdesign

Adding Styles to Our Skeleton Page Build

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called From PSD to HTML With the Skeleton Boilerplate.
Building HTML Page Structure With Skeleton
Adding JavaScript Behavior to Our Skeleton Web Page

In this part of our ongoing build process we are going to focus on styling the HTML. This tutorial will have three main sections:

  1. Adding the images
  2. Covert fonts to web fonts
  3. Styling each section

Let’s quickly remind ourselves of what we’ve built so far:

the product thus far

Bearing in mind we’re aiming for this, we have a fair bit to do!

Adding the Images

Instead of cropping the background image for each section, we’re going to download the images from www.unsplash.com, which has large and free to use images. We are going to use the following images:

Create a new folder, call it “images” and download the images there. If you’d like to optimize and resave them to shave off some more kilobytes feel free.

Besides this, for our portfolio images, we are going to grab some rather nice trianglify images.

Download six SVG files and place them in an “images/portfolio” folder, each file should be named as follows: “work_1.svg”, “work_2.svg” ... “work_6.svg”.

For the clients, people and services sections, we are going to export the images from the PSD. I won’t go too deep into this process, since there are plenty of tutorials about how to export images from a PSD. The tool I personally like and use, on a daily basis, for exporting images is called Semser.

Each section’s image should be placed under a relevant directory “images/section_name”. The folder structure should look like this:

Convert Fonts to Webfonts

The fonts used in the PSD are Amble, SlimJoe & BigJohn and FontAwesome

For the SlimJoe and BigJohn fonts, we’ll use FontSquirrel to transform from otf to webfonts. Go to FontSquirrel and upload the fonts downloaded from here. The screen should look similar to this:

Important: Whenever you use a conversion tool such as Fontsquirrel, you need to be sure the font files you’re converting have the appropriate license. 

After FontSquirrel has finished the conversion, you can download the kit. Inside the archive you'll have the following files:

To keep everything clean, after we’ve downloaded AmbleSlimJoe & BigJohn and FontAwesome, we need to move each font pack to within a “fonts” folder. The folder structure for fonts should look like this:

Ok, now we’re done with the “images” and “fonts” folders, the remaining task is to style the sections according to the PSD, so let's get moving forward to the next section.

Styling the Sections

Each section presented in the previous tutorial needs some CSS touches, to bring the look and feel of the PSD. Let's start by creating a new file, called “style.css” where we are going to write all our custom css for the sections.

Note: you may be comfortable using a preprocessor such as Sass or LESS, in which case you’ll be concatenating your files into one, but for that sake of global appeal we’ll be sticking to good ol’ fashioned CSS in this tutorial.

So, briefly, we’ve converted our fonts to webfonts and we now need to reference them in our CSS. The code for Amble, SlimJoe and BigJohn fonts is looking like this:

FontAwesome provide a CSS file, called font-awesome.css which needs to be places inside css folder. Both style.css and font-awesome.css need a reference inside index.html as you can see from the below snippet.

After adding the references for the style files, let's jump into css/style.css and start adding some default styling, overwriting the Skeleton defaults. The first thing which I like to do is to add box-sizing to all elements as follows:

Now starts the typography rewriting. Since the designer added the custom fonts and we already converted them into web fonts, we need to assign them to headings, paragraphs and the body. Typography plays an important role when designing the website; we need to ensure that we meet the designer specifications.

As you can see from the snippet, h1 and h3 share the same font-family, BigJohn. We also need to make a few changes for body typography, like font-size, letter-spacing, color and font-family.

If you remember from the first part, when we wrote the HTML, we created some custom utility classes to center elements, and also the separator class which has two different colors, #222 (dark-grey) and #d87843 (orange). To center an element we are going to position it absolutely and use transform property to correctly position it.

The idea here is that it takes the current element’s dimensions and moves it along. For example, translateY(-50%) will move the element upwards by 50% of its height.

In the previous tutorial, we created an element with a separator class to create the line from the design. The styling is very minimal, but the trick here is that we use the :before pseudo element to make it visible. The separator class is just a helper for spacing and text alignment.

Skeleton comes with predefined styles for buttons:

Skeletons buttons

In our design there are another two different types of button, one of which has an outline and another which is rounded for the play button from the video section.

The extra class for making the button outlined is inverted, and has a transparent background and #222 for the color and border. On hover, the background color is #222 and the text color is white. I also added substantial padding to it for spacing and design purposes.

Default Styles for Sections

If you remember, each section has a different class name which we are going to target right now. The whole idea here is that each section should have a background-color or a background-image

In addition to that, the sections with a background-image, to avoid repetition, have another class featured-bg-image which basically sets the background-image position, size and opacity, and creates the background-cover effect that will stretch the image across the container size. 

Each section has 80px padding for top and bottom and 0px for left and right.

Navigation

The navigation comes from a hamburger icon and an unordered list of links. The navigation is fixed, to stay on top of everything while scrolling. It has a width of 320px and a height of 100%. To place the navigation outside the website, we’re using the transform translate property (which we also used to center elements) but this time we translate it 100% of its width, so it will not be visible.

The links inside the navigation have uppercase text, a white color and 100% width. I also removed the text-decoration presented on links and made the font-weight bold.

The hamburger icon has a 30px for font-size and white color, with 20px padding all around. I also added a transition effect for background-color and active state. Something which I’d like to focus more on is the placement of the hamburger icon, because as you can see from the design, it’s placed “outside” the navigation. The quick solution for this is to place it absolute and 100% left. The left: 100% represents the navigation width, so now we can increase the navigation width and the icon will always stay outside of it.

Hero Section

The hero section inherits the same styling as the sections with featured background images, but now we’d like to have a different approach, since there are multiple stylings for it. It is composed from a background-image as background, a background color as a color fill, a gradient overlay and a different height: 500px.

The gradient-overlay effect is created with a pseudo element (:after) made using CSS3 Gradient. I created this effect because it gives us the flexibility to change the image aesthetic without opening up Photoshop.

“Contact us” Section

The “Contact us” section is made from two subsections; one for the left, one for the right side, and has #f2f2f2 as the background color. The left side has a 70px padding all around and a transparent background. The social-links list items are floated, list style none and 10px for margin-right to add a space between items.

The form itself doesn’t have too much style (besides 70px for padding and a background color) since Skeleton has dealt with it for us.

Work Section

Work filters

The Work filter items have “SlimJoe” for the font-family, the text is uppercase, 18px font size and 0.5em for left and right margins to create the space between them. The active state has a different font-family, “BigJohn” to differentiate it from the rest of the items when active.

Work items and work detail

Work items have a fixed height of 360px and 33% for width, giving us a grid with three items per row. The “fake” space between items is made with a border applied to each item.

Work detail is more a caption for each item, stretched across the work item with position absolute, and 0px for left, right, top, and bottom. It also has a background with .75 opacity, creating an overlay effect since it's above the image. By default, the detail container is hidden, and when a work item is hovered, it becomes visible–animated through CSS transitions.

Clients Section

The Clients section is a simple inline list. The only thing worth mentioning here is that I'm using a grayscale CSS filter to desaturate the images. The width for each item is 18% and 2% for right spacing.

“About” Section

The About section, inherits the work section styling, except for the items height, 300px.

The last item of the list has a different styling, because it doesn’t have a hover effect. The background color is white and it has a different border color around.

“Services” section

The images for services are 150px height and bottom margin of 20px. As you can see from the code, the image has a different block display and 100% for max-width. 

Responsiveness

Since we’re using the Skeleton grid system, the website is responsive out of the box, but still there are some styling issues for font sizes, margins, paddings and alignments. 

As you can see from the below code, the button padding is smaller for mobile displays.

For tables, the work items should have 100% width and the people items should be two per row. We also need to reduce the padding for the contact section form and the social links will be 33% width and aligned to the center.

Conclusion

If you take advantage of the Skeleton framework, as you can see from this tutorial, much of the heavy work is done with ease, giving you peace of mind for much of what you’re building. 

True, you do need to apply different font families, font sizes, spacings and, when needed, different button stylings but that’s about it. 

That was it for this lesson, I hope that you enjoyed it, and I'm looking forward to seeing you in the next tutorial where we’ll implement the JavaScript. See you there!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.