CODEWITHSUNDEEP
csszurb-foundation
Daniel Ristic
Daniel Ristic

Reputation: 710

Using zurb foundation 4 grid system to design list elements

Foundation 4's grid system, with its mobile first approach is a no brainer when it comes to styling the layout of a page when you already use other foundation elements (whether it is textual content, the general layout of images/content on the page like main content and sidebars).

In the following example page, each grey rectangle is made using grids and nested grids:

enter image description here

I often find myself designing "tabular data" which consists of elements and subelements (like individual grey boxes in the center of the previous image) that look a little bit like this:

enter image description here

Some elements like the controls have to be aligned, and when you click on an element it reveals a dropdown menu with more detailed information about the item.

I often use the grid system for this kind of elements during mockup phase, because it's quick to archieve the alignment and try different widths, but when refining the design, the foundation grid gets in the way with its default behavior when resizing the browser, spacing and it produces a lot of grid specific markup making the html code hard to read and understand.

So my question is: do you use foundation grid for these kind of details in a design, and if not, what's your favorite way to get multiple elements on the same line with different alignments, and having certain elements aligned with each other (simple divs with hardcoded width? display: table? something else?).

I know there is a new CSS3 flexbox module coming to allow this kind of display but it looks more to me like a replacement of the foundation grid system than the way to go when styling this level of details in a design.

Upvotes: 1

Views: 616

Answers (1)

Daniel Ristic
Daniel Ristic

Reputation: 710

It looks like the way to go is to use Foundation grid mixins (like explained at the bottom of the page).

It gives you the best of both worlds: the ease of use of the foundation grid while still being able to fine tune the behavior of the grid (space between columns and so on) that could be different for every elements you style.

Another advantage is that you don't need presentational classes. Instead of writing something like

<div class="row">
    <div class="large-12 columns">
        <div class="myItem">My Item</div>
    </div>
</div>

You can go with

<div class="myItemWrapper">
    <div class="myItem">My Item</div
</div>

While having in your style.css.scss someting like

@import 'foundation_and_overrides';
.myItemWrapper {@include grid-row(nest-collapse);}
.market_label {@include grid-column($columns: 12);}

Upvotes: 1

Related Questions