Helium – Like Bootstrap, but in 30kb | Hacker News Reader

Helium – Like Bootstrap, but in 30kb

github.com

125 pointsjohnx123-up40 comments

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

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?

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.

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

https://fundrise.com/ found via http://dribbble.com/shots/908088-New-Fundrise-Homepage

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

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

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

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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

Very interesting.

An example site would be excellent.

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.

sounds cool, needs more demos

Add a demo plz!

Reply on news.ycombinator.com