fss and css layout question
Jacob Farber
jacob.farber.work at gmail.com
Tue Feb 17 17:44:53 UTC 2009
If your looking for 7 containers, then I would use the technique you
mentioned in #2, and overwrite the width to 135px instead of keeping the
150/100 px width.Jacob
On Tue, Feb 17, 2009 at 10:39 AM, Laurel A. Williams <
laurel.williams at utoronto.ca> wrote:
> 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
>
>
--
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/eee3029c/attachment.html>
More information about the fluid-work
mailing list