Question

I am using this extension: Yii-Bootstrap, along with this less extension: less

In my main.php config file I have:

'components'=>array(
  'less'=>array(
    'class'=>'ext.less.components.LessCompiler',
    'forceCompile'=>true, // indicates whether to force compiling
    //'compress'=>false, // indicates whether to compress compiled CSS
    //'debug'=>false, // indicates whether to enable compiler debugging mode
    'paths'=>array(
      'less/style.less'=>'css/style.css',
    ),
  ),
  'bootstrap'=>array(
      'class'=>'ext.bootstrap.components.Bootstrap',
      'responsiveCss'=>true,
  ),

The bootstrappy goodness works. My problem is that I’m trying to modify the variables in protected\extensions\bootstrap\lib\bootstrap\less\variables.less:

@gridGutterWidth:         0px;
@gridGutterWidth1200:     0px;
@gridGutterWidth768:      0px;

However, these changes don’t reflect anywhere on the site, even though I’m editing variables.less directly. This leads me to believe that it’s not variables.less that I must edit.

Any idea how I can change the gutters?

UPDATE: I was able to edit the following file and see changes:

protected\extensions\bootstrap\assets\css\bootstrap-responsive.css

I changed:

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 30px;
}

To:

[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 0px;
}

This now takes away the gutters. But doesn’t quite solve my problem. I wanted this to all happen dynamically via YII and LESS. How do I do that?

Answer 1

The solution was to set responsiveCss to false:

'bootstrap'=>array(
  'class'=>'ext.bootstrap.components.Bootstrap',
  'responsiveCss'=> false,
),

And then to change my style.less file to include:

// Import the Bootstrap mixins, operations and functions so that you can use them in this file.
@import "../protected/extensions/bootstrap/lib/bootstrap/less/mixins.less";
@import "../protected/extensions/bootstrap/lib/bootstrap/less/variables.less";
@import "../protected/extensions/bootstrap/lib/bootstrap/less/scaffolding.less";
@import "../protected/extensions/bootstrap/lib/bootstrap/less/responsive.less";

The confusion came in with “responsiveCss”, which wasn’t clearly explained (anywhere). Basically this will copy the css files from protected\extensions\bootstrap\assets\css\ and include it into your file, with no modifications. What I mention above, is how you would move from the “standard” version, to this “customizable” way.

Hope that helps someone, because it wasted a lot of my time, not to mention the time I have to spend redoing css now.