Layout items with bottom margin about objects.layout HOT 5 CLOSED

Nice work ;) I tested it on Mac in latest Chrome, Firefox and Safari and on iOS latest Safari.

It seems interesting to me for different type of listing, but I don't know if this feature must be added to the layout module.

from objects.layout.

@florianbouvot yeah, but how do you use .layout now when you have more than one row of layout items? For example, you don't know how many layout items there's gonna be? How do you set (consistent) spacing between layout items then?

With the solution I proposed we control the spacing within layout abstraction/object with $inuit-layout-gutter (for small and large variants too) and don't rely on .layout__item children to get bottom spacing from.

One addition, though, we could probably benefit from:

.layout__item {
    > :last-child {
        margin-bottom: 0;
    }
}

from objects.layout.

@csswizardry any thoughts on this?

from objects.layout.

Hey.

I can’t remember that layout items ever carried a margin-bottom; it doesn’t feel like it’s one of its responsibilities. If it did carry a margin bottom then this feels like a mistake/oversight on my part.

What I would suggest is simply adding that functionality yourself—it should be very simple. In your main.scss:

@import "bower_components/inuit-layout/objects.layout"
.layout__item {
    @extend %margin-bottom;
}

I’m really not sure layout items should carry ‘vertical gutters’.

from objects.layout.

@csswizardry

If it did carry a margin bottom then this feels like a mistake/oversight on my part.

Oh, no, no, it never did (as far as I know) so no mistake on your part ;) It is a feature I personally missed when I learned about first version of csswizardry-grids.

I’m really not sure layout items should carry ‘vertical gutters’.

Yeah, it might be that I (and I lot of guys I work with) have a different view on this. There are number of circumstances where .layout has items that span in multiple rows (gallery, eccomerce, blog posts etc.) and handling their vertical space from one place (layout object) seems logical to me. I am curious how to handle these situations currently?

This is how I see layout/grid with horizontal AND vertical spacing between them (even though in the link items are spaced using child <p> element). With the solution I proposed you could even set different vertical gutter via $inuit-layout-gutter-bottom (which could default to $inuit-layout-gutter or $inuit-base-spacing-unit). But the point is all of these settings are taking place within layout object, not via extending or child elements. There you can set it using variables for small and large layouts as well.

But.. I do not have a problem extending this functionality, just would be happier if it was part of the module itself :)

from objects.layout.