fss and css layout question
Laurel A. Williams
laurel.williams at utoronto.ca
Tue Feb 17 15:39:09 UTC 2009
Hi Jacob,
Actually, the original examples (sent Friday) both did have 7 columns.
What I really wanted was 7 columns of approximately equal widths in a
950px wide container.
Since the flex columns only go up to 5 in the fss, I tried a grouping of
4 columns and a grouping of 3 columns - as per your suggestion. You can
see an example of this at:
http://fluidproject.org/dev/index.php/partners in the Fluid Academic
partner institutions section.
I used the second style on:
http://fluidproject.org/dev/index.php/collaborate to position the images
and text at the bottom of the page. I used 100 and 150 width containers
alternately because 100 was way too small (700 total width ended up too
narrow) and 150 was too big (total would have been 1050px - larger than
950px container).
So - would the more simple technique be to write my own fss classes for
7 columns?
Laurel
Jacob Farber wrote:
> 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
>
>
>
>
> --
> Jacob Farber
> University of Toronto - ATRC
> Tel: (416) 946-3002
> www.fluidproject.org <http://www.fluidproject.org>
>
--
Laurel A. Williams
Adaptive Technology Resource Centre
University of Toronto