Skip to content

H5BP + Twitter Bootstrap integration #936

Closed
necolas opened this Issue Jan 25, 2012 · 37 comments
@necolas
H5BP member
necolas commented Jan 25, 2012

For the release of version 2.5, we'd like to have a couple of options to help people automatically integrate the Twitter Bootstrap toolkit into HTML5 Boilerplate if that is something they'd like to do.

  1. @verekia is planning to build this optional functionality into Initializr

  2. @mklabs has put together a simple shell script to get you started - https://gist.github.com/1422879

There are a couple of minor questions around whether or not H5BP's index.html file should be updated by the integration tools to include references to all the Bootstrap JS files.

@brendanheyu

Would this be bootstrap v2? Drops on Jan 31st I hear...

@necolas
H5BP member
necolas commented Jan 25, 2012

Definitely.

@varemenos

i honestly cant wait to test/use it .
About the bootstrap js includes, you could make the shell script check if you want bootstrap enabled and switch the current index.html file with a new index.html file that includes the bootstrap js files

@kblomqvist

+1 what a coincidence... I was just about to start doing this at previous weekend :)

@maxhoffmann

+1 if it is an option it would be awesome. i wanted to integrate twitter bootstrap in my next project anyway.. ;)

@necolas
H5BP member
necolas commented Jan 25, 2012

It would be great if some of you could road test the shell script - https://gist.github.com/1422879 - and report back here with any problems you had or things you think it failed to do. That would really help. Thanks.

@maxhoffmann

Tested and works for me on Mac OSX 10.6.8. I will check each file in detail later, but for now i miss the bootstrap js files. It would be cool to download all bootstrap js files to js/mylibs and/or concatenated to plugins.js. Even better: having a choice for each bootstrap plugin, but that would expand the install process even more.

@necolas
H5BP member
necolas commented Jan 25, 2012

@mklabs Have you got time to look at updating your shell script to pull in the Bootstrap JS and Docs too?

@maxhoffmann

Okay second try and got some error messages:

  1. Add less as package.json's dependency (npm install less --save)
    npm WARN Invalid range in engines.node. Please see npm help json ~v0.4.11
    less@1.2.1 ../node_modules/less

  2. Running a first compile step to generate test2/css/bootstrap.css
    npm ERR! Failed to parse json
    npm ERR! Unexpected end of input
    npm ERR! File: /Users/Max/test2/package.json
    npm ERR! JSON.parse Failed to parse package.json data.
    npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.
    npm ERR! JSON.parse
    npm ERR! JSON.parse This is not a bug in npm.
    npm ERR! JSON.parse Tell the package author to fix their package.json file.
    npm ERR!
    npm ERR! System Darwin 10.8.0
    npm ERR! command "node" "/usr/bin/npm" "run-script" "less"
    npm ERR! cwd /Users/Max/test2
    npm ERR! node -v v0.4.11
    npm ERR! npm -v 1.0.17
    npm ERR!
    npm ERR! Additional logging details can be found in:
    npm ERR! /Users/Max/test2/npm-debug.log
    npm not ok

@mklabs
H5BP member
mklabs commented Jan 25, 2012

Hey guys,

Yep, one thing that this gist is not handling is the fetch of bootstap's js plugins.

It would be cool to download all bootstrap js files to js/mylibs and/or concatenated to plugins.js. Even better: having a choice for each bootstrap plugin, but that would expand the install process even more.

As @intuive mentioned earlier, that is basically how I would approach thismatter. I was thinking about something really similar but didn't find time to investigate further.

One thing that'd be great is to have this script to prompt the user for each of the bootstrap's plugin, depending on the Y/N response then curl the corresponding script.

curl https://raw.github.com/twitter/bootstrap/master/js/bootstrap-modal.js >> js/libs/plugins.js

So yes, I agree with @intuive . That approach seems a good one.

That way, each plugins would be fetched and concat'd to one big script file. Using plugins.js wouldn't require any markup change and would potentially allow us to hook these scripts into the overall build script.

As much as I love bash scripting (with my fairly limited knowledge in this), this won't work on windows out of the box. I'd like to work on a node port and be able to use it regardless of the dev platform.

@intuive Thanks for testing this out and the feedback, that really helps. I've just tested this script on a node 0.4.12 install, that seems to be ok. Same for another test on a node 0.6.7. That's actually a little bit weird since less have its package.json engine prop set to > 0.4, so that normally would be ok for you too (0.4.11). I'll investigate a little bit further.

