I started structuring my projects to get the power and productivity benefits of tools such as Bower, which help you install and manage the static assets libraries for a web project in an automatic and centralized way.

This article provides a short howto in the context of a static site powered by Jekyll, but the general ideas are applicable to any web project. We will install the Materialize CSS library and the Icono icon set for use in the site.

Assets sources organization

First, some decisions need to be made related to the organization of the project structure. I added a separate directory at the root of the project where the sources of assets (CSS and JS files) would be installed and maintained. That folder is called _assets/, which helps if you are using Jekyll, to ensure that it is excluded from the site build process.

Using Bower to install the assets libraries

As a prerequisite, install Bower globally using npm install -g bower. Then initialize the assets folder in order to easily install your project's dependencies later using the --save feature.

    $ cd <myproject>/_assets
    $ bower init

You'll have to answer a few questions to provide package metadata information such as name, description, name of the main file, and whether or not the project is private. Based on that, a bower.json file is generated inside the folder, with something like this:

{
  "name": "example-assets",
  "version": "1.0.0",
  "homepage": "",
  "authors": [
    "Kamon Ayeva <kamon.ayeva@gmail.com>"
  ],
  "description": "Assets for example site managed using Bower",
  "license": "MIT",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

Next, you can install the latest version of Materialize:

    $ cd <myproject>/_assets
    $ bower install --save materialize

You get an output similar to:

bower not-cached    git://github.com/Dogfalo/materialize.git#0.95.3
bower resolve       git://github.com/Dogfalo/materialize.git#0.95.3
bower download      https://github.com/Dogfalo/materialize/archive/v0.95.3.tar.gz
bower progress      materialize#0.95.3 received 5.1MB
...
bower extract       materialize#0.95.3 archive.tar.gz
bower resolved      git://github.com/Dogfalo/materialize.git#0.95.3
bower cached        git://github.com/jquery/jquery.git#2.1.3
bower validate      2.1.3 against git://github.com/jquery/jquery.git#>=2.1.1
bower install       materialize#0.95.3
bower install       jquery#2.1.3

materialize#0.95.3 bower_components/materialize
└── jquery#2.1.3

jquery#2.1.3 bower_components/jquery

As a result, there is now a bower_components subfolder containing all the installed sources. In addition, if you check the bower.json file, you will see that a dependencies specification entry has been added to it:

  "dependencies": {
    "materialize": "~0.96.1"
  },

Install Icono the same way, using bower install --save icono. In the bower.json file, we now have something like:

  "dependencies": {
    "materialize": "~0.96.1",
    "icono": "~1.3.0"
  },

Using Sass to integrate all the stylesheets

To get all the required CSS sources and agregate them in a single CSS file, while allowing for adding our customization code, we use Sass and its import feature.

The idea is simple: We add a main.scss file at the right place, for example under the css/ folder that is part of Jekyll's default organization. Actually, it may already be there, but let's pretend you are making your own choices and organizing things yourself. You will add the following code to the file to import the required SCSS parts that we just installed.

---
# Only the main Sass file needs front matter (the dashes are enough)
---
@charset "UTF-8";

@import "bower_components/materialize/sass/materialize";
@import "bower_components/icono/sass/icono";

Since Jekyll has built-in support for Sass, it will convert the css/main.scss file to a css/main.css file when you run the build command, which is the file you need in the generated HTML for the site. That's the reason for the special YAML front matter, before the actual code.

But there is one last thing needed for things to work.

Jekyll cannot find these assets .scss files because it has a defined path it uses to find the Sass files provided for a project. That Sass lookup path or directory can be controled with the Jekyll configuration variable sass_dir and defaults to _sass. So what we do is edit the project's config.yml file, and set that variable accordingly:

# Sass settings
sass:
    sass_dir: _assets

After you fire the internal server with jekyll serve, you should see the changes appear on the site's frontpage. Alternatively, with jekyll build, you will see the resulting main.css file generated under _site/css/.

Of course, check your layout files such as _layouts/default.html and _includes/head.html to make sure that the head part of the HTML links to that CSS file, for example with the following snippet:

<link rel="stylesheet" 
      href="{{ 'css/main.css' | prepend: site.baseurl }}" 
      media="screen,projection" >

Note that you can integrate your own code for customizing the visual theme or the CSS libraries that you have installed. For the example illustrated here, I have added a styles.scss file to the assets folder, containing Materialize customization code such as:

.icon-block {
  padding: 0 15px;
}

And to include it to the global stylesheet, I just had to add this line to the css/main.scss file:

@import "styles";

That's it folks! But there are more front-end tools to improve our results. In the next article, I will feature Gulp.