Using Bootstrap with Sugarcube

Question

Hello,

I found this old thread (http://twinery.org/questions/348/can-i-use-css-frameworks-like-bootstrap-or-w3-css?show=348#q348) that helped me to know how to import bootstrap css and js on Twine.

Later I found that is much easier using importStyles and importScripts functions.

The problem I have is mixing the default Sugarcube CSS with Bootstrap. Some results and behavoiurs are weird because that.  Is it possible to reset Sugarcube CSS or any right way to do that?

Thanks in advance,

Answer 1

Bootstrap makes certain assumptions about the HTML structure of the page (eg. that the main area of the page will be assigned the container CSS class) and these assumptions aren't correct when it comes to SugarCube's default structure.

I suggest using the StoryInterface special passage to define your own custom HTML structure, so that it will be more compatible with the one that Bootstrap expects. Something like the following may work. (untested)

<div id="passages" class="container">
</div>

 

Comments

After reading Sugarcube's doc and few threads about StoryInterface, I'm stuck trying to figure out how it works. Any chance to see a minimal example?

---

I did give an example of possible content for your StoryInterface special passage, it shows the content of the current Passage within a default Bootstrap container element. It allows you to use other Bootstrap elements within the content of the current passage like so..

<div class="row">
  <div class="col-sm-4">First of three columns</div>
  <div class="col-sm-4">Second of three columns</div>
  <div class="col-sm-4">Third of three columns</div>
</div>
<button type="button" class="btn btn-primary" data-passage="Library">Next</button>

.. the above shows a three column table and a primary button that forwards the Reader on the the Library Passage when selected.

It's hard to be more specific because I don't know exactly how you want your replacement Bootstrap based User Interface to look.

---

Oh my... that was so much easier than I expected! Solved and sorry for wasting your time!