@necolas Sure, I'll iterate on this gist fairly soon and have at least the js plugins fetch done. Not sure how to handle the Docs though.

@mklabs
H5BP member
mklabs commented Jan 25, 2012

Oh, and one thing that this script is not handling very well is a command failure.

Basically any cmd could potentially fail, it that's so the entire script should exit early on. Now, if any command got an error, the rest of the script is happy and continues running. Each command should check the status code and exit the overall script properly.

@necolas
H5BP member
necolas commented Jan 25, 2012

FYI, we don't have /mylibs in the JS anymore.

@albybarber

I thought that Bootstrap v2 had already landed, http://markdotto.com/bs2/docs/index.html

@necolas
H5BP member
necolas commented Jan 25, 2012

It hasn't. That's a preview of the new docs - hosted on Mark's site - for testing purposes.

@bumpux
bumpux commented Jan 26, 2012

I have the same error as @intuitive, immediately folllowing the confirm before npm init ("Is this OK? (yes)")

Is this ok? (yes) 
You may want to tweak the package.json file, only name/version are mandatory.

  10. Add less as package.json's dependency (npm install less --save)

npm WARN Invalid range in engines.node.  Please see `npm help json` ~v0.4.11
less@1.2.1 ./node_modules/less 

  11. Add an npm script to trigger the less build.


  12. Leaving out temporary dirs (.tmp/). You may want to remove this dir or let it be so that
  next builds will pull instead of clones (significantly faster).

  This is relative to the current working directory though: /Users/XD/G/Code


  13. Running a first compile step to generate testsite/css/bootstrap.css

npm ERR! Failed to parse json
npm ERR! Unexpected token ILLEGAL
npm ERR! File: /Users/XD/G/Code/testsite/package.json
npm ERR! JSON.parse Failed to parse package.json data.
npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.
npm ERR! JSON.parse 
npm ERR! JSON.parse This is not a bug in npm.
npm ERR! JSON.parse Tell the package author to fix their package.json file.
npm ERR! 
npm ERR! System Darwin 10.8.0
npm ERR! command "node" "/usr/bin/npm" "run-script" "less"
npm ERR! cwd /Users/XD/G/Code/testsite
npm ERR! node -v v0.4.11
npm ERR! npm -v 1.0.17
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/XD/G/Code/testsite/npm-debug.log
npm not ok
@Merg1255

Hi guys, thanks for this great lib! One request about this issue, plz try to keep a simple structure on the customized html file, that should definately include the newest bootstrap version. Also, the website needs an update to reflect the current changes.

@necolas
H5BP member
necolas commented Jan 27, 2012

@Merg1255 The website will be updated when we have a new stable release available.

@mklabs
H5BP member
mklabs commented Jan 27, 2012

I indeed have the same error than @intuive and @bumpux, my bad. I first thought it was an error on the npm install less, it's actually an issue with the package.json generated. That seems to be specific on osx and works fine on my ubuntu vm (where it was developped in the first place).

The awk command used seems to behave slightly differently between the two systems. I've replaced this with an attempt to use sed instead, but still have some issue on osx. Needs a little bit more work.

That being said, the gist will now prompt user (right before the npm init prompts) for each bootstrap's js plugins and have them concat'd into js/plugins.js if the user types y or yep (default is y).

Also added ability to switch branch other than master, not exposed to the command line though, these are two variables one may change at the top of the script.

@kaelig
kaelig commented Jan 27, 2012

Just so you know, HTML5BP's CSS is going to be generated by the Sass preprocessor. Hope it won't be a problem since TWBS is in Less.

@necolas
H5BP member
necolas commented Jan 27, 2012

HTML5BP's CSS is going to be generated by the Sass preprocessor.

That's not happening for now.

@kaelig
kaelig commented Jan 27, 2012

Thanks, I thought the switch was imminent.

@bumpux
bumpux commented Jan 28, 2012

Thanks @mklabs. I reinstalled and ran today. No npm ERRs this time and everything seems OK except I still get the WARN below twice, once immediately after 10. and again right after 13:

npm WARN Invalid range in engines.node. Please see `npm help json` ~v0.4.11
less@1.2.1 ./node_modules/less

@necolas necolas referenced this issue in twbs/bootstrap Jan 29, 2012
Closed

[2.0-wip] Make not working properly? #1323

@fernandoacorreia

Is there a work in progress on this issue? Maybe some alfa code I could try? I'm setting up a project right now and I'm trying to integrate H5BP with Bootstrap 2.0. I'm willing to do some beta-testing.

@mklabs
H5BP member
mklabs commented Feb 3, 2012

