Any reason for:

/* Floats last ".bit-" to the right */
[class*='bit-']:last-of-type {
  float: right;
}

?

It seems like left/centering would be better.

Some of us don't use a preprocessor, so it'd be nice to just grab the unminified lemonade.css file when needed.

This may sound silly or too simple but I am confused in calculating the width of a column and its gutter.

Let's say for a 1024, what is the width of the column and its gutter width?

I just used 65px for the column width and 10px for the gutter width. I'll close this issue now.

Currently about to start working on version two, If you have any requests/suggestions please let me know below.

Thanks :)

Thought I'd open this up for discussion.

Idea: get rid of the frames, convert floats to inline-block. That way you don't need the extra divs for rows, and then you just change the "bit-" style to:

[class*='bit-'] {
display:inline-block;
padding: 5px;
margin-right: -.25em;
vertical-align: top;
}

Seems even simpler and works like a champ for me. Is there any reason not to do this?

*lifting this idea from toast, http://daneden.me/toast/

Hey, I really love Lemonade, I use is with https://github.com/LukyVj/EfficaCSS, an tod I would love to see a SASS version of it.

I could maybe create it ?

output:
lemonade.css
lemonade.min.css

hmm?

Hey,

I'm sat here wondering whats next for Lemonade. As it stands it is just a 12 column grid where you can define new columns. Do we need more than that? Do we need an optional stylesheet with a basic reset, styled buttons and typography?

What do you want to see?

Thank you :)

Hello, thanks for making the grid. It looks very good and I'm trying it on a responsive website that I'm making during these days.

I've got a question for you: is it possible to have columns with different sizes on a single row (frame)?

Like this:

[__2x__] [_1x_] [_1x_] [_1x_]

Thanks

Nicholas

Would you mind adding CDN support? 😀

When I try to use two different elements like this

<div class="frame">
  <header class="bit-2">Should be left</header>
  <main class="bit-2">Should be right</main>
</div>

They get switched the other way because the selector [class*='bit-']:last-of-type matches both of them.

example

Have a nice day

It would be really nice if this could be installed (and upgraded) as a Bower package. :)

Thanks in advance!

Here's an example: http://jsbin.com/sabuqowota/2/edit?html,css,output

To fix this issue, you can do something like:

@media (min-width: 50em) and (max-width: 68.75em) {
  .bit-4:nth-child(3n) {
    clear: left;
  }
}

@media (min-width: 30em) and (max-width: 50em) {
  .bit-4:nth-child(3n) {
    clear: left;
  }
}

But this would need to be generalized for all the other media-queries and bits.