Updating the subtheme variables.less file to include new Bootstrap framework variables. Compilation currently fails before this patch.

I copied over the variables.less file from the Boostrap framework, compared that with the variables.less file included in this Bootstrap theme, and made what appears to be the only theme customization, which is for the @icon-font-path variable. This patch has lots of changes to comments that were make in the framework's variables.less file.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

ShaunDychko’s picture

Status: Active » Needs review
FileSize
4.86 KB
markhalliwell’s picture

Status: Needs review » Postponed (maintainer needs more info)
Related issues: +#2164305: Update to 3.1.1, +#2166063: Variable @container-lg-desktop is undefined

I'm pretty sure this was taken care of in the related issues, I'll have to double check later (ps, we only update for actual releases... we won't chance bootstrap's HEAD as it changes too frequently).

clemens.tolboom’s picture

We ran into this bug today using 7.x-3.0

Checking http://cgit.drupalcode.org/bootstrap/tree/starterkits/less/less/variable... its content is bound to be in err later on

Why not change content into

// to change variable either override 
// or copy the content of ../bootstrap/less/variables.less into this file
@import "../bootstrap/less/variables.less";

That will be future proof and out of the box working.

mkhamash’s picture

I have uploaded a patch updating our variables.less to that of bootstrap v3.2.0 which is a stables release, and without these variable compiling will be not be possible, also I have added bootstrap comments.

As for clemens.tolboom suggestion to @import bootstrap variables.less file as it is , I have found that only @icon-font-path needs to be changed since it points to ../fonts/ and in our case we like it to point to ../bootstrap/fonts/, if this is handled I don't see a problem in this approach, but still this is a bad practice since you will not get errors when thing change and you have to fixes them in your sub-theme.

Also these changes may needs to be considered in our overrides.less and our HTML output, so this shouldn't make it to stable without checking those.

El Bandito’s picture

I also failed on compilation ( reporting undefined variables ). Chaning the import path to

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

allowed successful compilation, but there are obviously other issues referred to by mkhamash. I'll try his patch.

El Bandito’s picture

Priority: Normal » Major

The patch is for the dev version not the recommended release 7.x-3.0.

As the changes to the Bootstrap distribution mean that anyone downloading the recommended release of this module and following the Method 1 installation instructions ( non-CDN ) will fail when compiling the less files I'm marking this issue as 'Major'.

El Bandito’s picture

Mark.

I found that I had to revert to version 3.0.2 ( from https://github.com/twbs/bootstrap/releases/tag/v3.0.2 ) before I could successfully compile without getting undefined variable errors.

In #2 you say 'ps, we only update for actual releases.'. What constitutes a release ? Should I actually be using 3.0 as 3.2 doesn't work ?

Thanks

mkhamash’s picture

FileSize
10.11 KB

This is an update to the variables.less in bootstrap 7.x-3.1-beta2 or 7.x-3.x-dev to update the bootstrap variables to version 3.3.1.

clemens.tolboom’s picture

Status: Postponed (maintainer needs more info) » Needs review

This workflow is quite lame. I just got v3.3.1 and got blocked again.

Why not just instruct to copy over the my-theme/bootstrap/variables.less to my-theme/variables.less ?

Visually inspecting the diffs with

$ diff less/variables.less bootstrap/less/variables.less --side-by-side

I don't see important ones. ([edit]: apart from the missing variables[/edit])

Is there any reason to start from a module custom variables.less file?

clemens.tolboom’s picture

Hmmm I realized I'm talking about the 7.x-3.0 version above.

I still love to hear an answer to

Why not just instruct to copy over the my-theme/bootstrap/variables.less to my-theme/variables.less ?
Leelandra’s picture

Hi,
i am new to drupal so pls be kind if this is the wrong place to ask.

I came across this problem as i wanted to create a subtheme with the actual bootstrap source files and compile the styles.less file.
I'm not sure how to proceed - shall i use the variables.less file from your dev-branch or the original one from bootstrap?

I use drupal 7.34 with Bootstrap 7.x-3.0 as recommended.

As i use this drupal installation for my bachelor-thesis I need to find a solution rather urgend.

thx in advance!!

psegarel’s picture

@clemens.tolboom Thanks, copying the bootstrap variables seems to be the simplest solution yet! +1

dadderley’s picture

@clemens.tolboom
This is a great idea. Adding this instruction have would made this process so much easier for me.

I am just starting down the road with Bootstrap.
All was good (pretty much) until I came to compile the darned thing.
I was gettin this error:

dBook:less me_user$ lessc style.less > style.css
NameError: variable @link-hover-decoration is undefined in /Users/me_user/Sites/htdocs/ax-boot/sites/all/untitled folder/mytheme/bootstrap/less/scaffolding.less on line 55, column 22:
54     color: @link-hover-color;
55     text-decoration: @link-hover-decoration;
56   }

