
Pills: A simple responsive CSS grid for humans - rohitkrai03
https://github.com/rohitkrai03/pills
======
have_faith
The problem with all of these responsive grid systems is that they are
opinionated about how a component responds.

Responsiveness is not a document level problem, it's a component level problem
and each component has it's own concerns. One component might keep the 2up
grid from desktop to mobile, another might collapse to single column half way,
and so on. Having generic desktop and mobile class names ala bootstrap doesn't
solve this. You end up with components that have to collapse at pre-defined
points and a massive amount of class soup on your containers.

This is related to the fact that components respond to the window width and
not their parent containers size. Components are very dumb right now, we need
smart components that understand their surroundings beyond the window. Then we
will have truly portable components!

~~~
calinet6
The problem with all of these responsive grid systems is that it's so easy to
do a grid in plain CSS with flexbox and media queries that they're close to
zero added value in almost all cases.

~~~
YngwieMalware
Agreed, flexbox is one of the best things to happen to CSS in a very very long
time.

~~~
MawNicker
> very very long time.

It's sad really. Table-based layouts have been considered bad practice for
years but CSS is only _just now_ becoming a superset. That is if you're lucky
enough to be free of old browsers. If you want everything to "just work"
tables are still the practical choice _to this day_. Kudos to PG for sticking
to what he learned in the 90's when he built HN.

~~~
icedchai
Yes! It's sad that table-based layouts became "bad practice". Generally
they're a lot simpler to understand than the mess of CSS and bizarrely named
divs we have today.

~~~
ams6110
I think part of the reason tables became considered "bad" was that back at
that time most web pages were built by interspersed HTML and ASP or PHP code
and getting all the TR and TD tags balanced especially with rowspans or
colspans thrown in quickly became a mess. Every page was a standalone thing
also, it was much less common to see templating systems used to establish the
overall structure of the site. So if you ever got the assignment to "reskin" a
website, it was a huge amount of very tedious work making repeated similar
changes to all the tables and other markup on every page.

Today we have much better ways to create an overall layout and separate markup
from content. Using tables today would be a lot less of a problem than it was
when they were decreed to be "bad."

~~~
davidy123
From what I could tell, it is because HTML tables have a specific structural
meaning, which is among other things used by screen readers. So if used
properly, a person who needs a screen reader could reliably have the contents
of a table read to them, but if it's used for layout the result is useless.
There seems to be enough people conscious of this that use of tables for
layout has always been frowned on. Now there are better hints for screen
readers, ,but tables are still useful for screen readers "out of the box."

In any case, tables are not nearly as flexible as a true responsive layout.

------
brianzelip
Hey rohitkrai03, good on you for creating something that is useful to you and
putting it out there for others on the chance it is useful for them too. There
are so many approaches to styling web content. I enjoy finding all the
projects that get brought up (and beat up) in these threads. CSS is all about
figuring out what works for you. Cheers.

~~~
rohitkrai03
Thanks a lot for appreciating my work.

------
dualogy
Or, just write the display:flex you need, where you need it, as little as you
_actually_ need.. easy as pie unless your deadline was days-ago. This here
might save _you_ 10 minutes of manual work, at the expense of further code-
base bloat, external-lib-dep accumulation, technical debt. OK fair game for
your MVP-landing-page-A/B-split-test-shenanigans, granted.

~~~
mpetrovich
Besides lack of good cross-browser support until recently, I think there are a
few reasons why flexbox is still less popular than float- or margin-based
grids:

\- Steeper learning curve and less accessible than adding a class like "col-3"
or "grid--1/2". The latter is almost self-explanatory.

\- Requires an existing or new CSS class to bind the styles to. If it's a new
class, you have to figure out a good name (which isn't always easy, naming
things is hard).

\- Requires editing CSS/Less/Sass, which (depending on your setup) can require
waiting for it to compile. The wait time for compiling/bundling HTML is
usually negligible.

\- Traditional grid systems just work, and they work well enough for most
things. When you have more important & interesting problems than a CSS grid
system, there's a bias towards shipping what works and moving on.

