Boban Jovanoski

Haml, Compass, Front-end development BobiYo Feb 19

5 comments Latest by Guido

Tags: haml   scss   sass   compass   staticmatic  

Update

Thanks to Arthur Gunn I've checked out the middleman gem and by my humble opinion it is better than staticmatic, it is sinatra based and the helpers it provides are with the same names as in rails so you'll feel right at home. I still have not played with the frank gem, I'll update this post after I take a closer look at it.

Introduction - Staticmatic

During my recent work, I needed to create only the front-end (html, css, javascript) for an application. As you may guess, I've decided to use haml and compass, but creating a rails app for doing this seamed to me just like killing an alien with Justin Bieber's music.

Implementation

So I thought...there must be an easier way to to this (save the aliens)...so I did some research and discovered Staticmatic (all features are still not well documented).

gem install staticmatic

It's very easy to use. You just need to create your new staticmatic project:

staticmatic setup project_name

Compass and haml are supported, and a default layout is already setup for you to play with. All additional configuration for staticmatic and compass is done inside the config directory. Inside the compass configuration file I've only added

http_images_path = '/images'

because when css files are generated by compass the default directory is set to stylesheets.

If you wish to use other compass plugins like 960gs or whatever simply add the scss, sass files inside the src/stylesheets dir.

So now all you need to do is power up you favorite code editor, than start compass watch and the web server and start coding :)

#on separate consoles
compass watch 
staticmatic preview project_name

When you're done with that, you can generate the html with:

staticmatic build project_name

Explore the documentation how to use the layouts etc.

Things that I missed while using staticmatic

Features that I really missed and by my opinion need to be included are:

  1. Generating sprites for images - with the sprite_css or limonade gems

  2. yield :sidebar

  3. Using other gems :) I just wanted this usability to be implemented in staticmatic rather than hacking around and doing it manually.

Easier way?

I really like using haml and compass for front-end development, if you know a better way for doing this pls comment or email me, I'll be glad to update the post.

5 comments so far

67c0c5d4a82a8b28405d2fe4f581cc65?rating=pg&size=50
Posted by Arthur Gunn at 19 Feb 11

I used to use staticmatic, but have since discovered middleman. I find it to be more sensible and customisable, and is also better maintained. gem i middleman

C2a74139debb7f5f5fe5911841132a05?rating=pg&size=50
Posted by Boban at 20 Feb 11

Thank you for the suggestion, I'll check it out :)

2b3ba3a66b1751fab1670c224dba2d96?rating=pg&size=50
Posted by blahed at 21 Feb 11

I like frank pretty good, but it's probably because I built it. The built in refresh helper makes development pretty amazing. Preparing for a new release sometime in the next month or so. https://github.com/blahed/frank gem install frank

6e0ed765699d27f1302adff76bc18b0e?rating=pg&size=50
Posted by khoan at 01 Apr 11

have you tried serve? https://github.com/jlong/serve It's rack based instead of Sinatra.

17d5bf49472deecfcf5e6ec67f981f66?rating=pg&size=50
Posted by Guido at 22 May 11

I wanted to try out middleman, but I'm stuck. I installed the gem but I can't find mm-init in my path (on ubuntu). My searches were unsuccessful, maybe you have a comment on what went wrong.

Post a comment

or Preview
or Edit