Using Lapis with Bourbon (Refills) and Font Awesome

Author
Michael
Published
2015, Feb 04, 11:49 pm
Category
Coding
Tags
CSS, Lapis, Sass

The Lapis web framework is amazing, but we likely want some kind of CSS library as well. Writing CSS from scratch is miserable, even with Sass. That's why we use something like Bourbon and Refills

Spend less time worrying about browser compatibility nonsense, and more time actually designing awesome websites. Straight to the good stuff.

This is also why you should use Font Awesome. The symbol set of 500+ icons is epic, and it just works, brilliantly.


For your website to be fully awesome, some good CSS groundwork is critical. You're likely familiar with a styling framework, like Bootstrap or Foundation. You can certainly use those with Lapis, but if you prefer something simpler and more customizable, Bourbon (and Refills) is a great option.

Bourbon is billed as 'a simple and lightweight mixin library for Sass.' Which is styling speak for make your CSS much more robust with minimal effort on your part. Refills are components built using Bourbon that can easily be adopted or adapted for your needs.

Before we can use Bourbon, as of now we must unfortunately resign ourselves to using sass in lieu of sassc to compile our .scss files. If we're using Tup, we have several steps to complete.

  1. Install Ruby
  2. Install the necessary Ruby gems

    gem install sass
    gem install bourbon
    gem install bitters
    gem install neat
    
  3. Make tup play nice with sass

This last step is the challenging one. Tup doesn't like unexpectedly generated directories, which is unfortunate in light of Sass generating a series of directories in a .sass-cache folder. The two potential solutions I've found, are to set the sass cache location outside of the project directory, or to tell sass not to produce a cache. Here are the Tupfile lines which implement those solutions, respectively:

: foreach *.scss |> sass --cache-location /path/to/elsewhere %f %o |> %B.css | %O.css.map
: foreach *.scss |> sass --no-cache %f %o |> %B.css | %O.css.map

Of course Tup doesn't like unexpectedly generated files either, like the .map files sass generates. Here however Tup accepts the solution I use above, telling it an extra file will appear with the %O flag.

With that out of the way, let's talk about CSS in Lapis projects. If you've read the Getting Started section of the documentation you already know about the static folder. This is where CSS should go.

To make sure we're using Bourbon we now need to things. The first is to navigate to your static folder (or alternative CSS folder) and generate the necessary files by running:

bourbon install
neat install
bitters install

The second is to open our main scss file and include the newly created CSS as follow:

@import "bourbon/bourbon";
@import "base/base";
@import "neat/neat";

To include this CSS we use the Layout Widget. For example:

class Layout extends Widget
   content: =>
      html_5 ->
         head ->
            link rel: "stylesheet", href: "//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"
            link rel: "stylesheet", href: "/static/main.css"

That's pretty much all you need to use Bourbon and Font Awesome.

Speaking of Font Awesome, it truly is awesome. This is how easy it is to use:

i class: "fa fa-times-circle"

Now you have a circle with an X in it, which is just one of over 500 great symbols.

Using Bourbon is a bit more challenging, and a bit of a change coming from the likes of Bootstrap, but at least Refills should help, and the documentation is good too.



Comments


Add a comment