6 ms·

Helium – Like Bootstrap, but in 30kb

125 points by johnx123-up 14y ago

kiwidrew 14y ago
Any links to examples? The main page shows the HTML code but not what the resulting styles look like...
- mikk0j 14y ago
  +1
- johnx123-up 14y ago
  https://fundrise.com/ https://fundrise.com/ found via http://dribbble.com/shots/908088-New-Fundrise-Homepage http://dribbble.com/shots/908088-New-Fundrise-Homepage
  - Toshio 14y ago
    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-responsive.css https://s3.amazonaws.com/fundrise-content/css/master-respons...
    - johnx123-up 14y ago
      Your idea sounds great. (But I'm not the original author)
    - CornishPasty 14y ago
      > New homepage for http://fundrise.com http://fundrise.com launched today. It's fully responsive and built with Helium (http://github.com/cbrauckmuller/helium http://github.com/cbrauckmuller/helium), our in-house responsive framework.
  - camus 14y ago
    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-what-is-an-online-public-offering- https://fundrise.desk.com/customer/portal/articles/601733-wh...
shocks 14y ago
Very interesting. An example site would be excellent.
dreen 14y ago
sounds cool, needs more demos
Kudos 14y ago
> 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.
- johnx123-up 14y ago
  I'm not the original author. I don't know how you checked that. But... 1. https://github.com/cbrauckmuller/helium/blob/master/css/master.css https://github.com/cbrauckmuller/helium/blob/master/css/mast... 41kb (with whitespace) 2. YUI Minified 33kb 3. Minfied + gzip 5.8kb
  - waxjar 14y ago
    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.
- ricardobeat 14y ago
  Fortunately CSS is logic-less, which means there isn't much to worry about bugs :)
  - nwh 14y ago
    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.
- mistagrrr 14y ago
  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.
init0 14y ago
Add a demo plz!
jschuur 14y ago
Pro tip: Link your demo from the top of your readme file, especially when you're handing out the Github URL.
- 1nvader 14y ago
  That would be very helpfull. Couldn'd figure out how to see a demo of it in action.
- size0618 14y ago
  I'm not able to find the demo? Did you find it in the readme file?
  - cbrauckmuller 14y ago
    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 https://fundrise.com
    - size0618 14y ago
      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.
    - walls 14y ago
      There's no point releasing something like this without functional examples, why would you do that in the first place?
- jonaldomo 14y ago
  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.
ulisesrmzroche 14y ago
What's the selector count and how does it tackle specificity?
monsterix 14y ago
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.
btipling 14y ago
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.
- nwh 14y ago
  In the US. In other countries, not so much.
  - unicornporn 14y ago
    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.
    - nakkiel 14y ago
      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-2009-2010-the-top-10-countries/ http://www.techpark.net/2010/04/15/broadband-internet-speeds...
  - ricardobeat 14y ago
    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.
  - nollidge 14y ago
    Actually, the U.S. is probably in the middle of the pack or worse when it comes to average connection speed.
ricardobeat 14y ago
Skeleton [1] is a nice lightweight alternative too, with very discreet default styles. [1] http://www.getskeleton.com http://www.getskeleton.com
Foomandoonian 14y ago
I've uploaded a screenshot for anyone who just wants a peek: http://decodering.com/post/41361083824/helium http://decodering.com/post/41361083824/helium (I tweaked the padding too.)
jrwoodruff 14y ago
I might just be missing it, but is this published under an open source license? I didn't see it noted anywhere...
QuantumGuy 14y ago
I could really see myself using this soon for a project I am working on. Glad someone made this.
ksec 14y ago
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 http://ink.sapo.pt/index.php Didn't even got to frontpage two weeks ago. And possibly many others.

125 points by johnx123-up 14y ago

kiwidrew 14y ago

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

mikk0j 14y ago
+1
johnx123-up 14y ago
https://fundrise.com/ https://fundrise.com/ found via http://dribbble.com/shots/908088-New-Fundrise-Homepage http://dribbble.com/shots/908088-New-Fundrise-Homepage
- Toshio 14y ago
  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-responsive.css https://s3.amazonaws.com/fundrise-content/css/master-respons...
  - johnx123-up 14y ago
    Your idea sounds great. (But I'm not the original author)
  - CornishPasty 14y ago
    > New homepage for http://fundrise.com http://fundrise.com launched today. It's fully responsive and built with Helium (http://github.com/cbrauckmuller/helium http://github.com/cbrauckmuller/helium), our in-house responsive framework.
- camus 14y ago
  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-what-is-an-online-public-offering- https://fundrise.desk.com/customer/portal/articles/601733-wh...

shocks 14y ago

Very interesting. An example site would be excellent.

dreen 14y ago

sounds cool, needs more demos

Kudos 14y ago

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

johnx123-up 14y ago
I'm not the original author. I don't know how you checked that. But... 1. https://github.com/cbrauckmuller/helium/blob/master/css/master.css https://github.com/cbrauckmuller/helium/blob/master/css/mast... 41kb (with whitespace) 2. YUI Minified 33kb 3. Minfied + gzip 5.8kb
- waxjar 14y ago
  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.
ricardobeat 14y ago
Fortunately CSS is logic-less, which means there isn't much to worry about bugs :)
- nwh 14y ago
  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.
mistagrrr 14y ago
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.

init0 14y ago

Add a demo plz!

jschuur 14y ago

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

1nvader 14y ago
That would be very helpfull. Couldn'd figure out how to see a demo of it in action.
size0618 14y ago
I'm not able to find the demo? Did you find it in the readme file?
- cbrauckmuller 14y ago
  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 https://fundrise.com
  - size0618 14y ago
    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.
  - walls 14y ago
    There's no point releasing something like this without functional examples, why would you do that in the first place?
jonaldomo 14y ago
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.

ulisesrmzroche 14y ago

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

monsterix 14y ago

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.

btipling 14y ago

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.

nwh 14y ago
In the US. In other countries, not so much.
- unicornporn 14y ago
  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.
  - nakkiel 14y ago
    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-2009-2010-the-top-10-countries/ http://www.techpark.net/2010/04/15/broadband-internet-speeds...
- ricardobeat 14y ago
  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.
- nollidge 14y ago
  Actually, the U.S. is probably in the middle of the pack or worse when it comes to average connection speed.

ricardobeat 14y ago

Skeleton [1] is a nice lightweight alternative too, with very discreet default styles. [1] http://www.getskeleton.com http://www.getskeleton.com

Foomandoonian 14y ago

I've uploaded a screenshot for anyone who just wants a peek: http://decodering.com/post/41361083824/helium http://decodering.com/post/41361083824/helium (I tweaked the padding too.)

jrwoodruff 14y ago

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

QuantumGuy 14y ago

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

ksec 14y ago

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 http://ink.sapo.pt/index.php Didn't even got to frontpage two weeks ago. And possibly many others.