In this part of our ongoing build process we are going to focus on styling the HTML. This tutorial will have three main sections:
- Adding the images
- Covert fonts to web fonts
- Styling each section
Let’s quickly remind ourselves of what we’ve built so 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 Amble, SlimJoe & 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:
/* Fonts */
/* Generated by Font Squirrel (http://www.fontsquirrel.com) */
/* SlimJoe */
@font-face {
font-family: 'slim_joeregular';
src: url('../fonts/SlimJoe/slim_joe-webfont.eot');
src: url('../fonts/SlimJoe/slim_joe-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/SlimJoe/slim_joe-webfont.woff2') format('woff2'),
url('../fonts/SlimJoe/slim_joe-webfont.woff') format('woff'),
url('../fonts/SlimJoe/slim_joe-webfont.ttf') format('truetype'),
url('../fonts/SlimJoe/slim_joe-webfont.svg#slim_joeregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* BigJohn */
@font-face {
font-family: 'big_johnregular';
src: url('../fonts/BigJohn/big_john-webfont.eot');
src: url('../fonts/BigJohn/big_john-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/BigJohn/big_john-webfont.woff2') format('woff2'),
url('../fonts/BigJohn/big_john-webfont.woff') format('woff'),
url('../fonts/BigJohn/big_john-webfont.ttf') format('truetype'),
url('../fonts/BigJohn/big_john-webfont.svg#big_johnregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* == http://www.fontsquirrel.com/fonts/amble */
/* Amble Regular */
@font-face {
font-family: 'ambleregular';
src: url('../fonts/Amble/Regular/Amble-Regular-webfont.eot');
src: url('../fonts/Amble/Regular/Amble-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Amble/Regular/Amble-Regular-webfont.woff') format('woff'),
url('../fonts/Amble/Regular/Amble-Regular-webfont.ttf') format('truetype'),
url('../fonts/Amble/Regular/Amble-Regular-webfont.svg#ambleregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Amble Bold */
@font-face {
font-family: 'amblebold';
src: url('../fonts/Amble/Bold/Amble-Bold-webfont.eot');
src: url('../fonts/Amble/Bold/Amble-Bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Amble/Bold/Amble-Bold-webfont.woff') format('woff'),
url('../fonts/Amble/Bold/Amble-Bold-webfont.ttf') format('truetype'),
url('../fonts/Amble/Bold/Amble-Bold-webfont.svg#amblebold') format('svg');
font-weight: normal;
font-style: normal;
}
/* Amble Light */
@font-face {
font-family: 'amblelight';
src: url('../fonts/Amble/Light/Amble-Light-webfont.eot');
src: url('../fonts/Amble/Light/Amble-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Amble/Light/Amble-Light-webfont.woff') format('woff'),
url('../fonts/Amble/Light/Amble-Light-webfont.ttf') format('truetype'),
url('../fonts/Amble/Light/Amble-Light-webfont.svg#amblelight') format('svg');
font-weight: normal;
font-style: normal;
}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.
<!-- CSS–––––––––––––––––––––––––––––––––––––––––––––––––– --><link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/skeleton.css"><link rel="stylesheet" href="css/font-awesome.css"><link rel="stylesheet" href="css/style.css">
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:
/* Personal Flavour */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}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.
/* Typography */
body {
font-size: 16px;
letter-spacing: .05em;
color: #222222;
font-family: "amblelight", "Raleway", Helvetica, Arial, sans-serif;
}
h1, h3{
font-family: "big_johnregular", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h4 {
font-size: 22px;
}
h3 {
font-size: 28px;
}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.
.centered {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.vertical-centered {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
}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.
/* Separator */
.separator {
position: relative;
margin-bottom: 1.7em;
padding-bottom: 1.7em;
text-align: center;
font-weight: bold;
text-transform: uppercase;
color: inherit;
}
.separator:before {
content: '';
position: absolute;
top: 100%;
left: 50%;
width: 86px;
height: 2px;
background-color: #222;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.separator.orange:before {
background-color: #d87843;
}Skeleton comes with predefined styles for 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.
/* Button inverted */
.button.inverted {
font-size: inherit;
padding: 25px 70px;
color: white;
height: auto;
border: 3px solid white;
text-transform: none;
font-size: 26px;
font-family: "ambleregular";
}
.button.inverted:hover {
background: white;
color: #222;
}
.button.circle {
padding: 0;
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
border-radius: 50%;
text-align: center;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
}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.
/* =Section general styling
-------- */
section {
text-align: center;
padding: 80px 0;
}
/*
Section with featured background image. Every section which will have this
class will get the effect with a background cover.
*/
.featured-bg-image {
position: relative;
background-color: #222222;
color: white;
min-height: 500px;
}
.featured-bg-image:before {
content: '';
position: absolute;
top: 0; right: 0; left: 0; bottom: 0;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: .35;
}
.help:before {
background: url("../images/help_bg_image.jpg");
}
.creativity:before {
background: url("../images/creativity_bg_image.jpg");
background-position: 50% 0;
}
.quote:before {
background: url("../images/quote_bg_image.jpg");
}
.video-iframe{
position: absolute;
left: 0; top: 0; bottom: 0; right: 0;
height: 100%;
width: 100%;
display: none;
}
.video:before {
background: url("../images/video_bg_image.jpg");
}
.clients {
background-color: #f4f4f4;
}
.footer {
background-color: #222222;
color: white;
}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 transformtranslate 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 20pxpadding 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.
/* =Navigation
-------- */
.navigation {
position: fixed;
top: 0; left: 0; bottom: 0;
height: 100%;
z-index: 3;
width: 320px;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.navigation.active {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}
.navigation ul {
list-style: none;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
background: #222;
}
.navigation ul li {
display: block;
text-align: center;
margin: 0;
padding: 0;
}
.navigation ul li a {
display: block;
height: 100%;
padding: 10px 0;
text-decoration: none;
text-transform: uppercase;
color: white;
font-weight: 900;
}
.navigation ul li a.current,
.navigation ul li a:hover {
color: #222;
background-color: white;
}
.navigation .menu-icon {
color: white;
font-size: 30px;
line-height: 1em;
position: absolute;
left: 100%;
padding: 20px;
-webkit-transition: all .15s ease-in-out;
-moz-transition: all .15s ease-in-out;
-ms-transition: all .15s ease-in-out;
-o-transition: all .15s ease-in-out;
transition: all .15s ease-in-out;
}
.navigation .menu-icon.active {
background-color: rgba(0,0,0, .3);
}
.navigation .menu-icon:hover {
color: #222;
background-color: transparent;
}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.
/* =Hero
-------- */
.hero {
padding: 0;
min-height: 500px;
text-align: center;
position: relative;
background-color: #d56d4d; /* layer fill content */
color: white;
}
.hero-image {
background: url("../images/hero_bg_image.jpg") no-repeat;
background-size: cover;
background-position: 50% 50%;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
opacity: .9;
}
.hero-image:after {
content: '';
opacity: .87; /* layer alpha */
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iaGF0MCIgZ3JhZGllbnRVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIHgxPSIxMDAlIiB5MT0iNTAlIiB4Mj0iLTEuNDIxMDg1NDcxNTIwMmUtMTQlIiB5Mj0iNTAlIj4KPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiNDI0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VmYWI0YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient overlay */
background-image: -moz-linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
background-image: -o-linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
background-image: -webkit-linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
background-image: linear-gradient(right, #bb4242 0%, #efab4a 100%); /* gradient overlay */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
.hero h2 {
font-size: 24px;
}
.hero p {
padding: 0 15%;
}
.hero .separator:before {
background-color: white;
}“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.
/*Contact*/
.contact-us {
background-color: #f2f2f2;
text-align: left;
}
.contact-us-details {
padding: 70px;
}
.contact-us-details h5 {
font-size: 2rem;
}
.contact-us-details .social-links a {
color: #222;
display: block;
}
.contact-us-details .social-links li {
list-style: none;
float: left;
font-size: 24px;
margin-right: 10px;
}
.contact-us-details .social-links li:last-child {
margin-right: 0;
}
.contact-us-form {
padding: 70px;
background-color: #e4e4e4;
}
.contact-us .row {
margin: 0;
}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 Filters */
.work-filters {
list-style: none;
}
.work-filters li {
display: inline-block;
margin: 0 .5em;
font-size: 18px;
text-transform: uppercase;
font-family: "slim_joeregular";
}
.work-filters li a {
color: inherit;
text-decoration: none;
}
.work-filters li.active {
font-family: "big_johnregular"
}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.
/* Work items */
.work-items {
list-style: none;
width: 100%;
display: inline-block;
}
.work-items li {
position: relative;
overflow: hidden;
height: 360px;
/* important because we need to overwrite the default skeleton */
margin: 0!important;
width: 33%;
border: 10px solid white;
position: relative;
}
.work-items li:nth-child(4n) {
margin-left: 0;
}
.work-items li img{
width: auto;
height: 100%;
display: block;
}
/* Work detail */
.work-detail {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
opacity: 0;
background: rgba(0,0,0,.75);
color: white;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.work-detail h3 {
font-size: 16px;
letter-spacing: .05em;
}
.work-detail p {
font-size: 20px;
text-transform: capitalize;
padding-left: 20px;
padding-right: 20px;
}
.work-items li:hover .work-detail{
opacity: 1;
box-shadow: inset 0 0 0 10px #222;
}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.
/* Clients */
.clients {
list-style: none;
}
.clients li {
display: inline-block;
width: 18%;
margin-right: 2%;
}
.clients li:last-child {
margin-right: 0;
}
.clients li img {
max-width: 100%;
height: auto;
display: block;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}“About” Section
The About section, inherits the work section styling, except for the items height, 300px.
/* About */
.people-list {
list-style: none;
margin: 70px 0;
width: 100%;
}
.people-list li {
position: relative;
height: 300px;
overflow: hidden;
}
.people-list li img {
width: auto;
height: 100%;
display: block;
}
.people-list .people-hover {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
background: rgba(0,0,0,.45);
opacity: 0;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.people-list .people-hover a {
position: absolute;
top: 10px;
right: 10px;
color: white;
}
/* About people details */
.people-list .people-detail {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
padding: 0 20px;
z-index: 1;
color: white;
}
.people-list .people-detail h3 {
font-size: 22px;
margin-bottom: 0;
}
.people-list .people-detail p {
font-size: 16px;
}
.people-list li:hover .people-hover{
opacity: 1;
box-shadow: inset 0 0 0 5px #222;
}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.
/* Feature people hiring */
.people-list li.blank-feature{
box-shadow: inset 0 0 0 3px #222;
}
.people-list li.blank-feature img {
visibility: hidden;
}
.people-list li.blank-feature h3 {
font-size: 26px;
}“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.
/* Services */
.services {
list-style: none;
margin: 70px 0;
}
.services .service-image {
height: 150px;
margin-bottom: 20px;
}
.services .service-image img{
display: block;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
.services p {
font-size: 16px;
letter-spacing: 0;
}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.
/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Larger than mobile */
@media (max-width: 400px) {
.button.inverted {
padding: 15px;
}
}
@media (min-width: 400px) and (max-width: 750px) {
.work-items li.isotope-item.columns {
width: 100%;
}
.people-list li.people-list-item.columns {
width: 46%;
margin: 2%;
box-sizing: content-box;
}
.contact-us-details {
padding: 70px 25px;
text-align: center;
}
.contact-us-details .social-links li {
text-align: center;
width: 33%;
margin: 0;
}
.contact-us-details h5 {
font-size: 1.7rem;
}
}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!
