Grid?

[sockdrawermoney]

What are we going to do for layout helpers?

Can we (should we?) use Foundation's grid standalone?

[thefoxis]

I was thinking about it but after doing apps with Foundation and then getting back to them after a while to fix things I think relying on an external framework might be a drag after all. It's "cool" because everything almost seems to work when you just add classes to stuff but I found it really hard to fit to special needs. Sometimes it just.. doesn't work!

I think there are two solutions to this:

• use Foundation's grid or some smaller grid and customize widths when necessary
• don't use a grid at all

I'm now kinda leaning towards the latter because usually our own products / sites are so simple (in a good way!) that I feel like using an external grid would cause more trouble than gain (larger codebase, overwriting styles). I think if it comes to websites it's just deadly easy to make them responsive and for apps using a framework can give you skeleton for main containers but you need to do custom for smaller elements anyway (that's what I've discovered with apps).

So that would be my recommendation but of course we can find something suitable that will be there just in case!

[sockdrawermoney]

I think grids are really useful for prototyping.

I used to be strongly against them, but now I have less time to be perfectionist when building a prototype and I have really come to think they're super handy for at least the first draft of the UI, and very often, for many simple brochure sites or blogs.

I think it would be great if we had a preferred option for grids—option, not a requirement—but then switched them out for handwritten layouts in cases where you think that's best.

[thefoxis]

Ok, let me figure out one more time what options are there, maybe there's something simpler and more lightweight (standalone) than Foundation. Basically specific grid thing :)

[thefoxis]

Foundation seems kinda heavy, what about Pure YUI? Here is the code that would be necessary.

Foundation certainly has more options, such as offsets. But it's also more more code. Their class naming seems more straightforward and semantic.

It just really depends what we want to do, but for easy width manipulation and dropping under certain breakpoint I'd do something small like YUI.

Ah, someone just linked me this too, Griddle – small responsive grid from Nicolas Gallagher.

[sockdrawermoney]

I'm happy with whatever you decide to go with. The thing I like about Foundation is the ability to just do things like:

.pageTitle, .pageContent, .paginationWrap
  +grid-column($columns:6, $offset:3)

.postTitle
  +grid-column($columns:6)

.permalink
  +grid-column($columns:3)

.postContent
  +grid-column($columns:6, $offset:3)

What do you think?

[thefoxis]

Ah. I didn't do much fancy stuff like that with Foundation grid. I guess it's all depending on the use case. With apps.andyet.com I thought it was great at first and then I ended up with many edge cases and bugs to fix, while now when I got rid of it in the new branch and I'm using my own styles, it's so much easier + much less code.

I'd just defer to use case to write our own / use Foundation, Griddle or whatever else. Foundation though is quite huge as a framework so I'd make sure to be using only variables connected to the grid itself and its' files :)

[sockdrawermoney]

Basically, I'd love for us to have the ability to somehow do stupidly simple layout for prototyping which could later be replaced pretty easily and quickly.

For some things, it's just easy and awesome to be able to throw something together and have it just work for desktop and mobile without having to mess around. I laid out and designed adambrault.com in 5 minutes using Foundation—that's what the example above is from.

That said, I am completely in agreement that we should avoid using Foundation for final versions of interface code because long-term it adds unnecessary complexity.

Maybe we could have a standard grid we use for prototyping only, but require things to get written custom before they're officially production quality?

[sockdrawermoney]

I'm going to suggest we simply have a preferred grid toolkit described in our HTML & CSS styleguides keep that separate from this—ideally one written in stylus.

I used to use an early version of http://susy.oddbird.net for some stuff in Sass many years ago.

https://github.com/ericf/rework-pure-grids looks interesting, too.

[lukekarrys]

@karolina I agree with @adambrault. If this was in the CSS styleguide I think that would be very helpful.

[thefoxis]

Okay, I looked into several grids once more:

• Foundation — it's quite big, and has a lot of issues reported on the grid itself
• Susy — lots of math we don't need
• Others — don't seem minimal

I think what I'll do now is grabbing Griddle and converting it to Stylus (fixing stuff in the meantime). Necolas wants to hand over maintaining it, I don't think anyone would accept a PR to the main repo.

We just need a way to generate a grid, calculate widths, center columns, set offsets and have drops on mobile. That's not that hard. So.. on it!

[thefoxis]

Urgh, I just realized that Safari has a weird bug that basically breaks Griddle. Searching for the easiest / smaller solution now :)