Any interest in integrating Twitter Bootstrap?

[nreckart]

I'm working with a project that is using Twitter Bootstrap as the base CSS framework. I'd like to be able to use Bootstrap in Mercury modals, but currently the styles for the two clash. Thought I'd check to see if anyone else was interested in the same thing.

I'm not suggesting replacing Mercury modals with Bootstrap modals, although that is also an option. What I'm looking for is the ability to use Bootstrap form styles, buttons, tabs, pills, etc., within the content of a Mercury modal (or even panel).

I'd be happy to start the work and submit a pull request if there's interest. Thoughts?

[jejacks0n]

That would be awesome! We've actually talked about doing that, but my time has been limited (and I've been sick for the past week).

• Jeremy On Feb 23, 2012, at 1:00 PM, Nathan Reckart wrote:

I'm working with a project that is using Twitter Bootstrap as the base CSS framework. I'd like to be able to use Bootstrap in Mercury modals, but currently the styles for the two clash. Thought I'd check to see if anyone else was interested in the same thing.

I'm not suggesting replacing Mercury modals with Bootstrap modals, although that is also an option. What I'm looking for is the ability to use Bootstrap form styles, buttons, tabs, pills, etc., within the content of a Mercury modal (or even panel).

I'd be happy to start the work and submit a pull request if there's interest. Thoughts?

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/163

[gvarela]

I would prefer this to be a plugin or extension. I am using a different css framework based on compass and would prefer to not deal with collisions. Mercury shouldn't have a big dependency like bootstrap.

[jejacks0n]

Yeah, I'm picturing something like changing the classes/structure of the modals / lightviews to be more in line with the bootstrap stuff.. if you comment out, or don't include one mercury css file, then it will pick up stuff from the bootstrap, or at least be mixed in nicely.. this is a hard thing to deal with, right? cause some people want it to work well with things like formtastic, or simpleform.. any ideas on how to approach this?

On Feb 23, 2012, at 4:21 PM, Gabe Varela wrote:

I would prefer this to be a plugin or extension. I am using compass and not less. Mercury shouldn't have a big dependency like bootstrap.

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/163#issuecomment-4147980

[gvarela]

I like the idea of being able to selectively include the CSS. Maybe we just need to come up with a logical breakdown for the styles.

Gabe Varela 303-638-6576

On Feb 23, 2012, at 4:40 PM, Jeremy Jacksonreply@reply.github.com wrote:

Yeah, I'm picturing something like changing the classes/structure of the modals / lightviews to be more in line with the bootstrap stuff.. if you comment out, or don't include one mercury css file, then it will pick up stuff from the bootstrap, or at least be mixed in nicely.. this is a hard thing to deal with, right? cause some people want it to work well with things like formtastic, or simpleform.. any ideas on how to approach this?

On Feb 23, 2012, at 4:21 PM, Gabe Varela wrote:

I would prefer this to be a plugin or extension. I am using compass and not less. Mercury shouldn't have a big dependency like bootstrap.

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/163#issuecomment-4147980

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/163#issuecomment-4148320

[jejacks0n]

It's easy with JavaScript -- just write a shim, but CSS has too much to do with the markup too.

Thinking on it.

On Feb 23, 2012, at 5:05 PM, Gabe Varelareply@reply.github.com wrote:

I like the idea of being able to selectively include the CSS. Maybe we just need to come up with a logical breakdown for the styles.

Gabe Varela 303-638-6576

On Feb 23, 2012, at 4:40 PM, Jeremy Jacksonreply@reply.github.com wrote:

Yeah, I'm picturing something like changing the classes/structure of the modals / lightviews to be more in line with the bootstrap stuff.. if you comment out, or don't include one mercury css file, then it will pick up stuff from the bootstrap, or at least be mixed in nicely.. this is a hard thing to deal with, right? cause some people want it to work well with things like formtastic, or simpleform.. any ideas on how to approach this?

On Feb 23, 2012, at 4:21 PM, Gabe Varela wrote:

I would prefer this to be a plugin or extension. I am using compass and not less. Mercury shouldn't have a big dependency like bootstrap.

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/163#issuecomment-4147980

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/163#issuecomment-4148320

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/163#issuecomment-4148686

