
Grd – A CSS grid framework using Flexbox in 512 bytes gzipped - 1000ch
https://1000ch.github.io/grd/
======
nailer
I genuinely don't understand CSS 'grid systems' in a world of border-box and
flex by default.

If you want to put things beside each other, make them whatever widths you
want and have a flex row.

What do 'grid systems' add apart from visual classes in HTML and negative
margin hacks?

~~~
girvo
Agreed. I used to use grid systems, but being able to wholeheartedly embrace
flexbox and border-box has meant that I really don't need to use them these
days. Want to do percentage width and fill the rest of the container? Easy-
peasy. Want to not specify specific widths but make one thing bigger than
another in a relative way, that adapts to the viewport powerfully? No
problems.

Hell, the only reason I use Bootstrap is for it's buttons and forms, etc.
which nowadays I've replaced with PureCSS; and the best part about PureCSS is
that I can use the bits I want and ignore the rest. Bootstrap can also do
that, but requires a preprocessor like Sass or Less (v4 and v3 respectively).

~~~
CM30
Not really. You can customise Bootstrap online and download the compiled CSS:

[http://getbootstrap.com/customize/](http://getbootstrap.com/customize/)

Just untick the boxes for the stuff you don't want, and hey, Bob's your uncle.
No Less or Sass required.

~~~
girvo
Sure! But using Bootstrap as a dependecy via "npm" makes that a bit more
annoying; and PureCSS does that out of the box via that route, which is great.

------
Wintamute
This is ... confusing.

a) The concept of a typographic grid is a print layout design tool
fundamentally unsuitable for coding flexible component-based layouts on
today's web (it probably always was, but talking about a "grid" can give
designers an air of technical mystique they quite enjoy ;)

b) Flexbox was invented to move beyond the grid. We don't want or need a grid
anymore.

c) It takes less than 1 day's effort to learn the vanilla CSS flexbox API and
you can re-create this "grid" if you really need it with a few lines of plain
CSS. No framework dependencies, other developers don't have to learn the
framework, and no polluting your markup with global utility classes.

------
8ig8
Can class names begin with a hyphen followed by a number?

This SO answer says [1]:

> a name must begin with an underscore (_), a hyphen (-), or a letter(a–z),
> followed by any number of hyphens, underscores, letters, or numbers. There
> is a catch: if the first character is a hyphen, the second character must be
> a letter or underscore, and the name must be at least 2 characters long.