Is there a work in progress on this issue?

There is. I'm slowly editing the gist script thanks to all the great feedback on this thread or the gist comments (so thank you for that @fernandoacorreia too). I'll give it a closer look this week-end and try to address the few issues you pointed out.

That being said, if while playing with it, you bring some improvements / fixes , I'll be more than happy to backport them in the original gist :) Thanks again.

@fernandoacorreia

Your script is functional. I've submitted a patch related to recent updates at the Bootstrap and html5-boilerplate projects.

But what I'm trying to find out is some guidance on what to do with H5BP's CSS when using Bootstrap.

Your script sets aside H5BP's default CSS in favor of Boilerplate's. But as @necolas points out, there might be some very useful tidbits at H5BP's that should somehow be integrated.

I think ideally the resolution to this issue should address that, possibly by dividing H5BP's CSS source file into separate files, some of which would be replaced by Bootstrap's CSS, and some that could be integrated with it.

@necolas
H5BP member
necolas commented Feb 3, 2012

Thanks for helping out with this! Nice one.

I get what you're saying but I think simplicity is key. Trying to automatically merge different starting CSS is likely to cause issues and unexpected outcomes for people who are expecting Bootstrap to function as it would outside of an H5BP integration.

For now, I think we can probably focus on automating an outcome that is similar to manually copying the bootstrap directories into H5BP and linking them up in index.html...and leaving the H5BP CSS set aside. How does that sound to you?

@bumpux
bumpux commented Feb 3, 2012

Good to me :-)

leaving the H5BP CSS set aside. How does that sound to you?

@fernandoacorreia

@necolas, as a newcomer to both Bootstrap and H5BP, my initial feeling is that by not using H5BP's CSS I'd be losing on "the result of much research on cross-browser styling". One such example seems to be "Correct overflow not hidden in IE9": svg:not(:root) { overflow: hidden; }

I've seen a lot of the tricks from H5BP's CSS present on Bootstrap's, though, and after all, Bootstrap is supposed to be a framework to build upon, especially in respect to theming.

In the end, the solution you propose seems to make sense. I'd only add that it would be great to have an expert take a look at H5BP's CSS and point at pieces that would be useful in addition to Bootstrap's. You have mentioned, for instance, "print styles and some of the CSS helper classes".

@lhwparis
lhwparis commented Feb 8, 2012

I think its a problem that bootstrap is using a reset.css approach and h5bp is using normalize.css so you ll ever have to deal with two very different basic-css settings if you will use this projects together. one way will be to remove normalize from h5bp and use the twitter bootstrap reset.css because its easier as the other way round (use bootstrap with normalize). in my oppinion there should be only one base css in your project not a reset for boostrap and normalize for other things.

@necolas
H5BP member
necolas commented Feb 8, 2012

Bootstrap 2.0 is based on normalize.css and no longer uses a reset.
Also, the idea is not to combine the CSS from both projects. See this previous comment

@lhwparis
lhwparis commented Feb 8, 2012

Thanks @necolas for that information.
What is the benefit of not combining the css if you plan to make it simple to integrate bootstrap in upcoming version of h5bp. h5bp css is 90% normalize.css why we should have this twice in our projects?

@MitchellMcKenna

I just wanted to share; http://initializr.com provides an easy way to download H5BP 3.0 + Bootstrap 2.0. Their solution is to opt for twitter bootstrap's reset.css over normalize.css.

@necolas
H5BP member
necolas commented Feb 9, 2012

@MitchellMcKenna Initializr is mentioned in the opening comment and we worked with Jonathan to scope out how the CSS integration should work in Initializr. FYI, Bootstrap 2.0 doesn't actually use a reset anymore, it too is based on normalize.

@lhwparis
lhwparis commented Feb 9, 2012

Sounds realy good thanks necolas. bootstrap 2.0 is no more using reset but it is using a custom normalize.css version. would be great if we find a way to get that two normalize approaches together without destroying anything in boostrap

@necolas
H5BP member
necolas commented Feb 23, 2012

OK so Initializr already provides this functionality. If the shell script effort has ground to a halt, I might close this issue.

@mklabs
H5BP member
mklabs commented Feb 23, 2012

I think you can close this issue @necolas, the shell script won't change drastically anymore.

I might implement a grunt init task / command for the node build script repo, with optionnal twbootstrap integration like the shell script does, but I guess that's not part of this issue :p

@necolas
H5BP member
necolas commented Feb 23, 2012

Thanks. I'll add a link to the script in the wiki

@necolas necolas closed this Feb 23, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.