Bootstrap source version is

The three columns are displayed correctly only on low resolutions.

widowed.png: 1024x768 OK
fullscreen.png: 1600x1400 the third column is not shown correctly

If I use CDN is all ok...

fullscreen.png67.3 KBnonzod
widowed.png209.09 KBnonzod
Members fund testing for the Drupal project. Drupal Association Learn more


Jorge Navarro’s picture

I have the same problem. Sidebars are not displayed correctly. With Firebug I see that the problem comes from the percentages.

markcarver’s picture

Project: Bootstrap » Less CSS Preprocessor
Version: 7.x-2.x-dev » 7.x-3.0-rc1
Component: Code » Miscellaneous
Category: bug » support

Well the issue doesn't lie with the Bootstrap project, moving to LESS.... even though it's probably not that either.

I'll go ahead and the same thing that Corey has said in the past with other similar issues:

The problem probably lies with the lessphp library not compiling the source correctly.

FWIW: I always use a local preprocessor to avoid the dependency on the LESS module (also helps reduce the amount of work the server has to do on cache clears btw).

markcarver’s picture

PS, not dissing the LESS module, it has it's use-cases :) I love it and use it occasionally. Corey has done an amazing job!

nonzod’s picture

A workaround is using 16 columns:


// Default 940px grid
// -------------------------
@gridColumns:             16;
@gridColumnWidth:         40px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

// 1200px min
@gridColumnWidth1200:     50px;
@gridGutterWidth1200:     25px;
@gridRowWidth1200:        (@gridColumns * @gridColumnWidth1200) + (@gridGutterWidth1200 * (@gridColumns - 1));

// 768px-979px
@gridColumnWidth768:      36px;
@gridGutterWidth768:      10px;
@gridRowWidth768:         (@gridColumns * @gridColumnWidth768) + (@gridGutterWidth768 * (@gridColumns - 1));
corey.aufang’s picture

Component: Miscellaneous » Documentation
Status: Active » Needs work

I believe this is an issue with lessphp and its precision.

This is referenced here:

I'm making a note here for documentation purposes.

This is one of the reasons that I opened #2003628: Add ability to use node.js version of LESS

markcarver’s picture

FWIW, I updated the Bootstrap Sub-Theme Start Kit documentation to reflect this bug. Thanks @corey.aufang!

nonzod’s picture

Thank you Mark and Corey, now I use less.js and compile less without problems.

glynster’s picture

Care to share how you are pulling this into your Drupal theme?

nonzod’s picture

Follow the sub-theme documents.
The chosen method is the first one, "Method 1: Bootstrap Source Files", skip the section "IF USING THE LESS MODULE".
Compile the ./less/style.less with "lessc" command, lessc is a module for nodejs, to install lessc :

npm install -g less

now you can compile style.css with something like this

lessc <path_to_theme>/less/styles.less <path_to_theme>/css/styles.css

now styles.css is ready to use :)

corey.aufang’s picture

I've posted a patch to #2003628: Add ability to use node.js version of LESS.

This allows processing of less files to run through the official processor.

This patch does require that less for node.js is installed on the system.

It does not allow for the latest hook_functions functionality, but it does work with the variables perfectly.

Also, token support from within less code is out, but could be handled before the variables are passed in.

glynster’s picture

Thanks for the patch.
Was applied successfully.
But it seems the less.js files is not being picked up.

I have the less.js placed in libraries under a folder of less.
In your patch I did not see any other documentation, any ideas?

kiova’s picture

Thanks corey.

I applied the patch. I installed less on ubuntu and it works but i can not get it working with your patch and module...

What can be wrong?

corey.aufang’s picture

Right now you need to have less installed using NPM.

I did an update to that ticket #2003628-3: Add ability to use node.js version of LESS

corey.aufang’s picture

Issue summary: View changes

Updated issue summary.

corey.aufang’s picture

Version: 7.x-3.0-rc1 » 7.x-3.x-dev
Issue summary: View changes

A bunch of work was recently commited for #2003628: Add ability to use node.js version of LESS.

Also, there is a new PHP library for compiling LESS that is much closer to less.js in feature support that leafo/lessphp.

It can act as a drop in replacement for leafo/lessphp by following the directions here:

corey.aufang’s picture

Version: 7.x-3.x-dev » 7.x-4.x-dev
Status: Needs work » Fixed

A note related to precision issues with leafo/lessphp has been added to the documentation.

Also, support for less.js has been added to 7.x-4.x which will be released soon. This allows for compilation using the canonical version of Less, and should resolve any precision issues.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.