Archive | October, 2011

Organizing Stylesheets in a Rails Project

12 Oct

Clean up, clean up.

In the spirit of getting stuff done, CSS often takes a back seat when you’re building a new Rails application – and you can quickly end up with a messy CSS code base. At Chloe + Isabel, our technical debt has accumulated to the point where it’s time to roll up the sleeves and perform some CSS surgery.

Let’s start with the file structure. In Rails fashion, I wanted to create a convention that our development team can use that is familiar, flexible and has a minimal learning curve. So I tried to mimic Rails conventions as much as possible.

File Structure:

  • app/stylesheets
    • production.sass (this is the only file included by the layout, like a Rack endpoint)
    • base_styles/ (these are the building blocks of your application, like ActionController)
      • reset.sass
      • colors.sass
      • forms.sass
      • errors.sass
      • products.sass
      • sidebar.sass
    • application.sass (acts like application_controller.rb)
    • mixins/ (styles that keep your code DRY. kind of like ActiveSupport)
      • round_corners.sass
      • utils.sass (clearfix and similar site-wide utilities)
    • views/ (follows the Rails app/ directory structure)
      • frontend.sass
      • backend.sass
      • controller.sass
      • controller/
        • action.sass

Add class attributes to <body> that map to controllers and actions.

We can manage controller and action specific CSS by adding class attributes to the <body> tag.
<body class=”#{params[:controller].paramaterize}
#{params[:controller].paramaterize}-#{params[:action].paramaterize}”>

In the example below, the cart action in the OrdersController overrides the default product text color.

The body tag in our layout will look like:

<body class=”orders orders-cart”>

base_styles/products.sass (This is the base product style across the application.)


.products (base style)
  color: red

views/orders.sass You can override styles by controller.

.orders (controller)
  .products (base style)
    color: purple

views/orders/cart.sass You can override styles by action.

.orders (controller)
   .orders-cart (action)
     .products (base style)
       color: green

Just the beginning…

Finding the right structure that works for our team will be an ongoing process, so here are a few topics I plan to elaborate on:

  • Using base styles vs. application.sass
  • Naming color variables
  • Pattern libraries
  • and other issues we run into…

References:

  1. http://css-tricks.com/265-id-your-body-for-greater-css-control-and-specificity/
  2. http://jgn.heroku.com/2010/03/11/front-end-code-organization-for-your-complex-apps/
  3. http://codefastdieyoung.com/2011/03/css-js-organization-best-practice/

Product “Can Has” Personality and Innovation

2 Oct

I came across a great post on Hacker News today by Jason Shen, How to Give Your Product Personality, a response to a great post on Fred Wilson’s blog Minimum Viable Personality. Shen’s post gives a lot of great specific examples of personality in product.

Fred Wilson’s post features Grimlock, a fictitious online character with caveman grammar, who influenced the title of this post. According to Grimlock, the main steps to establishing a personality, or “HOW NOT BE BORING”, are as follows:

1. HOW YOU CHANGE CUSTOMER’S LIFE?

The way I see it, there are two ways in which you can change a customer’s life:

  1. React to a customer’s needs to give them the best possible experience. This is competition, in the sense that you are competing with other companies who provide a similar product or service.
  2. Give a customer an entirely new experience that never existed before. This is innovation.

2. WHAT YOU STAND FOR?

The core of what you stand for are your values and Zappos Core Values provides a great example. If your company does not have values: create a spreadsheet, ask everyone to add what they think are company values to it and take a vote.

3. WHO OR WHAT YOU HATE?

If you are focusing on competition, it makes sense to identify an enemy. However, if you are focused on innovation there should be no competition, at least NOT YET, for the product or service that you are creating.

Grimlock does actually touch on innovation, whether he realizes it or not, when he writes:

NO BE CHICKEN

CHICKEN LIVE IN CAGE. NO CAN HAVE PERSONALITY INSIDE CAGE.

LAST STEP IS SMASH CAGE, LIGHT BARN ON FIRE.

DO THAT, YOU WIN.

If every other chicken is inside the cage and you focus on competing with other chickens, you may never break out of your cage. If you smash the cage and burn down the barn, you’ve changed the world of all the other chickens, you’ve innovated.