Forums

Converting Twitter Bootstrap layout to Concrete5

Permalink
I have a layout created in Twitter Bootstrap. I want to use it with Concrete, so I need to adapt it.

As I have learnt about Concrete 5.5.0, Bootstrap is included, but the style tags typical for Bootstrap needs to be wrapped using class 'ccm-ui'. Some documentation about this problem here:
http://www.concrete5.org/documentation/developers/system/style-guid...

The problem is that the design gets totally messed up. This is an example I have tried changing:
https://github.com/twitter/bootstrap/blob/master/examples/container-...

If you change this
<div class="container">
      <div class="content">
        <div class="page-header">
          <h1>Page name <small>Supporting text or tagline</small></h1>
        </div>
        <div class="row">
          <div class="span10">
            <h2>Main content</h2>
          </div>
          <div class="span4">
            <h3>Secondary content</h3>
          </div>
        </div>
      </div>
      <footer>
Viewing 15 lines of 18 lines. View entire code block.


to this:
<div class="ccm-ui container">
      <div class="ccm-ui content">
        <div class="ccm-ui page-header">
          <h1>Page name <small>Supporting text or tagline</small></h1>
        </div>
        <div class="ccm-ui row">
          <div class="ccm-ui span10">
            <h2>Main content</h2>
          </div>
          <div class="ccm-ui span4">
            <h3>Secondary content</h3>
          </div>
        </div>
      </div>
      <footer>
Viewing 15 lines of 18 lines. View entire code block.


Any suggestions? Have I misunderstood something?
 
Steevb replied on at Permalink Reply
Steevb
I don't think you need wrap any bootstrap stuff in your theme.

The link you gave is about 'add-ons'.

My theme is fine in C5.5 with no wrapping, only a couple of my styles bleed into the dashboard drop down.
glockops replied on at Permalink Reply
glockops
Probably won't help your issue, but you should only need to include ccm-ui in an upper level wrapper. It doesn't need to be on every class.

I've noticed that not all of bootstrap is included in concrete5's version of it.

Also, the concrete5 version of bootstrap will only load if it needs to (e.g. if toolbar is displayed, etc), so be sure to actually call it from your theme.
mkly replied on at Permalink Reply
mkly
I would just include your own bootstrap files. The C5 one is not the standard one AFAIK.