Jump to content

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


Recommended Posts

Posted

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

  • Like 2
Posted

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

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/

  • Like 3
Posted

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.

  • Like 6
Posted

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

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)

Posted

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

  • 2 weeks later...
Posted (edited)

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 by Martijn Geerts
  • Like 2
  • 3 months later...
Posted

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?

Posted

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. 

Posted

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.

  • Like 1
Posted

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.

Posted

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.

  • Like 1
Posted

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.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...