Ask HN: What front-end design framework do you use with Rails? | Hacker News Reader

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

6 pointsdave16194 comments

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:

Compass (http://compass-style.org)

Sass http://sass-lang.com

960.gs (http://960.gs)

YUI App Theme (https://github.com/tylerhall/yui-app-theme)

BlueTrip (http://bluetrip.org/)

YUI 2 Grids (http://developer.yahoo.com/yui/grids)

Web App Theme (http://pilu.github.com/web-app-theme)

Less Framework 3 (http://lessframework.com)

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?

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.

Nice. Thanks for the feedback.

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.

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.

Reply on news.ycombinator.com