[1]: [http://stackoverflow.com/a/449000](http://stackoverflow.com/a/449000)

Which references the CSS Grammar spec [2].

[2]:
[http://www.w3.org/TR/CSS21/grammar.html#scanner](http://www.w3.org/TR/CSS21/grammar.html#scanner)

~~~
hwh
I think the best reference would be the actual (main) spec since the grammar
spec says it is kind of a "superset" of the actual specification, i.e. not
always strict enough. Identifiers are specified here:
[https://www.w3.org/TR/2011/REC-
CSS2-20110607/syndata.html#va...](https://www.w3.org/TR/2011/REC-
CSS2-20110607/syndata.html#value-def-identifier) (two hyphens at the start are
also not allowed, in contrary to the "SO answer" cited).

~~~
TylerH
That answer clearly states that -- is not allowed.

------
davnn
I will make a flexbox framework with 100 bytes gzipped that contains one
thing: display: flex. Wait.. flex.io is already gone? Nvm.

------
tom_usher
This looks nice and simple!

I've been enjoying Lost
([https://github.com/peterramsing/lost](https://github.com/peterramsing/lost))
with PostCSS for grids recently - it has Flexbox support which works well and
keeps grid class names out of my markup.

~~~
CorySimmons
Thanks. I'm working on something new. Should be done this weekend. Stay tuned.

Re: this post

Grd doesn't do anything interesting at all. Everyone is blindly obsessed with
flexbox. Grd doesn't even concern itself with gutters.

Here's something I cooked up in 5 minutes that does more with less code:
[http://codepen.io/corysimmons/pen/eZgZzz?editors=1100](http://codepen.io/corysimmons/pen/eZgZzz?editors=1100)

------
jmagnusson
Without being able to change amount of elements per row depending on viewport
width I don't see this picking up.

~~~
renke1
Good point. I actually don't understand its behaviour in regard to viewport
width. Also, there are actually no media queries used in the CSS file.

~~~
reitoei
Pretty trivial to extend it.

~~~
malydok
Pretty trivial to write it all from scratch.

------
Brajeshwar
Perhaps my CSS is rusty and not keeping up with the new syntax but I need to
know what with that "\" syntax?

    
    
       .Grid.\-stretch  { align-items: stretch; }

~~~
0x4a42
I thought classes starting with an hyphen are reserved for browser vendors[1].
Maybe this changed since the last time I checked the spec.

[1] = [https://www.w3.org/TR/CSS21/syndata.html#vendor-
keywords](https://www.w3.org/TR/CSS21/syndata.html#vendor-keywords)

~~~
majewsky
That's for properties and keywords, not for class names.

------
escherize
I like it. It'd be easier to play with the demo if there was some more space
beneath it.

------
snird
This seems to defeat the idea of flexbox. Grid systems were needed for old
CSS, but with the powers of flexbox, we better off using it directly then
using it with a grid system, as the grid system will be limiting and will not
give any significant comfort.

------
agconti
This lib will only work on the latest browsers.

The source leverages calc for simple width percentages, so on android browser
below 47 these values won't calculate at all:
[http://caniuse.com/#feat=calc](http://caniuse.com/#feat=calc).

> Partial support in Android Browser 4.4 refers to the browser lacking the
> ability to multiply and divide values.

Why wouldn't the author change this to:

.Cell.\\-1of12 { width: calc(100% * 3 / 12); }

to

.Cell.\\-1of12 { width: 25% ; }

It seems silly to go through the trouble of installing a lib when it gives you
less browser support than flexbox itself.

~~~
richthegeek
The "dist" version has all this removed.

It's a pretty odd use for a preprocessor.

Each mixin is only used once (so why bother?) and the calcs are turned into
percentages by the compiler (so why bother?)

~~~
gotchange
Is there a way to work around this limitation?

I have a CSS code that looks like this for a good reason:

    
    
        left: calc(100% + 2em)
    

that I'd like it to be changed to support legacy stock Android browsers.

------
ZeroGravitas
I've developed a heuristic that any web project posted to HN that mentions its
size in the headline is probably a half-assed copy of something with better
documentation, developer-mindshare, browser-support, testing, bug fixing etc.

Size and therefore speed is important on the web, but it seems an easy mental
trap to optimize it at the expense of the other important things.

------
troels
file size appears to me as a completely random metric to measure your code
against. With the overhead associated with establishing a http connection, the
actual byte-size is most likely of little importance. In fact, if this goes
over TCP/IP (Which HTTP usually does), isn't there a frame size of some 1500
bytes?

------
sdegutis
Ever ever since I found out IE10 and IE11 have several big issues with Flexbox
[1], I've been avoiding using it in production.

[1]: [http://caniuse.com/#search=flexbox](http://caniuse.com/#search=flexbox)

------
TylerH
Or you could just use tables for tabular (another word for a grid) data and
use native flexbox for other stuff. Besides, CSS Grids level 1 will be coming
to browsers soon anyway.

------
pcmoore
I get 'Uncaught SyntaxError: Unexpected token ILLEGAL' on Chromium Version
37.0.2062.120 Ubuntu 12.04 (281580) (64-bit)

The live demo doesn't work for me

~~~
dchest
Your old browser version doesn't support template literals.

------
despinozist
I'm fine with the "this tiny codebase is DRY" justification (though how hard
is it to be DRY with 37 lines...? DRY in the sense that it proves DRY-ness is
a concept of computer science??? DRY in the sense that it conceptually
overlaps with what other developers/programmers in the field are describing in
their systems? DRY in that it appeals to a handful of niche programmers?), I'm
fine with the package management justification (because it makes continuous
integration possible with upgrades); I'm fine with the "I don't need to be a
Pointer-dexter Programmer to write software". The problem is the "cute name"
justification, or the idea this is a "good practice in the honored tradition
of DRY".

The only problem here is that "who cares" if it is a "cute name". This isn't
really DRY in a non-trivial sense. I mean, yet another grid system that calls
grid-like things "grids". Yergh! Go read Brian Cantwell Smith's paper on
"semiotic alchemy". More practically, I would say that all the points about
filesize and what not are sadly irrelevant as true sources of anger. I
honestly see this as no different as someone getting angry with someone else
because they bought a foreign part to put in an American car. More puffery!

We have 7 "big" problems in CSS today:

    
    
        Global Namespaces, 
        Dependencies, 
        Dead Code Elimination, 
        Minification, 
        Sharing Constants, 
        Non-deterministic Resolution, 
        Isolation.
    

What happened to the pursuit of truth? Alright. You put a framework on your
résumé? But are you a computer scientist? Are you defending an idea? Or simply
leveraging an old one?

We take and depend on a lot of code today. But now we are taking and depending
on higher order concepts or principles to give the illusion of pursuit... of
something.

This is a "grid system" only in name insofar as it surely is detached from the
idea of why grid systems were invented, mostly assuredly, to solve problems.

The "filesize" problem of CSS is like the "filesize" problem of Bitcoin. It's
just that nobody really likes CSS or knows they can build Turing Machines in
it, so they hate you for it. Whereas in Bitcoin, it gets you a seed round to
test yr vaporware. At least these little CSS publications don't cost society
_that_ much, I guess..

Typically when I venture down this path of "system building" in CSS land, I
use Organic CSS[0] because it promotes fun, thinking, creativity, and gives me
a scientific scheme within which to treat those 7 problems listed above.

Does this grid framework solve any of those problems listed above? Is it even
concerned with them? Are devshops aching to refactor to the next tiniest grid
system? Are we really looking to shave off submilliseconds from our HTTP
requests? I mean, we have HTTP/2... so do those submilliseconds really matter
these days?

[0]: [http://krasimir.github.io/organic-
css/](http://krasimir.github.io/organic-css/)

~~~
TylerH
Are you sure you're in the right place, spammer?

~~~
despinozist
Sup, Qt. How u iz?

------
boredatnight12
We will be moving to this immediately

------
danvoell
My tagline would be -

er mah GRD, it's amazing!

------
91bananas
The attitude in this thread is pure shit.

You DO NOT NEED to use bower or npm to install this, you can easily find the
source and bring it in to your project if you want to use this. Npm does
provide you with a way to upgrade this without digging around, but you don't
have to use it, so stfu, go find your file on the Internet, copy it to your
css directory.

A reason a flex grid could be cool, it provides you a standard across your
application. When you one-off every time you need to have elements behave in a
grid-like fashion, you run a much higher risk of ending up with
inconsistencies. Unless you yourself write some code that reliably makes
things behave like a grid, hey that's called a grid.

I get that there are a lot of tools available, but this recent attitude of
just slamming people because they created something that isn't aligned with
your ideals is not healthy or progressive. There is no implication that
because this exists anyone else has to use it. It's just code someone wrote
and happened to end up here. Let it be.

~~~
gkya
Your attitude is infantile.

There is a metastasis of so-called _tools_ in the web-dev world nowadays.
Setting up a moderate C project is way easier and less tools-involved than
setting up a HTML-CSS thingy following the fashion of today. This one project
in particular sports upwards of ten files to distribute what's worth a half
page of CSS.

If there's a library that I use across all my projects, then I just subscribe
to its syndication (mostly VCS RSS feeds for me). And then I fetch it if the
changes are of my interest, or there are bugfixes. All these other tools are
completely superfluous. How many hours are lost in your shop setting these
pieces of crap up instead of just downloading the file and putting it in your
assets directory? The whole web dev business of today is a big stupid mess of
people who have no clue what they're doing.

~~~
dandelany
Relax with the name-calling. Is it really unfathomable that people work
differently, and that some people find value in tools you don't use? I
completely understand not wanting to use them, but the presumption that they
are completely useless cruft that people only use because they're idiots who
don't know what they're doing is truly condescending, and closes your mind to
learning new things. There are real benefits to be had from frontend package
management. And real problems. Don't begrudge other developers for evaluating
them for their own uses and making a different choice than you did.

------
TheOneTrueKyle
I came here to see really cool comments on an interesting project and I see
hostility.

This is why I don't hang out with developers

~~~
mchahn
I find myself making negative comments more than I would like. But these
happen to be about points that are the most interesting to discuss. The
resulting discussion is very useful. What am I to say about things I like? +1
adds nothing to a discussion.

~~~
dang
There's a way of criticizing that still honors—or at least doesn't trample—the
creative spirit in the work being criticized. That's what we're going for
here. Substantive criticism is helpful because it adds information. Snarky
dismissals merely puff up the criticizer. As long as that's not your intent,
your comments are likely to be fine.

~~~
mchahn
Definitely. I would like to think that what I call negative can also be called
substantive criticism.

Where does this recent comment of mine fall? It is snarky but isn't it also
substantive? I guess I could have left out the snark.

"I love it. We had servers, then we had clouds, and now we have personal
clouds. Uh, isn't that a server?"

------
rasz_pl

        Syntax error at line 109 while loading: unexpected character: U+0060
           grid.className = `Grid ${align.value}

------
unicornporn
Web design today: NPM or Bower installation for a 37 line CSS file. When will
this insanity end?

The framework itself looks handy and simple enough, but there's probably
already about 10 other flexbox layout frameworks out there that works just as
good too. Here's another one:
[http://gridlex.devlint.fr/](http://gridlex.devlint.fr/)

~~~
sotojuan
What's wrong with that? It's a dependency. What else do you want to do, just
load it in a `link` tag? Then here you go:

[https://raw.githubusercontent.com/1000ch/grd/gh-
pages/dist/g...](https://raw.githubusercontent.com/1000ch/grd/gh-
pages/dist/grd.css)

I'm honestly not seeing what is there to complain about.

~~~
Mikushi
That I shouldn't need to install NPM or Bower to download a fucking half a Kb
of CSS is what is the complain.

It's a clear sign of people with no clue about proper software engineering,
which is glaring in today's front end world where dependencies and tools have
gone amok to manage mere hundreds lines of CSS or Javascript.

Just provide a download link to the min file and be done with it.

~~~
oneeyedpigeon
Wow, check your anger and your prejudice. Yes, the site could do with a clear
link to the source, but most software engineers are familiar with the 'github-
link-in-top-right-corner' pattern, so it shouldn't be a problem even if you're
ideologically opposed to using more robust alternatives.

~~~
techdragon
I see anger but I'm struggling to find "prejudice" here.

~~~
richthegeek
"All these bloody young people don't respect my JAVA Enterprise
BSServiceFactoryFactory experience".

Similar to the prejudice that every high-level programmer from so many idiot
low-level programmers who think because they mess about with pointers all day
they are "real" programmers.

------
lolidaisuki
The demo is broken for me.

Why would anyone even want anything like it?

E: Nice to see again how childish HN is, downvoting when someone points out
that the thing is broken and asks a serious question. This is why I originally
left this place.

~~~
kawsper
The demo works fine for me in Chrome. Maybe you would have received a better
response if you included how the demo is broken, which browser you are using,
and what you see.

------
visarga
nice

------
Yaggo
I wish there was gentlewomen^H^H^H^H^Hfolks agreement to use minified size for
library size comparison, not gzipped size, because minified size better tells
how much there are code to read/understand & parse/execute, while gzipped size
tells how much there are bytes to transfer, and the bottleneck is generally
the former.

~~~
coderdude
Just say gentleman's agreement. It's okay to use a real phrase.

~~~
Yaggo
Thanks sir, but I prefer gender neutral wording. (Note to self: humor, do not
use.)

~~~
Stratoscope
Not only is it OK to use a real phrase like "gentleman's agreement", it
_communicates better_. People will more easily understand what you mean, and
they won't be distracted when you attempt to be gender-neutral by calling
attention to gender.

~~~
Yaggo
The above is all true but only because gender-neutral words are not yet used
widely enough, and the only way to change that is to systemically prefer
gender-neutral words. Isn't it part of hacker mentality that one should fix
broken things and one should not be afraid of change?

(I guess this is largely culture related thing, but e.g. among my peers (high
educated 30s Europeans) gender-biased words actually cause more distraction.)

~~~
FroshKiller
Your affectation of the old terminal-style backspacing joke is way more
distracting than "gentleman's agreement" could ever have been.

And anyway, I think you'd have been better off just saying, "I wish we could
all agree...."

