Port it to Haml/Sass about html5-boilerplate HOT 25 CLOSED

himmel looks to have just completed this:
http://github.com/himmel/html5-boilerplate/commit/d514774ad1c59702c66e1169927908cc7d8fc482

he recommends maintaining them in a branch:
" I think the best way to integrate these would be to create another remote branch on html5-boilerplate repo perhaps called haml_sass (or similar)"

from html5-boilerplate.

Very nice! I was going to ask about this.

from html5-boilerplate.

nice ... agreed with the branch that way normal way and Sass/Scss can be kept separate and debated about there

from html5-boilerplate.

I agree as well. I think haml/sass need to be in a separate branch.

from html5-boilerplate.

I started work on a compass extension over here http://github.com/sporkd/compass-html5-boilerplate. Most of the SASS/SCSS is already done, just needs the haml and javascript to be ported over as templates now.

from html5-boilerplate.

Geez sporkd I was gonna do this, and seems like you have done almost all of it :) I will take a look and thanks for this!

from html5-boilerplate.

nice port sporkd! I vote to get this as a dev version (or full version) in the project

from html5-boilerplate.

Thanks guys. Most people are probably not going to be using compass, so it should stay in it's own repo. But could use help keeping it up to date and making improvements. So fork and send patch requests my way. Peter

from html5-boilerplate.

I think (personally) it'd be great and more efficient if we can work in the compass branch and then merge the final css into the main branch ... but I'm not an expert of git workflows for something like this.

Either way I think the original css was made via SASS so why not just bring this in as part of a dev branch

from html5-boilerplate.

is there a possibility that this SASS port will be using the new syntax? the one using curly brackets like normal CSS files, i mean..

from html5-boilerplate.

@rizkysysazuli,
Yup sporkd's compass port uses scss, which is badass: http://github.com/sporkd/compass-html5-boilerplate/tree/master/stylesheets/

from html5-boilerplate.

nice.. will check it out..

from html5-boilerplate.

whether you prefer SASS or SCSS the sass-convert tool (comes with compass) can handle converting between SASS, SCSS, and CSS.

Meanwhile I've been keeping my fork up to date with paulirish/html5-boilerplate

http://github.com/himmel/html5-boilerplate

from html5-boilerplate.

would love to see a php or javascript only pre-processor like LESS or xCSS as cloud sites don't support Ruby as far as I can tell...

from html5-boilerplate.

"cloud sites" dont support ruby? Less is ruby and Less.js is node.js.. which has less support i'm sure.

I have no problems if someone wants to port this to xCSS, but IMHO the scene there is too small.

@himmel, Good looks on your fork.

from html5-boilerplate.

how about using something like lessjs and do it all in the browser?
http://github.com/cloudhead/less.js

from html5-boilerplate.

This deserves a real blog post but less.js doesnt belong in the browser. It was written to also be run on node.js, which is where it should live.

Using an abstraction so you can write shorter stylesheets doesn't make sense if you have to include 30kb of javascript to transform said stylesheet into what the browser needs. Don't penalize every single visitor of your site just for your convenience.
Serverside solutions, on the other hand, are slim and sleek for your users, and I have no qualms with.

from html5-boilerplate.

Very good point. Thanks for the reply.

from html5-boilerplate.

:-) I'm interested in using the boiler plate to make a WordPress theme, which I would use a preprocessor to compile the css. My plan is to have it compile to a .css file on settings changes in the admin only, rather then have the server compile it on demand. xCSS looks promising in that, but like you said, it's support/user base is smaller then the Ruby preprocessors. You've convinced me however that browser js isn't a good option and I'm sure my server doesn't support node.js (but I'll test it), but less does have a php version I might go with. Thanks! I hope to have time this weekend to work on it.

(on a separate note, I think the lure for a less.js is that the .less should be easier to maintain then the .css as apposed to wanting a shorter .css file size. Like you said, smaller file size + 30kb doesn't make sense.)

from html5-boilerplate.

I think you're missing the point. Here's what I do. I write SASS instead of CSS.

When I'm developing on my local box I have a file watcher that generates CSS files whenever I make changes to the SASS file.

When I deploy to production, part of the deploy process is to generate CSS from the SASS source files. So the production server never uses SASS files, simply uses the generated ones. There's no need for less.js or anything else to transform the source files realtime, just do it as part of the deploy process and you won't have to worry about all that.

from html5-boilerplate.

Oh, yes, thank you. I was missing what the normal work flow looked like. That'll help me quite a bit :-)

My project has slightly different concerns which don't really belong here, but I just wanted to thank you for that.

from html5-boilerplate.

Good point. If you create a stand-alone compass project, you can just run compass watch yourproject and it will automatically watch and compile your sass/scss. Then like himmel says, just push your css to production. I'll update my readme so that is more clear.

For a good discussion on compass/sass/less/etc., see the comments on this epic blog post http://nathanborror.com/posts/2009/nov/30/sass-isnt-me/

As for Ruby in the cloud... how bout Heroku? Or Amazon EC2 lets you configure whatever you want. Heck, even DreamHost has supported Rails for years. Cheers!

from html5-boilerplate.

Amazing, having this great template directly available in Sass/Haml is going to make life a lot easier when working on Rails projects.

from html5-boilerplate.

For you rails users out there... I recently added some helpers that pay homage to Paul's conditional IE body tags. The nice thing is you can pass in additional attributes without typing them 5 times for each IE body tag. And it works on your html tag too.

http://github.com/sporkd/compass-html5-boilerplate/blob/master/lib/app/helpers/html5_boilerplate_helper.rb

Example HAML usage:

Body Tag

- ie_body :class => "one-col" do
  #container

Generates:

<!--[if lt IE 7 ]> <body class="ie6 one-col"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7 one-col"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8 one-col"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9 one-col"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<body class='one-col'>
  <!--<![endif]-->
  <div id='container'></div>
</body>

Html Tag

- ie_html :lang => 'en', :class => 'no-js' do
  %head
  %body
    #container

Generates:

<!--[if lt IE 7 ]> <html class="ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9 no-js" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html class='no-js' lang='en'>
  <!--<![endif]-->
  <head></head>
  <body>
    <div id='container'></div>
  </body>
</html>

Enjoy!

from html5-boilerplate.

closing this ticket as sporkd's fork carries this torch very well.
it's linked up here: http://github.com/paulirish/html5-boilerplate/wiki

from html5-boilerplate.