Simple RoR layout/css/html abstraction

rubyonrails-talk
1

Hello all,

  I came from Java/C++ backend /server development and now is trying to go into more web-app mind. I have been playing with RoR for a moment, and really love it.

The biggest hurdle for me is, that as a non-designer, how do I create clean looking web pages with some basic layouts. I have found that I spent more time on debugging CSS and HTML rather than working on the actual app. I know CSS is very powerful and flexible, but all I need is just a create a simple web-app with some basic layouts.

  Is there any thing in RoR (plug-ins, or etc) that will simplify the layout problem abstracting much of the HTML/CSS conundrum?

  Happy New Year.

Thanks JK

2

Make sure you take a look at the layout functions, they're a good help.

3

I use activescaffold. It handles all the AJAX and CSS, as well as nesting. Using it for both admin and users functions. Add a little role requrement, and your halfway there.

mentalpagingspace.blogspot.com has some of my comments. (My Blog)

4

JK Sieber said the following on 29/12/07 03:52 AM:

  Is there any thing in RoR (plug-ins, or etc) that will simplify the layout problem abstracting much of the HTML/CSS conundrum?

Once you get past the basics (working though the example in AWDWR is a good start, as well as various screencasts that are available), you can look at "Modular Page Assembly with Rails".

Unless/until you understand the basics of templates and partials, that paper won't make sense. When you do it ill produce, as it seems to for many people, a "wow!" reaction. You may or may not like it, but ..

So somewhere along the line you can have a partial that looks something like

  <%= content_for(:head) do %>      <%# Comment: the css that this needs %>      <%= stylesheet_link_tag "leftsidebar" %>   <% end %>   <%= content_for(:leftsidebar) do %>     <% render (                 :partial => controller_action_name + "_left",                 :locals => { :menu => @menu_left,                                :adverts => @adverts                             }               ) rescue nil %>   <% end %>

That way you can have a sidebar that is slightly different for 'list', 'view' and 'edit'. For example, you might want 'edit' not to have the menu and other panels that could take the user away from editing without doing either 'save' or 'cancel' (which might matter if the record was locked) and insert a "help" listing instead.

Why the CSS? Well, it helps in development even if it does cost in browser performance :-/ One way it is useful, though: If you are doing table-less CSS driven multi-column you'll have lines like

#contain {    padding-left: 200px; padding-right: 190px; overflow: hidden; }

This creates 'gaps" so that the left and right 'panels' can be shifted in there:

#left {    width: 180px; padding: 0 10px; right: 240px; margin-left: -100%; } * html #left { left: 150px; }

But what if the left panel says "Poof!" - there is no left panel, we're in edit mode and we want a full screen (see above for reasons).

Well, you could specify that 'edit' uses a different layout, but then you'd have the problem of keeping the look and feel consistent, which is the common problem. So we get back to templates and modular assembly. Why have different templates for each action rather than different partials for each action?

Go toss a coin. YMMV.

But a left panel specific CSS could alter the "content" to make a space for itself. Heck, that way not only could different actions have different sidebar content, they could have different sidebar size and colour and ... Hmm. Mouseover to pop-up ..?

The imagination boggles. My imagination has just run ahead of my skill.

Oh, and take a look at TabNav, part of the widget toolkit from SeeSaw. http://www.seesaw.it/en/toolbox Great stuff, and it uses the "content_for" in ways you can learn from. And CS, but I've yet to master that part of it :frowning:

5

I came from Java/C++ backend /server development and now is trying to go into more web-app mind. I have been playing with RoR for a moment, and really love it.

Same here.

The biggest hurdle for me is, that as a non-designer, how do I create clean looking web pages with some basic layouts. I have found that I

spent more time on debugging CSS and HTML rather than working on the actual app. I know CSS is very powerful and flexible, but all I need is just a create a simple web-app with some basic layouts.

Is there any thing in RoR (plug-ins, or etc) that will simplify the

layout problem abstracting much of the HTML/CSS conundrum?

As others mentioned, activescaffold and streamlined can help with automatic generation of views.

If you would rather start from an HTML prototype then take a look at MasterView, it allows you to take your HTML prototype pages and by adding some special attributes (directives) to turn it into live ERB with layouts, partials, and form helpers. The HTML can then be edited throughout the project and ERB will be updated as well. The directive syntax mirrors that of Rails helpers and ERB constructs. MasterView also has a basic generator to get you something to start with if you don’t have an HTML prototype. The project is open source and available on Rubyforge, the main site for the project is at http://masterview.org/

There are some screencasts showing how to go from HTML prototype to live app and few showing the approach using the generator.

I’d be happy to answer any questions that you have on MasterView, just email me direct or post to our masterview-users mailing list.

Have a happy new year!!

Jeff