Design with CSS Preprocessors - Instant Zurb Foundation 4: Get up and running in an instant with Zurb Foundation 4 Framework (2013)

Instant Zurb Foundation 4: Get up and running in an instant with Zurb Foundation 4 Framework (2013)

5. Design with CSS Preprocessors

Although you can design a site from scratch with CSS, for this example we have started from one of the best known frameworks, Bootstrap which as its name suggests, is for starting quickly, having a grid layout (columns) and some predefined elements with a pleasant style.

Aside from using Bootstrap, you can add style to elements of your website with CSS, or use a preprocessor such as LESS, Sass or Stylus which make design easier, using variables, functions, etc. In our case we are going to use Stylus, which uses a syntax very similar to Python, based on tabs; it does not use keys {...}, or :, or ;.

Stylus works with Node.js. To make it run we must globally install it on our computer with npm:

$ npm install -g stylus

We are going to save the .styl files in app/stylesheets, and the Gulp task that we configured in chapter 2 will compile them directly to CSS and we will see the changes reflected in the browser in real-time.

5.1 FontAwesome

Font Awesome is a CSS library of font icons, ideal for use in all kinds of resolutions, since the font files are vectors and don’t pixelate. To use it in our application we can install it via Bower.

$ bower install --save fontawesome

And from now on when we want to use an icon in our HTML we only need to add the following class to a <span> element.

<span class="fa fa-iconName"></span>

For this example we have used several in the template app/views/post-detail.tpl.html such as:

<span class="fa fa-mail"></span> {{ postdetail.user[0].email }}

to display an icon of an envelope that represents email, or:

<span class="fa fa-comments"></span>

to display speech bubbles to represent comments, or finally:

<span class="fa fa-user"></span>

to represent a user icon.

There is a complete list of all the icons that you can use in their documentation which is very comprehensive and easy to use.

5.2 Typographic Fonts

The browser includes a series of fonts by default, but we can use others just by including them in the CSS, such as Google Web Fonts. In my case I chose the Raleway typeface to use in this example.

To do this we create a fonts.styl file where we add the following code:

@font-face
font-family 'Raleway-Light'
font-style normal
font-weight 300
src local('Raleway Light'), local('Raleway-Light'), url('//themes.googleusercontent.com/static/fonts/raleway/v7/-_Ctzj9b56b8RgXW8FArib3hpw3pgy2gAi-Ip7WPMi0.woff') format('woff');

@font-face
font-family 'Raleway'
font-style normal
font-weight 400
src local('Raleway'), url('//themes.googleusercontent.com/static/fonts/raleway/v7/cIFypx4yrWPDz3zOxk7hIQLUuEpTyoUstqEm5AMlJo4.woff') format('woff');

5.3 Application Styles

In order to link this file with the main file we use @import. We add it in main.styl which is the file we use to tell to Gulp to process and generate the css files. To use it, we assign it the to the attribute font-family of the body, like this:

@import 'fonts'
body
font-family 'Raleway-Light'
font-size 16px

Now our application will have a different font style. We are going to edit the style of the lists of posts a bit:

.blog-post-list
list-style-type none

.blog-post-link
font-family 'Raleway'
margin .5em 0 1em 0
padding 0 0 .25em 0
border-bottom 1px solid b_silver

And now the title of the post in the detail view:

.blog-post
.blog-post-header
h1
font-family 'Raleway'

And the comments:

.comments

.comments-list
list-style-type none

.comment-item
border 1px solid b_silver
border-radius 5px
padding .5em
margin .5em

.comment-author
font-family 'Raleway'
font-weight bold

.comment-body
font-style italic

If we look closely, we indicated that the border color of the comment box be b_silver, and that color doesn’t exist in standard HTML/CSS. We are going to add it as a variable in Stylus so that we can reuse it later if we want:

b_silver = #ddd

The finished main.styl file would be like this:

@import 'fonts'

b_silver = #ddd

body
font-family 'Raleway-Light'
font-size 16px

.blog-post-list
list-style-type none

.blog-post-link
font-family 'Raleway'
margin .5em 0 1em 0
padding 0 0 .25em 0
border-bottom 1px solid b_silver

.blog-post

.blog-post-header
h1
font-family 'Raleway'

.comments

.comments-list
list-style-type none

.comment-item
border 1px solid b_silver
border-radius 5px
padding .5em
margin .5em

.comment-author
font-family 'Raleway'
font-weight bold

.comment-body
font-style italic

And this is what our app would look like, if we run Gulp in the terminal and open the browser to the URL http://localhost:8080:

Post List

Post Detail

Create a new post