That being said, flexbox is really powerful and a great tool for many things.
But for many simple layouts, traditional grid systems can get the job done
just fine without requiring much initial investment. On interdisciplinary
teams where non-frontend devs can contribute, end-user simplicity is sometimes
more important than language sophistication.

~~~
paulojreis
... and it relies on DOM structure.

This is horrible, IMHO. Flex containers will layout the flex items, which are
by definition its direct descendants. If by some reason [1] you get an extra
DOM element between the flex container and the item you intend to layout, then
you're in for a rewrite of the CSS and maybe some extra classes.

Also, this bug in Webkit is rather inconvenient:
[https://github.com/philipwalton/flexbugs/issues/115](https://github.com/philipwalton/flexbugs/issues/115)

[1] For instance, if you create an Angular element directive.

~~~
kylecordes
Yes! Flex box has lots going for it, but it breaks a "feature" that many web
developers and framework developers have relied on since the earliest days: it
being mostly harmless add an extra layer of element at a whim anywhere. One
could argue this is a lousy feature (and I would agree). But lots of
developers and lots of frameworks do it.

~~~
paulojreis
Adding elements _just because_ (and, above it all, just for styling purposes)
is wrong, of course. But having - or forcing - a tight coupling between
structure (DOM) and layout/styling (CSS) is also wrong. IMHO, standards should
try to move in the direction of decoupling; they did the opposite with
Flexbox.

Anyway, the most present case for me is really Angular, where DOM elements are
usually added because they are needed (and actually beneficial, if you like a
component-based architecture and DRYness). Angular 1.x deprecated the
`replace` option for element directives a few months ago (i.e. your <my-
directive> will be in the DOM). Also, AFAIK, it never supported the `replace`
behaviour in components (which are always elements). This means that,
currently, Angular and Flexbox don't play very well together...

------
plq
Please explain to me: What happened to the philosophy behind
[http://csszengarden.com](http://csszengarden.com) ? Back when CSS needed
evangelizing, the main selling point was "never touch the DOM for styling".

What went wrong?

~~~
armandososa
CSS Zen Garden was more close to art than to real world production work. It
existed to draw a line between the old days' table-based layouts and what CSS
brought to the table.

In those days CSS was perceived as not powerful and flexible enough, and
capable only of boring boxy layouts (which is in fact the favoured aesthetic
nowadays) and CSS Zen Garden and other similar sites existed to disprove that
notion.

Also, some of the core ideals of the time, like obsessing over having 100%
semantic markup and the ability to change styles without having to touch the
markup turned out not to be that important.

And, lastly, if you look at the provided source in CSS Zen Garden you can see
that it has a lot of _DOM affordances_ like classes, IDs and even some extra
markup to make sure that the CSS author had everything she needed to make his
design work.

source: I got a design published in the garden a long time ago
[http://www.csszengarden.com/110/](http://www.csszengarden.com/110/)

------
romanovcode
Why not just use flex? [https://philipwalton.github.io/solved-by-
flexbox/demos/grids...](https://philipwalton.github.io/solved-by-
flexbox/demos/grids/)

~~~
SwellJoe
Because IE 9 is still (unbelievably) a top 10 browser. But, it won't be for
much longer, at which point I'll start converting.
([https://www.w3counter.com/globalstats.php](https://www.w3counter.com/globalstats.php))

------
franciscop
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...](http://web.archive.org/web/20150713011953/http://www.picnicss.com/plugins/grids/)

[2] [http://picnicss.com/](http://picnicss.com/)

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

~~~
raytracer
Looks good! How does the grid handle columns with different heights?

~~~
franciscop
They should be filled up to the size of the tallest one if I'm not mistaken.
Though so far I've only tried it with uniform elements so I don't know first
hand.

------
drinchev
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](https://www.smashingmagazine.com)

------
timlyo
I like simple libraries like this that do one thing well. Too many web
libraries try to do everything, when all I don't need anywhere near that much.

------
combatentropy
Using tables for layout sometimes makes sense:
[https://www.combatentropy.com/coming_back_to_the_table](https://www.combatentropy.com/coming_back_to_the_table)

How are these DIV's with presentational class names any better?

------
staticelf
I've found [https://milligram.github.io/](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.

------
xunra
Looks a lot like semantic-ui [http://semantic-
ui.com/collections/grid.html](http://semantic-ui.com/collections/grid.html)

------
armandososa
I don't get the author's pain point. `col-md-12` looks like pretty self-
explanatory class name (or `medium-12 columns` in foundation). I mean, you're
already writing HTML where `img` means "Image" and `div` means "arbitrary
container", so unless you don't understand (or don't care about) the value of
a 12 columns grid I don't see what's so bad about bootstrap's column names.
Especially if you're already OK with having presentational classes in your
markup.

------
andrewfromx
this is great. I really like how he breaks down the three types of grid
systems out there. And "just memorize the cryptic codes like col-md-6 or
whatever from their favourite CSS Framework like Bootstrap" is so true. I knew
there had to be a better way and pills could be it. I starred it and forked
it.

~~~
mariusmg
>just memorize the cryptic codes like col-md-6

It's awkward at first, becomes second nature after you use Bootstrap for a
while.

I guess a grid only framework makes sense if you only use the grids from the
big frameworks, but it's not my use scenario since i use LOTS of stuff from
Bootstrap .

------
colourgarden
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](https://github.com/colourgarden/avalanche))
for a grid system based on percentages or fractions (you choose) </plug>

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

------
YngwieMalware
It will never not be faster to roll your own based on the project needs. Aside
from knowing how to use Bootstrap, I can appreciate the work on these CSS grid
systems and frameworks but I don't see any need for most of them. Do people
use Blueprint anymore?

------
connorjburton
Honestly, I just use

    
    
      .something
      {
      width: calc(33.33% - #{$spacing-small*3/2});
      margin-left: $spacing-small;
    
        &:first-of-type
        {
        margin-left: 0;
        }
      }
    

Well simple

~~~
connorjburton
Correction:

    
    
      .something
      {
      width: calc(33.33% - #{$spacing-small*2/3});
      margin-left: $spacing-small;
    
        &:first-of-type
        {
        margin-left: 0;
        }
      }

~~~
qbert
For the gutters, just do:

    
    
      .something {
        width: calc(33.33% - #{$spacing-small * 2/3});
    
        + .something {
          margin-left: $spacing-small;
        }
      }

~~~
connorjburton
I like that!

------
bodytaing
Pill is almost 400 lines just for the grid. Here's a 48 line alternative
that's customizable:

[https://github.com/doximity/vital/blob/master/source/stylesh...](https://github.com/doximity/vital/blob/master/source/stylesheets/_grid.sass)

------
XCSme
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

~~~
Tiquor
This framework is getting posted everywhere and it's not even really
responsive. I saw this junk on Reddit too. People were defending it saying it
had mobile and desktop sizes. What?

------
pweissbrod
Pardon my cynicism but the adjective 'simple' has been abused to the point
where it repels me when I find it in framework descriptions.

Calling something 'simple' is a subjective statement which is a meaningless
waste of words, especially from the author of the framework. Of course you
perceive your own framework as simple. Nobody designs a framework to
intentionally make something more complicated.

The word 'simple' is repeated 8 times in the first 2 paragraphs of your
description. It reads like something thrown together in a thoughtless hurry.
Your framework could be wonderful but it leaves the reader wondering if the
code has the same level of investment as the description.

~~~
calinet6
Most Hacker Newsy Hacker News Comment Of The Year Award

------
donatj
I created SlenderGrid [1] a while ago which I believe is really all you need.
It's 16 lines of code and you define your OWN actual __semantic __grid
classes.

so for instance:

    
    
        .content {
            @include box-size(3/4);
        }
    
        .sidebar {
            @include box-size(1/4);
        }
    

[1]
[https://github.com/donatj/SlenderGrid/blob/master/src/_slend...](https://github.com/donatj/SlenderGrid/blob/master/src/_slendergrid.scss)

------
mpetrovich
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:

    
    
        <div class="grid--1/2 grid--2/3@M">
            <div class="grid--1/3"></div>
            <div class="grid--1/3"></div>
            <div class="grid--1/3"></div>
        </div>
        <div class="grid--1/2 grid--1/3@M"></div>

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

------
fredleblanc
Adding my own me-too onto the pile of "I made something just like this:"
[https://github.com/secondparty/arrange](https://github.com/secondparty/arrange)
— I built it out of curiosity, and have used it in my projects, (shrug emoji).
These types of projects are fun.

------
megalodon
Wrote this [0] more than a year ago, it generates a tiny CSS grid template
using attribute selectors. Should work with any amount of columns. Might be
useful for someone here.

[0]
[https://github.com/mateogianolio/griderator](https://github.com/mateogianolio/griderator)

------
taesu
Honestly, I see one~three of these simple, responsive, lightweight CSS
frameworks every week on HN. I wonder how many people actually get to use
these new shiny frameworks over the reputable ones. I personally use
bootstrap, and will try foundation next, but none of these __new __ones.

------
kbr
Hey there, I am the maker of Wing.css ([http://usewing.ml](http://usewing.ml))

This is a really nice grid system. I love the simplicity and the website. Keep
it up!

------
Tiquor
It is so simple and so human it isn't even really responsive. Magic!

~~~
Ao7bei3s
Can you explain?

When I resize the window, the demo
([http://arkpod.in/pills/](http://arkpod.in/pills/)) reflows exactly like I'd
expect.

~~~
nilliams
It only has one breakpoint whereas bootstrap has multiple (xs, sm, md, lg).

------
deusex_
It would be nice to mention on the grid website what is the key difference
from other grids.

e.g. what is the difference from Bootstrap? both 12 columns, grid based on
floats. Is there any difference than naming?

~~~
rohitkrai03
One difference from bootstrap would be it handles desktop and tablets using
fluid layout instead of breakpoints. The only breakpoint in the grid is for
mobile.

~~~
nilliams
Yeah it's more like the Boostrap 2 grid, which will be a step back for some
people used to multiple breakpoints of Bootstrap 3.

------
hit8run
skeleton has the same approach

~~~
revx
This seems like skeleton's exact syntax with a different name...
[http://getskeleton.com/](http://getskeleton.com/)

------
dfar1
Grids make for fast development but boring websites. I find the design I work
with more often break the grid than conform to it.

~~~
armandososa
Are you serious? Unless you're David Carson, you should always design based on
a grid if you want good design.

Mark Boulton wrote some amazing articles about grid design long before grid
frameworks were a thing [http://www.markboulton.co.uk/journal/five-simple-
steps-to-de...](http://www.markboulton.co.uk/journal/five-simple-steps-to-
designing-grid-systems-part-1)

------
lcmatt
Small point which I see fairly regularly. Please provide a partial sass/less
partial in addition to the css file.

------
fimdomeio
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.

------
rxaxm
i made something like this (although much less extensive) because i found
myself using the same pattern for a few freelance gigs

[https://github.com/r-medina/grid](https://github.com/r-medina/grid)

thanks for sharing!

------
wavelattice
What's the point of something like this is a world where flex box is a
standard?

------
Etheryte
So it's just a clone of Bootstrap with different class names.

~~~
the_jp
Without the ability to control width percentage in mobile, or set it
differently between tablet and desktop.

------
lucianmarin
Why not go gridless?
[https://github.com/lucianmarin/gridless](https://github.com/lucianmarin/gridless)

~~~
xyience
I hate that pixels made a comeback. They are a total pain in the era of
multiple resolution sizes, aspect ratios, orientations, and densities.

------
windsurfer
Are there any sites that use grid systems? I can't think of any off the top of
my head.

------
gchokov
Another one. For lazy humans.

