fss and css layout question

[Jacob Farber]

The most critical mechanism in the fss files for laying something out is
just to use one of the many "fl-container..." or "fl-col..." class names, so
that we can easily linearize it. It's not as critical how you use them, just
that you do. That being said.....

Occam's razor is king when it comes to laying out css + markup. It is very
important to map out the simplest solution to avoid big cross-browser
headaches, bloat, css errors, and performance.

Truth is, the example above looks incomplete and the two techniques do
different things (#1 is 7 containers, #2 is 5 containers.). If your looking
for the difference between columns and containers, then the answer lies in
what your laying out and how it should behave. Columns are great for
flexible consistent width containers. Containers are more general purpose.
Many times, the two are interchangeable.

In this example, if you just want to lay things out side by side of
alternating widths, then you have to go with technique #2 since columns are
even and this doesn't look like that's what you want.

Sometimes it's good to have a strong idea of how the grid for a site should
behave: This article on grids might
help<http://www.markboulton.co.uk/articles/detail/five_simple_steps_to_designing_grid_systems/>


I hope that sheds some light!
Jacob





On Tue, Feb 17, 2009 at 9:08 AM, Anastasia Cheetham <a.cheetham at utoronto.ca>
wrote:
>
> On 13-Feb-09, at 1:52 PM, Laurel A. Williams wrote:
>
>> I thought it might be useful to post this question so that others can
>> benefit from the discussion.
>
> Just a "me too" for this question - I'd love to know the answer, as
well...
>
>> There are a lot of different ways to put stuff  side by side with css and
>> the fss. ..I was wondering if you have time to comment on the techniques
>> below - advantages/disadvantages? Other techniques that might work better
>> using the fss or without the fss?
>>
>> Technique #1:
>> <div class="fl-container-flex">
>> <div class="fl-col fl-container-500 fl-col-flex4">
>> <div class="fl-col"> </div>
>> <div class="fl-col"> </div>
>> <div class="fl-col"> </div>
>> <div class="fl-col"> </div>
>> </div>
>> <div class="fl-col fl-container-450 fl-col-flex3">
>> <div class="fl-col"> </div>
>> <div class="fl-col"> </div>
>> <div class="fl-col"> </div>
>> </div>
>> </div>
>>
>> Technique #2:
>> <div class="fl-container-100 fl-force-left"> </div>
>> <div class="fl-container-150 fl-force-left"> </div>
>> <div class="fl-container-100 fl-force-left"> </div>
>> <div class="fl-container-150 fl-force-left"> </div>
>> <div class="fl-container-100 fl-force-left"> </div>
>
> --
> Anastasia Cheetham                   a.cheetham at utoronto.ca
> Software Designer, Fluid Project    http://fluidproject.org
> Adaptive Technology Resource Centre / University of Toronto
>
> _______________________________________________________
> fluid-work mailing list - fluid-work at fluidproject.org
> To unsubscribe, change settings or access archives,
> see http://fluidproject.org/mailman/listinfo/fluid-work
>



-- 
Jacob Farber
University of Toronto - ATRC
Tel: (416) 946-3002
www.fluidproject.org
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20090217/e67b8b79/attachment.html>