Customizing/extending Bootstrap's LESS files

[daf]

One of the big benefits of using Bootstrap's source LESS files is that you can override/configure many portions of it, such as colors and grid parameters (number of columns, gutter size etc). I'd like to do that in a project that I've started using this project with. Is it possible?

In addition, I was making a new LESS file in my app that needs to reference some of those variables from Bootstrap's variables.less, but I could not figure out how to get the compiler to see where variables.less was. I added variables.less to my source_files section of my PIPELINE_CSS block specific to my app, but that didn't work.

Maybe something with the PIPELINE_LESS_ARGUMENTS setting? Any hints or ideas?

[estebistec]

it's definitely possible. you just need to define your overrides after bootstrap's LESS sources. They would need to be in the same asset group as bootstrap itself for the less compilation to include bootstrap's variables.less and your overrides.

No, it's not a compiler argument. Start your pipeline_css something like the demo app [1] and then add your overrides LESS.

[1] https://github.com/estebistec/django-twitter-bootstrap/blob/master/demo_site/demo_site/settings.py#L146

[daf]

I'm still not sure I understand. I've modified my pipeline_css to look like this:

PIPELINE_CSS = {
    'bootstrap': {
        'source_filenames': (
            'twitter_bootstrap/less/bootstrap.less',
            'newt.less'
        ),
        'output_filename': 'css/b.css',
        'extra_context': {
            'media': 'screen,projection',
        },
    },
}

However, this gives an compiler error, as my custom .less file references a variable defined in bootstrap's variables.less. I am rather new to LESS but from what I understand, I'd need to @include the variables.less file, except I don't know how to tell it where to find that file unless I pass in a command line argument to lessc to tell it where to find that (and I'm not totally sure how to get that from the pipeline setup).

Also if I modify the source_filenames portion to be similar to:

        'source_filenames': (
            'twitter_bootstrap/less/variables.less',
            'twitter_bootstrap/less/mixins.less',
            'twitter_bootstrap/less/scaffolding.less',
        ),

This also won't compile: scaffolding.less needs something defined in mixins.less. I think the bootstrap.less usage works because that file does all the @includes it needs, therefore lessc can resolve everything into one file.

[estebistec]

So, you want to keep your first form, because your intuition is right that bootstrap.less is taking care of including all of their relevant less libraries. Your own newt.less will still need to include what it needs to see. If the relative paths are what I believe them to be, based on your source_filenames, then you should be able to @import twitter_bootstrap/less/variables.

Remember, when Django processes staticfiles it treats all of the static folders of every Django app as the combined search-space for finding other files. So you should be able to use the simpler import that I listed above and not have to mess with the full filesystem paths.

[daf]

Unfortunately, this does not seem to be the case - I get:

CompilerError at /
FileError: 'twitter_bootstrap/less/variables.less' wasn't found in 

with an @import "twitter_bootstrap/less/variables.less"; as the top line in my file.

[estebistec]

found in what folder(s)? The rest of the error says where it's looking. Is it not looking in the static folders of all your installed apps?

[daf]

The entirety of the error is:

FileError: 'twitter_bootstrap/less/variables.less' wasn't found in /Users/dfoster/Documents/Dev/code/proj/newt/static/newt.less on line 1, column 1:
1 @import "twitter_bootstrap/less/variables.less";
2 

which looks to me like some ANSI color code noise, probably from the lessc compiler, getting passed straight through.

It would seem to me that django-pipeline would have to gather directories from all the installed apps and pass it down to the lessc execution - do you know if that's what it does?

[estebistec]

well, pipeline just sits on top of django staticfiles, which yes, generally does this. However, that's assuming you haven't messed with the default staticfiles_finders setting [1]. Does yours still have AppDirectories (which is what does this)?

[1] https://docs.djangoproject.com/en/1.6/ref/settings/#std:setting-STATICFILES_FINDERS

[daf]

It does, I think that was a default setting and I haven't changed it (also it seemed important).

On Wed, May 28, 2014 at 8:31 PM, Steven Cummings notifications@github.com wrote:

well, pipeline just sits on top of django staticfiles, which yes, generally does this. However, that's assuming you haven't messed with the default staticfiles_finders setting [1]. Does yours still have AppDirectories (which is what does this)?

[1] https://docs.djangoproject.com/en/1.6/ref/settings/#std:setting-STATICFILES_FINDERS

— Reply to this email directly or view it on GitHub https://github.com/estebistec/django-twitter-bootstrap/issues/15#issuecomment-44481787 .

[estebistec]

Then at this point I would just need to see more of the project.

[daf]

Understood. I'll make a bare minimum sample project to demonstrate as I cannot share this exact one. Maybe during creation it will shake out some other details.

On Wed, May 28, 2014 at 11:16 PM, Steven Cummings notifications@github.com wrote:

Then at this point I would just need to see more of the project.

— Reply to this email directly or view it on GitHub https://github.com/estebistec/django-twitter-bootstrap/issues/15#issuecomment-44490295 .

[daf]

While making the minimum app, I noticed something which likely indicates a misconfiguration. When I setup my PIPELINE_CSS as detailed in django-twitter-bootstrap's docs, I'm not seeing the css/b.css show up anywhere. In fact, in my HTML source for my basic template, I see this:

<head>
  <link href="/static/twitter_bootstrap/less/bootstrap.css" rel="stylesheet" type="text/css" media="screen,projection" />
</head>

And poking around, this css file appears to be coming straight from my site-packages installed django-twitter-bootstrap! It should definitely not be making a css file in there, nor serving it as such. Any ideas what I've got configured wrong?

[daf]

To be clearer, it's literally writing a bootstrap.css file in my $VIRTUAL_ENV/lib/python2.7/site-packages/twitter_bootstrap/static/twitter_bootstrap/less directory. I don't think pipeline should be doing that :)

[estebistec]

That is part of pipelines process.

• when less sources are compiled, they are compiled "in-place" in the same folder. E.g., /some/path/my.less becomes /comes/path/my.css.
• pipeline then does any concatenation and further processing necessary based on the other files you told it about
• re: the head link: when you're running locally you simply get the individual output files as separate stylesheets or scripts. This is how debug/local running works. Only when you switch to debug=False will it emit a link for the final file (but then it also won't serve it locally unless you use something like dj-static)

Run the demo app for comparison of your above observations, if it helps.

Now, none of that gets us closer to seeing why your .less can't see the bootstrap variables.

[daf]

Ok, thanks for the explanation, sorry for chasing the red herring.

I've made a sample application that replicates the error I'm seeing in basic form. Instructions in the README to get going: https://github.com/daf/django-example-pipestrap

Very much appreciate you taking the time to check all this out. Still hoping it's just something dumb I did!

[estebistec]

Okay, I see what's up. It is that we need the --include-path argument to lessc. Sorry for stating that it wasn't, that's my bad :(. Somehow I became convinced that maybe your installed apps or other django-related paths weren't setup.

Adding this to the bottom of your settings.py fixes it:

BASIC_LESS = os.path.join(PROJECT_PATH, 'basic', 'static')
import twitter_bootstrap
PIPELINE_LESS = os.path.join(os.path.dirname(twitter_bootstrap.__file__), 'static')
PIPELINE_LESS_ARGUMENTS = u'--include-path={}'.format(':'.join([PIPELINE_LESS,BASIC_LESS]))

So, it's been a while since I had to do an initial setup on a project and it was easy for me to forget this step. Given that, I'm going to create the following (up to) two tasks in this project to help ease this confusion and make it simpler to setup:

• Document an example of --include-path, probably for a variables import since I think that is basically the thing almost anybody would want to include.
• Possibly provide functions that can help generate the full --include-path option. This might look something like giving it the names of your INSTALLED_APPS that have LESS that you need to be importable.

[estebistec]

Okay, I've logged #16 (to better clarify the situation) and #17 (to potentially provide tools to make it a bit simpler or clearer to do. With that, closing this specific issue.

[estebistec]

Ignore that last commit. Was meant to fix #16. Comment amended.