[gvarela]

Well an obvious one would be modal, dialog and panel contents. If you are using formtastic and have your own styles then don't include CSS relating to the default forms in those.

It gets harder outside of that I agree.

Gabe Varela 303-638-6576

On Feb 23, 2012, at 6:32 PM, Jeremy Jacksonreply@reply.github.com wrote:

It's easy with JavaScript -- just write a shim, but CSS has too much to do with the markup too.

Thinking on it.

On Feb 23, 2012, at 5:05 PM, Gabe Varelareply@reply.github.com wrote:

I like the idea of being able to selectively include the CSS. Maybe we just need to come up with a logical breakdown for the styles.

Gabe Varela 303-638-6576

On Feb 23, 2012, at 4:40 PM, Jeremy Jacksonreply@reply.github.com wrote:

Yeah, I'm picturing something like changing the classes/structure of the modals / lightviews to be more in line with the bootstrap stuff.. if you comment out, or don't include one mercury css file, then it will pick up stuff from the bootstrap, or at least be mixed in nicely.. this is a hard thing to deal with, right? cause some people want it to work well with things like formtastic, or simpleform.. any ideas on how to approach this?

On Feb 23, 2012, at 4:21 PM, Gabe Varela wrote:

I would prefer this to be a plugin or extension. I am using compass and not less. Mercury shouldn't have a big dependency like bootstrap.

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/163#issuecomment-4147980

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/163#issuecomment-4148320

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/163#issuecomment-4148686

---

Reply to this email directly or view it on GitHub: https://github.com/jejacks0n/mercury/issues/163#issuecomment-4149781

[nreckart]

My immediate requirement is to be able to have Mercury and Bootstrap play nicely together. To that end, I've tried a couple different options to get this ball rolling.

Option 1 - Integrate Bootstrap directly into Mercury: https://github.com/nreckart/mercury/tree/wip/twitter-bootstrap

This requires Bootstrap to be included as a dependency, which I understand is undesirable to some. I mainly did it to get an idea of what is required to get Bootstrap and Mercury to play well together. The built-in link, media, table, and html editor modals were rewritten to conform to Bootstrap's style.

Option 2 - Namespace the Mercury form styles into a class: https://github.com/nreckart/mercury/tree/wip/form-styles

The main source of clashing between Bootstrap and Mercury is with respect to the global form styles that both declare. By namespacing the Mercury form styles under a 'mercury-form' class, we remove the clashing.

Option 2 is the simplest, with respect to Mercury, and puts all the work on the host app to override/customize modals as necessary. It does not inject a dependency on Bootstrap.

I wasn't sure how to go about setting things up so that you could selectively include/exclude particular Mercury stylesheets. Ideally, I would like to tell Mercury not to include form.css (newly created in option 2) in my app. But since I wasn't sure how to go about that, I just declare a new 'custom-mercury-form' class and don't use the main 'mercury-form' class.

I also wasn't sure about how to go about making this stuff a plugin/extension. Thoughts and suggestions are welcome.

I personally think Mercury could benefit from integrating Bootstrap directly as a dependency, but I understand that some would not want that. Plus, I'm biased since we're already using Bootstrap. Ha. But as long as the two can play nicely together, I'm all for whatever solution works best for the majority.

[jocubeit]

+1 for having Mercury play nicely with Twitter Bootstrap 2.0.1.

I'm currently trailing Aloha with Bootstrap and it too has issues because some styles fall through to Bootstrap (e.g. table).

I too am biased in that I'm already using Bootstrap, however I agree that Option 2 is the more desirable, and responsible way to handle this.

[gvarela]

I agree option #2 is the way to go.

[jejacks0n]

Cheers.. I'm closing this since it's related. @nreckart, you may want to add something to the wiki about this? That would be awesome. =)

[nreckart]

Added a new wiki page, Integrating Mercury with CSS Frameworks.

[jocubeit]

Nice write-up @nreckart.

[unikitty37]

The wiki documentation seems to have been moved to https://github.com/jejacks0n/mercury/wiki/Mercury-&-Twitter-Bootstrap — just as a reference for anybody else trying to get there from here :)