The error message is not all that intuitive.
Because this is my first stab at getting Bootstrap going and compiling Less, I was totally unsure of the process.

I looked in vain for proper instructions and finally solved the problem after watching this tutorial (https://www.youtube.com/watch?v=CiUvG5rW3rM).
At about the 5:50 mark the instructor cannot get it to compile.
He says the my-theme/variables.less is out of date so it will not compile and the my-theme/bootstrap/variables.less file should just be copied over.
Problem solved.

Sorry for being a complainer, but the documentation for getting Bootstrap going is pretty vague to say the least.

Also, the rather inexpensive CodeKit application makes this compiling process very easy for folks that do not enjoy hacking away with the command line. I got it to work without the app, it would have been so much easier with it.

markhalliwell’s picture

Status: Needs review » Postponed
Related issues: +#2261189: Add Drush support for creating sub-themes

This issue will need to be reevaluated once Drush support has been fully added. This method of duplicating the variables is tedious to maintain and I agree with @clemens.tolboom in #9.

clemens.tolboom’s picture

clemens.tolboom’s picture

@markcarver please add the instruction to replace variables.less with bootstraps version to https://www.drupal.org/node/1978010 so people won't run into lessc errors immediately.

EXISTING TEXT

Method 1: Bootstrap Source Files

Download and extract the Latest Bootstrap source into your new sub-theme. After it has been extracted, the folder should read bootstrap. If for whatever reason you have an additional bootstrap folder wrapping the the bootstrap folder (like: bootstrap/bootstrap), remove the wrapping bootstrap folder. You will not need to touch these files again. This allows the framework to be updated in the future.

NEW TEXT

Copy over the bootstrap/less/variables.less to less/variables.less then fix paths as stated in less/README.txt

EXISTING TEXT

Compile the ./less/style.less file. A new file should be generated as ./css/style.css.

Now, you will need to uncomment the lines under 'METHOD 1: Bootstrap Source' in your sub-theme's .info file (pertaining to this method).

Done.

  • markcarver committed 85b1e74 on 7.x-3.x
    Issue #2250349 by mkhamash, ShaunDychko: Add new variables to variables....
markhalliwell’s picture

Status: Postponed » Fixed

  • markcarver committed 019108b on 8.x-3.x
    Issue #2250349 by mkhamash, ShaunDychko: Add new variables to variables....
markhalliwell’s picture

Status: Fixed » Closed (won't fix)

I actually ended up entirely removing the "variables.less" file (which was duplicating the one from the framework) while working on #2466425: Update documentation.

Instead I created a variable-overrides.less file which is immediately imported after the Bootstrap Framework variables.less file.

You can read the new instructions here: http://drupal-bootstrap.org/api/bootstrap/starterkits%21less%21README.md...

clemens.tolboom’s picture

YEah.

This issue now has a 8.x commit in #18. Hope that was intended.

markhalliwell’s picture

Yes that was intended. We're attempting to keep the 7.x and 8.x branches as close as possible and this issue has to do with LESS/documentation... not Drupal specifics.