Simple RoR layout/css/html abstraction

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

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

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)

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:

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