Show HN: A small (less than 2 kb) CSS framework(andhart.github.io)
andhart.github.io
Show HN: A small (less than 2 kb) CSS framework
http://andhart.github.io/bijou/
19 comments
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.
This reminds me of the duodecimal system:
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.
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.
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...
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.
In fact some googling reveals than the choice is not arbitrary: http://math.stackexchange.com/questions/8734/why-have-we-cho...
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.
Yup, that's a really weird choice. The most common layouts are the ones with 3 or 4 equal sized columns, and I just don't see how one would use this grid to do that?
I use Simple-Grid.
12 Columns, 1140px, and smaller than this at 1.7 kb- http://thisisdallas.github.io/Simple-Grid/
Yeah, but then you don't get typography, buttons, tables, or forms. If all you need is a grid, then Simple-Grid is nice.
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.
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.
I'm not particularly excited by this instance in particular (10 cols and there's already plenty of other grids) but I think it's good to have several very simple "frameworks" or components doing one thing well.
When the code base is small enough, choosing the library doesn't mean half-blindly trusting it to do what it's supposed to do (up to 4k lines it's still easy to quickly review the content of the library and check if an issue would be easily fixable) and you can always exchange it for another component, or just write your one if really it doesn't fit your use.
And from another point of view, it should be a good learning tool to see how things are done if you're not familiar yet with the problem it solves.
When the code base is small enough, choosing the library doesn't mean half-blindly trusting it to do what it's supposed to do (up to 4k lines it's still easy to quickly review the content of the library and check if an issue would be easily fixable) and you can always exchange it for another component, or just write your one if really it doesn't fit your use.
And from another point of view, it should be a good learning tool to see how things are done if you're not familiar yet with the problem it solves.
Why re-invent the wheel every time? I quite like frameworks, because in the end it is just one less thing to worry about.
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.
Yeah, real programmers use butterflies.
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.
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.
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.
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/ but perhaps have only jquery as dependency and styling being up to user.
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/ but perhaps have only jquery as dependency and styling being up to user.
Well, I'm impressed. Looks sort of like an old bootstrap.
This is neat! It also seems worth noting Yahoo's excellent Pure (http://purecss.io/) here, too. It's a tiny bit larger with a few more features, but modular and fairly straightforward to extend.
Adobe Topcoat [http://topcoat.io/] provides metrics. The "optimized" CSS is growing, and becoming an interesting space.
edit: clarity
edit: clarity
I like it. Definitely gets the point of "KISS".
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?"
The tables are a bit busted on the smallest breakpoint, but other than that it's pretty awesome for the size. Well played sir.
[deleted]
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.
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.
That is a really good point. I'll try and implement this today.
Very nice. Although the tables mess of the responsiveness a bit. Don't compress fully.
This is nice, will definitely use it in my next project.
It has a very nice flat design to it, I like it. I might just use it and possibly extend it at some point.
i love these things. super simple and super basic, yet still serves an effective purpose. nice job.
☆☆☆☆☆
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)
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)
> CSS framework under 2kb (minified and gzip)
[deleted]