1

Thanks in advance for reading.

Using CDN, I am incorporating the following APIs / libraries into my project:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.min.js"></script>

<link rel="stylesheet/less" type="less" href="custom/main.less"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>

I am also importing jquery and less but not using CDN to do so.

The less files I was using before I added Jasny Bootstrap (above) worked fine; my main.less file imports all of the less variables and mixins from Bootstrap before importing the Jasny set. Main.less looks like this:

@import "less/bootstrap.less";
@import "jasny-variables.less";

@navmenu-width:    225px;

And when I implement the 'Off Canvas' component from Jasny Bootstrap, that also works fine; an off canvas menu appears and pushes all content to the right.

When I try to change some of the Jasny less variables however (either by adding them to my main.less file [as I've done above], or altering them directly in the jasny-variables.less file [which main.less imports from the same directory]), I'm not seeing any results.

Specifically I am trying to change the value of @navmenu-width to be less than the default. Regardless of what value I give it however, in either source, it won't change.

Suggestions?

Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
Vercingetorix
  • 253
  • 2
  • 12

1 Answers1

2

If you want to change jasny-bootstrap LESS variables, you need to download it's source (there's "download zip" button on the right there) and import all it's less files into into your main.less file.

There's jasny-bootstrap.less file that contains imports of all the other files. You need to include all these files in the exact same order into your main.less file but change any variables right after importing variables.less.

Or just import jasny-bootstrap.less, and add any changed variables right after @import "variables.less"; line right into that file.

If I understood you correctly, your code should look like this:

index.html:

<head>

  <link rel="stylesheet/less" type="less" href="custom/main.less"/>
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.7.4/less.min.js"></script>

</head>

as you see no links to bootstrap nor jasny-bootstrap css here, as we include that in the less below.

main.less:

@import "bootstrap/bootstrap.less";//jasny requires bootstrap to be included first
@import "jasny-bootstrap/variables.less";//jasny's variables, which we can overwrite below

//your variables go here
@navmenu-width:    225px;

//the rest of jasny less files below

// Core CSS
@import "grid-container-smooth.less";
@import "button-labels.less";
// Components
@import "nav-tab-alignment.less";
@import "navmenu.less";
@import "alerts-fixed.less";
// Components w/ JavaScript
@import "offcanvas.less";
@import "rowlink.less";
@import "fileinput.less";

//more of your own less directives go here
...

If you have included jasny-bootstrap.css in your html and after that you've included jasny-bootstrap.less in your less without the rest of jasny's .less files that might have been the reason the change to the variable didn't overwrite the definition from the pre-rendered CSS.

  1. Include bootstrap.less
  2. Include jasny-bootstrap/variables.less - that defines jasny's vars
  3. Overwrite the variabels with your values
  4. Include the rest of the jasny's less code to use your overwritten variables and render new CSS directives that will overwrite default bootstrap directives.

jasny-bootstrap source, together with the .less files can be downloaded from here: https://github.com/jasny/bootstrap

sEver
  • 1,948
  • 1
  • 16
  • 10
  • I already downloaded the `bootstrap.less` file directory and imported it before importing `jasny-variables.less` in my `main.less` file. From there I did exactly what you've said but still no luck. I will edit my original post to show you what I mean. – Vercingetorix Oct 04 '14 at 17:15
  • If you have these bootstrap.less and jasny-bootstrap.less files included into your main.less, then you don't need to include the cdn CSS versions into your html file. – sEver Oct 04 '14 at 17:17
  • I'm confused. If I don't include the CDN CSS library for Jasny, then the `off canvas` component doesn't work. I tried removing the `bootstrap.css` import and that doesn't seem to cause a problem. – Vercingetorix Oct 04 '14 at 17:23
  • Thank you for working with me. I did try what you've mentioned, however if I remove the Jasny CSS file from the header, then the responsiveness doesn't work correctly: The off canvas menu doesn't show up at all. BUT - I haven't imported the other `*.less` files from Jasny that you've indicated. Where did you find them please? – Vercingetorix Oct 04 '14 at 17:45
  • Yeah, it wont work until you import them. They can be downloaded from here: https://github.com/jasny/bootstrap :) – sEver Oct 04 '14 at 17:50
  • Using less.js within the browser for production stuff is generally frowned upon. Do the compilation once and then use the resulting CSS file instead. – cvrebert Oct 05 '14 at 08:19