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.
Install the necessary Ruby gems
gem install sass gem install bourbon gem install bitters gem install neat
tup play nice with
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
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.