Pills: A simple responsive CSS grid for humans • Hacker News Board

Re: Pills: A simple responsive CSS grid for humans

#11

Post by fimdomeio » Thu, Jun 02, 2016, 9:50 AM UTC

a css grid for humans... First thought flexbox for distributing people waiting for the subway.

On a more serious tought... the great thing about bootstrap whille I admit is sometimes a bit messy is the fact that you can use different sizes for different breakpoints which is something this method apparently does not allow.

Re: Pills: A simple responsive CSS grid for humans

#12

Post by drinchev » Thu, Jun 02, 2016, 9:53 AM UTC

Really nice, though these days flexbox should kill libraries for that. Also I hate when you have fixed break points. Sometimes you need elements to be visible hidden on different screen width and frameworks like this limit the ability to change the breakpoints.

Take as an example the smashing magazine [1] and count the breakpoints there

[1] : https://www.smashingmagazine.com

Re: Pills: A simple responsive CSS grid for humans

#13

Post by colourgarden » Thu, Jun 02, 2016, 9:56 AM UTC

Whilst 'three' is better than 'col-3', it's still based on a 12-column way of thinking. Try Avalanche (https://github.com/colourgarden/avalanche) for a grid system based on percentages or fractions (you choose)

Re: Pills: A simple responsive CSS grid for humans

#14

Post by rohitkrai03 » Thu, Jun 02, 2016, 9:58 AM UTC

colourgarden wrote: post #13

Whilst 'three' is better than 'col-3', it's still based on a 12-column way of thinking. Try Avalanche ( https://github.com/colourgarden/avalanche ) for a grid system based on percentages or fractions (you choose)

Pills also has support for fractions along with normal four columns like namespace.

Re: Pills: A simple responsive CSS grid for humans

#15

Post by lucianmarin » Thu, Jun 02, 2016, 10:01 AM UTC

Why not go gridless? https://github.com/lucianmarin/gridless

Re: Pills: A simple responsive CSS grid for humans

#16

Post by XCSme » Thu, Jun 02, 2016, 10:08 AM UTC

Well, usually grid systems are used for responsiveness and the ability to have a specific design for individual screen sizes. As far as I read through the docs, unlike bootstrap, this library does not allow to target specific screen sizes like xs,md,lg, etc...

Just pointing this out :D

Re: Pills: A simple responsive CSS grid for humans

#17

Post by mpetrovich » Thu, Jun 02, 2016, 10:26 AM UTC

At NextBigSound.com, we've found that a nestable fractional-based grid is generally easier, faster, and more flexible to work with than traditional N-column grids:

Re: Pills: A simple responsive CSS grid for humans

#18

Post by staticelf » Thu, Jun 02, 2016, 10:26 AM UTC

I've found https://milligram.github.io/ very nice. Sure, it's a bit more than a grid system (it uses flexbox) but it's very nice and doesn't take up much bandwidth.

Re: Pills: A simple responsive CSS grid for humans

#19

Post by franciscop » Thu, Jun 02, 2016, 10:33 AM UTC

I created one grid system exactly like this [1] a couple of years ago as part of Picnic CSS [2].

However it was limiting in several factors, so I rewrote it from scratch as a flexbox solution, called it Flexpoint [3] and I love it. Now I need to integrate it back into Picnic.

For instance, can you change elements order? How do you account for an undetermined number of elements (same size, full width total)?

[1] http://web.archive.org/web/20150713011953/http://www.picnics...

[2] http://picnicss.com/

[3] http://francisco.io/flexpoint/

Re: Pills: A simple responsive CSS grid for humans

#20

Post by rohitkrai03 » Thu, Jun 02, 2016, 10:34 AM UTC

mpetrovich wrote: post #17

At NextBigSound.com, we've found that a nestable fractional-based grid is generally easier, faster, and more flexible to work with than traditional N-column grids:

Pills also support fractional based grid like half, one-third or two-third like that.