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 aslighten()
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:1 2 3 4 5 6 | |-- css |-- index.html `-- less |-- lesshat.less |-- remixins.less `-- style.less |
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">Also, open Koala app (or whichever form of compiling you prefer) and add our project directory to it.
<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>
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 thefi-marker
class. Add this class in beside the profile-location
class like so:1 2 3 | ... < div class = "profile-location fi-marker" >{{user.city}}, {{user.country}}</ div > ... |
: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 3 | ... < p >< a class = "power-logo fi-social-behance" href = "http://www.behance.net/" title = "Behance" target = "_blank" >Behance</ a ></ p > ... |
Setting up Mixins and Variables
Let's open our style.less, and import both lesshat.less and remixins.less using the(reference)
mark.1 2 | @import (reference) 'lesshat.less' ; @import (reference) 'remixins.less' ; |
(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.
1 2 3 4 5 6 7 8 9 | @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 ; |
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 toborder-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 2 3 | *, *:before, *:after { .box-sizing(border-box); } |
html
font size to 62.5%, which is one approach to making relative units more manageable.1 2 3 | html { font-size : 62.5% ; } |
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
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 2 3 | figure { margin : 0 ; /*overwrite Normalize.css default style*/ } |
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.01 02 03 04 05 06 07 08 09 10 11 | .clearfix { *zoom: 1 ; &:before, &:after { content : " " ; display : table; } &:after { clear : both ; } } |
clearfix
class to some elements.The Body Styles
For thebody
, 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.1 2 3 4 5 6 7 | body { .font-size( 16px ); background-color : @bg-body; color : @color-base; font-family : @font-base; font-weight : 300 ; } |
1 2 3 4 5 6 7 8 | body { font-size : 16px ; font-size : 1.6 rem; 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.01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | .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 ); } } } |
@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.1 2 3 4 5 | .portfolio-header { .padding( 50px , 0 ); background-color : @bg-header; text-align : center ; ... |
.size()
Mixins and made circlular by setting the border-radius to 50%. You can see these styles are declared in .profile-avatar img
.1 2 3 4 | .profile-avatar img { .size( 80px ); border-radius: 50% ; } |
.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.1 2 3 4 5 6 7 | .profile-name { .font-size( 24px ); .margin- bottom ( 10px ); color : @color-name; font-family : @font-name; font-weight : 400 ; } |
.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:''
.01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 | .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 : '' ; } } } |
margin-right
to the :before
pseudo-element.1 2 3 4 5 6 7 8 | .profile-location { .font-size( 14px ); color : lighten(@bg-header, 30% ); &:before { .margin- right ( 10px ); .font-size( 18px ); } } |
Styling the Portfolio Section
The following snippet contains all the styles for our portfolio.01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | .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 : '' ; } } } } |
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.01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | .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% ; } } } |
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 thehead
tag.1 | < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > |
01 02 03 04 05 06 07 08 09 10 11 | @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% ; } } |
No comments:
Post a Comment