Pure. A set of small, responsive CSS modules that you can use in every web project.

[Martijn Geerts]

Last week I found a CSS framework called pure. Although there are plenty of good CSS framework out there, but sometimes those frameworks have just to much. Pure on the other hand is a small collection of css files. I like this approach, think I gonna use it in the next project.

Base 1.2KB, Grids 0.9KB, Forms 1.4KB, Buttons 0.8KB, Tables 0.5KB, Menus 1.2KB

Take a look: PURE

[SiNNuT]

http://processwire.com/talk/topic/3740-yahoo-css-library-httppurecssio/

All joking aside, this is a pretty neat resource and the soon to be released version has a more robust grid implementation.

They do say so on the site, but keep in mind aforementioned file sizes are gzipped. Uncompressed it's more like 19 or 20 KB (still small though).

Another one i'm trying out atm is http://cardinalcss.com/

[Macrura]

thanks martin/SiNNuT for posting on pure; i was thinking of trying to build something with this soon:

http://www.getuikit.com/

[Martijn Geerts]

@SiNNuT, didn't seen your post about PURE, sorry.

A big advantage with PURE is that I can choose which box-sizing model I want. The next project will be content-box.

[Manfred62]

Here is another thread where we talked about frameworks.

If size and flexibility matters, PocketGrid could be a good choice? It's only a grid, nothing more. Very minimal and seems to be very flexible. Looks like you can do anything with it (like doing with PW). But haven't tested it.

[diogo]

Don't you guys get tired of so many frameworks?

[SiNNuT]

Don't you guys get tired of so many frameworks?

Sometimes, but for me it's neccessary to build on top of un up to date framework. Because i don't do a lot of sites i don't have the time nor knowledge to come up with my own css. (That beeing said, stuff like Bootstrap seems like overkill i a lot of cases)

[Soma]

I used a similar technic to PocketGrid, now seeing and reading it makes totally sense to me and is what I was looking for. I changed a layout to use ProcketGrid approach within half an hour and it works great and simple. I use it together with Goldilocks approach.

Thanks for mention it Manfred62

[Martijn Geerts]

Took me awhile to understand pocket grid. But instantly get it while looking at the source. 

[Martijn Geerts]

I just wrote a very tiny grid system I call it FontZero.
It's based on inline block and font-size behaviour.

Not net tested in IE, but I think IE 7 and below will fail. ( due inline-block )  IE8 will do I guess.

Others should play nice & Safari has problems with floating numbers for at least 2 years.

Other frameworks have issues with it as well. Please report any issues for IE8+ & any other browser.

Example:

FZ5 is 1/5 of 100%.

FZ9 is 1/9 of 100%.

There's the full range from 1 till 12

You can calculate columns:

Example for class .FZ11

.FZ11-2 + .FZ11-4 + FZ11-5 = full row

2 + 4 + 5 = 11, for .FZ11 we need 11 to make 100%

 

Example: .FZ2

FZ2-1 + FZ2-1 = full row

1 + 1 = 2, so 100%

 

( 1/2 * 100 ) + ( 1/2 * 100 ) = 50 + 50 = 100%

Advantage over most other grids

The code below makes 3 column and 3 rows, no need for row markup,

<ul class='FontZero'>
	<li class='FZ3'><img src='...'></li>
	<li class='FZ3'><img src='...'></li>
	<li class='FZ3'><img src='...'></li>
	<li class='FZ3'><img src='...'></li>
	<li class='FZ3'><img src='...'></li>
	<li class='FZ3'><img src='...'></li>
	<li class='FZ3'><img src='...'></li>
	<li class='FZ3'><img src='...'></li>
	<li class='FZ3'><img src='...'></li>
</ul> 

Edited October 5, 2013 by Martijn Geerts

[arjen]

I used a similar technic to PocketGrid, now seeing and reading it makes totally sense to me and is what I was looking for. I changed a layout to use ProcketGrid approach within half an hour and it works great and simple. I use it together with Goldilocks approach.

Thanks for mention it Manfred62

How is your experience with pocketgrid? Still using it soma?

[Soma]

Very good. Yes using it.

[arjen]

Thanks! I've been using columnal since ages (it feels) and still wrapping my head around susy. Sometimes I just want a simple grid system. 

[diogo]

Everytime I use a grid system, I find myself having too much work fight some inflexibility, but in most part I enjoyed http://neat.bourbon.io/ with best being that I didn't have to do absolutely anything in the markup. Work is 100% done in the stylesheet.

[Martijn Geerts]

I do agree here with Diogo. If I have a small projects a framework is oke. ( don't need to much design )

But if the project is bigger, it all becomes to bloated. I do however steal some things from frameworks.

[arjen]

True & true diogo and martijn. That's why I wanted to use susy. No markup, just a very flexible grid system. Sounds like neat is that too.

[totoff]

the cool thing with pure is, that it is modules. just need the css for a table? pick the according code pieces and forget the rest. no overhead and very convenient.