

Ask HN: What front-end design framework do you use with Rails?  - dave1619

I'm wondering how to make Rails development easier on the front-end design side.  Our team is strong on Rails and the back-end, but we're weak with the front end (don't know much css, javascript, ajax, etc.).  We've got a social web app that we're prototyping and we need some tools to help us build the front-end.  I've looked on HN and found some people who've suggested:<p>Compass (http://compass-style.org)<p>Sass http://sass-lang.com<p>960.gs (http://960.gs)<p>YUI App Theme (https://github.com/tylerhall/yui-app-theme)<p>BlueTrip (http://bluetrip.org/)<p>YUI 2 Grids (http://developer.yahoo.com/yui/grids)<p>Web App Theme (http://pilu.github.com/web-app-theme)<p>Less Framework 3 (http://lessframework.com)<p>There seems to be so many things out there, but I don't want to waste our team's time by trying to learn everything.  I want something that's simple, easy-to-learn, solid and will help us build the front-end of a Rails social app fast.  Any suggestions?
======
bdclimber14
You're comparing some apples and oranges here (maybe even a banana?)

Sass is a language, where as the others are frameworks. Compass is a SASS (and
SCSS) engine that provides SASS-based frameworks such as Blueprint, which I
noticed you didn't mention.

To answer your question though, I swear by Compass+SASS+Blueprint+HAML. SASS
=> CSS, HAML => ERM/HTML, Blueprint is the framework, and Compass ties them
together.

The biggest reason in using Compass+Blueprint is semantic layout selectors,
with mixins to define Blueprint grid widths.

Instead of <div class="span-16"> you can use .left-column, and then add a SASS
mixin to tell left-column how many columns to use. This takes the content from
presentation methodology a step further, which the grid system has always
violated somewhat.

~~~
anthonycerra
The product demo for Compass is one of the best I've ever seen. I'll have to
give it a whirl.

 _"Compass and SASS won't make you a better CSS ninja if you're still hitting
yourself in the face with your curly bracket nunchucks"_

Awesome.

------
bitsm
I love Haml/Sass/Compass for HTML and CSS. It is tightly integrated with Rails
and saves much time. (I never want to write HTML tags again!)

I disagree on the use of presentational/semantic styles, however. These are
not that useful once your design is stable, but the beauty of Sass is that you
can use them early, then move your grids into specific selectors later for
cleaner, better organized code. You can do both!

Compass is awesome for color palettes, too. It includes several cool functions
for adjusting colors.

JavaScript is a completely different story. You should really dig into books,
etc., and build a solid understanding of how JS works before adopting any
library like jQuery. It will save you a lot of hassle building and maintaining
your code. D. Crockford's JavaScript: The Good Parts is a common
recommendation. jQuery Fundamentals is a free HTML book that provides a good
start if your going the jQuery direction.

