Hacker Newsnew | past | comments | ask | show | jobs | submitlogin
Helium – Like Bootstrap, but in 30kb (github.com/cbrauckmuller)
125 points by johnx123-up on Jan 24, 2013 | hide | past | favorite | 40 comments


Pro tip: Link your demo from the top of your readme file, especially when you're handing out the Github URL.


I have become increasingly frustrated by the lack of link to a demo on github projects lately! I am not going to check out the project just to see what it is. I am glad I am not the only one with this frustration.


That would be very helpfull. Couldn'd figure out how to see a demo of it in action.


I'm not able to find the demo? Did you find it in the readme file?


Hey guys, I'm Chris, the developer of Helium. We were pretty surprised by the amount of attention the project is receiving, and unfortunately don't have a live demo of the base project up right now. However as an example of what it can do, you can check out our first live project built with Helium over at https://fundrise.com


No worries. Thanks for replying back with a link to a working example. It's the first thing I like to see when looking at something like this.


There's no point releasing something like this without functional examples, why would you do that in the first place?


Any links to examples? The main page shows the HTML code but not what the resulting styles look like...



I presume the main style sheet at fundrise.com [1] could have been called helium.css to give you guys at least a minimum amount of credit.

[1] https://s3.amazonaws.com/fundrise-content/css/master-respons...


> New homepage for http://fundrise.com launched today. It's fully responsive and built with Helium (http://github.com/cbrauckmuller/helium), our in-house responsive framework.


Your idea sounds great. (But I'm not the original author)


please fundrise admin turnoff error display ! i get some log errors in that page ! other wise neat ;)

https://fundrise.desk.com/customer/portal/articles/601733-wh...


+1


Very cool, but I don't see file size as a significant factor when making a decision about what library to use. With SPDY, fast pipes & 4G, minification etc, worrying about super tiny file sizes is becoming a legacy issue.


It's highly common for people on here to complain about how slow many modern websites are, mainly because they rely far too much on JavaScript or are trying to do too much on one page at one time.

File size is a very real measure that needs to be monitored. Naturally, if you're building a basic website then it's hard to make your pages too bloated, but I've had numerous interview candidates throw over CV's with basic one page portfolio sites that hit the 15MB mark, and these people often don't get the job.


This makes me just sad. It might not be a problem for you personally, but it is for the majority of the rest of the people.

Hell, even Hacker News isn't as fast as I'd like it to be on my connection.


I think the main issue isn't that it is heavy to transfer, but bootstrap is a lot of code to wrap your head around, if you want to customise beyond the defaults. I think a more lightweight core could be worthwhile, although I'd rather see Bootstrap slimming down, since it's otherwise a very good framework.


I don't agree, one of the beauties of bootstrap is that it's really easy to wrap your head around.


In the US. In other countries, not so much.


Well, I'm in Sweden on a gigabit connection right now. Quite a few countries have good cable and cell infrastructures. So, "other countries" might generalizing.


I was about to say the same thing. I live in Thailand and haven't had any issue with slow websites (besides the usual borked connection every now and then). I've worked for two different companies here that rely heavily on the cloud for extremely operations and both selling cloud-based software (both are SMEs are targeting SMEs).

Now, I don't even think the overall quality of internet connections is that great in the US and I'd say most European countries do a better job overall (less disparities inside individual countries, not among all European countries).

And finally: http://www.techpark.net/2010/04/15/broadband-internet-speeds...


The US is not particularly known for fast internet connections, a few localized exceptions aside.

But yes, file size must still be considered. 3G, bad reception, congestion, spotty wi-fi and loading speed (spdy isn't that much faster) are very real concerns.


Actually, the U.S. is probably in the middle of the pack or worse when it comes to average connection speed.


I've uploaded a screenshot for anyone who just wants a peek: http://decodering.com/post/41361083824/helium

(I tweaked the padding too.)


> The compiled default CSS file weighs in at a comparatively tiny 30k, versus approximately 100k for Bootstrap and almost 200k for Foundation.

At first I was sceptical that this was even close to a fair comparison, however even after stripping Bootstrap back to comparable functionality its CSS still weighs in at 68KB.

I will be watching this project with interest, but I think it probably needs a lot more use before all the edge case bugs (that Bootstrap has probably already dealt with) get ironed out.


Foundation (with everything) compiles to 84k if output_style is set to :compressed in the Compass config.rb file. The 200k size for Foundation is fully commented, non-production css.


I'm not the original author. I don't know how you checked that. But...

1. https://github.com/cbrauckmuller/helium/blob/master/css/mast... 41kb (with whitespace)

2. YUI Minified 33kb

3. Minfied + gzip 5.8kb


He stripped Bootstrap of the functionality not included in Helium and compressed that. The README most likely lists the compressed version of the full Bootstrap library.

5.8kb is impressive, though.


Fortunately CSS is logic-less, which means there isn't much to worry about bugs :)


There's still cross-browser compatibility issues, fringe cases that lead to unexpected behaviour, and so forth. Even if not typical of executing code, I'd still refer to those as bugs.


Skeleton [1] is a nice lightweight alternative too, with very discreet default styles.

[1] http://www.getskeleton.com


Are there like many of these floating around? It seems like We get a "Like Bootstrap" every week or so. Ink,

http://ink.sapo.pt/index.php

Didn't even got to frontpage two weeks ago. And possibly many others.


What's the selector count and how does it tackle specificity?


I might just be missing it, but is this published under an open source license? I didn't see it noted anywhere...


I could really see myself using this soon for a project I am working on. Glad someone made this.


Very interesting.

An example site would be excellent.


sounds cool, needs more demos


Add a demo plz!


Very interesting stuff. I have been working on my own project this way from scratch too. Gotten so far as under 100kb with all images [raw data URIs] combined so far.

Will give this project a close look in the weekend.




Consider applying for YC's Winter 2026 batch! Applications are open till Nov 10

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: