

Show HN: A small (less than 2 kb) CSS framework - J-H
http://andhart.github.io/bijou/

======
akcreek
Why a 10 column grid? 12 makes much more sense to me since it is divisible by
2, 3, 4 and 6 while 10 is only divisible by 2 and 5. 12 gives more options
with hardly any additional styles.

~~~
snarfy
This reminds me of the duodecimal system:

[http://www.youtube.com/watch?v=U6xJfP7-HCc](http://www.youtube.com/watch?v=U6xJfP7-HCc)

Mathematically, 10 is a pretty arbitrary choice to base your number system on.
We would have been better off learning base 12 than inventing metric.

~~~
blablabla123
You can also divide 10 by 2, 4 and 5 without getting infinitly long numerical
expressions. In fact 12 is quite a waste, it's better to go with 6 because it
has 2 and 3 as prime factors, thus also being friendly towards divisions over
4. On the other hand base 6 numbers are longer than base 10 numbers, so you
need a lot of digits.

In fact some googling reveals than the choice is not arbitrary:
[http://math.stackexchange.com/questions/8734/why-have-we-
cho...](http://math.stackexchange.com/questions/8734/why-have-we-chosen-our-
number-system-to-be-decimal-base-10)

BTW: this discussion is quite off-topic. The choice for the number system base
is quite different from the choice for the number of columns for a CSS grid.

------
adamwilcox
I use Simple-Grid. 12 Columns, 1140px, and smaller than this at 1.7 kb-
[http://thisisdallas.github.io/Simple-
Grid/](http://thisisdallas.github.io/Simple-Grid/)

~~~
lowboy
Yeah, but then you don't get typography, buttons, tables, or forms. If all you
need is a grid, then Simple-Grid is nice.

------
granttimmerman
At this point/size, why do you even need a 'framework'? I think anybody who
wants to adopt this kit and modify it a bit might as well just code the css
themselves.

------
moeedm
Most of you people are very smart, and I'm sure code very complex
apps/services. Seriously, you can write this much CSS on your own. You don't
need a framework.

~~~
rangibaby
Why re-invent the wheel every time? I quite like frameworks, because in the
end it is just one less thing to worry about.

~~~
nawitus
How would one even use this 'framework'? One would imagine that the first step
is to design the web site, then implement it, and it's unlikely that the
design looks similar to this framework.

------
deanclatworthy
Nice work, although a little useless right now.

It would be nice if your browser support was a little more informative than
"The latest versions of Chrome, FF, Safari". What platforms are you
supporting? FF runs on multiple devices nowadays and although it has the same
rendering engine there are subtle differences (particularly in font
rendering). Also you should set a baseline for browsers, as my users don't use
the latest versions of a browser, and we have a minimum requirement.

As said already it's a little odd to go with a 10 column grid, given that 12
is more divisible.

On a more general note, wouldn't it be nice if front-end CSS frameworks were
more inter-operable. Let's say I want to use Foundation's forms, Simple Grid's
grid and Bootstrap's alert I would have to compile Bootstrap and Foundation
separately and then learn the proprietary markup and classes that Foundation
uses for its forms, and then do the same for Simple Grid's grid and
Bootstrap's alerts. In an ideal world the markup would be consistent and the
classes and you could simply switch out your CSS files to try different
things.

~~~
J-H
Thanks for all the very good points. I really need to do some more testing on
other browsers, and then I'll be able to give a minimum requirement. So that
will definitely be part be of the next release. Also, I'm going to work on
changing the columns to a 12-column grid.

------
Edmond
What would be really cool is building visual layout tooling for CSS
frameworks...something along the lines of jetstrap or layoutit but perhaps
more generic...it would have the ability to flexibly define components and
their design time rendering.

Another thing that would be cool is a generic css layout framework..basically
a more robust form of the grid...something like this [http://layout.jquery-
dev.net/](http://layout.jquery-dev.net/) but perhaps have only jquery as
dependency and styling being up to user.

------
prodigium
Well, I'm impressed. Looks sort of like an old bootstrap.

~~~
CharlesW
This is neat! It also seems worth noting Yahoo's excellent Pure
([http://purecss.io/](http://purecss.io/)) here, too. It's a tiny bit larger
with a few more features, but modular and fairly straightforward to extend.

~~~
gry
Adobe Topcoat [[http://topcoat.io/](http://topcoat.io/)] provides metrics. The
"optimized" CSS is growing, and becoming an interesting space.

edit: clarity

------
Rogerh91
I like it. Definitely gets the point of "KISS".

------
UUMMUU
I feel like this might be his pet project to learn how a framework works and
is not meant as a production ready framework. It doesn't do media queries for
browser size nor does it have very much in the way of components. Probably
would be more appropriate on a sub-reddit with some better title like
"Learning how CSS frameworks work. Pointers?"

------
sekasi
The tables are a bit busted on the smallest breakpoint, but other than that
it's pretty awesome for the size. Well played sir.

~~~
J-H
Oops, thanks for pointing that out. Will definitely fix that as soon as
possible. Thanks for the kind words!

~~~
J-H
OK, I just committed a change to the tables. Should work now

------
armageddon
The columns should probably break down and resize to 100% for mobile devices -
your 420px container.

I'm not sure what will fit in a the one, two, and three width columns...
possibly an image. But the wrapping text in each column for the 420px
container is going to look a bit off.

~~~
J-H
That is a really good point. I'll try and implement this today.

------
CisSovereign
Very nice. Although the tables mess of the responsiveness a bit. Don't
compress fully.

------
aliirz
This is nice, will definitely use it in my next project.

------
sodafountan
It has a very nice flat design to it, I like it. I might just use it and
possibly extend it at some point.

------
somesay
Am I the only one who would prefer "cursor: pointer" on these buttons?

~~~
lowboy
Nope. I've always found it odd when clickable things have cursor:default.

------
brickmort
i love these things. super simple and super basic, yet still serves an
effective purpose. nice job.

------
garrettdreyfus
☆☆☆☆☆

------
OGC
a) This is rididiculous

b) It isn't "even less than 2 kb"

file 2 lines (1 sloc) 2.594 kb

([https://github.com/andhart/bijou/blob/master/css/bijou.css](https://github.com/andhart/bijou/blob/master/css/bijou.css))

~~~
rplnt
> CSS framework under 2kb (minified and gzip)

