Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Request directly a theme file

lifeisfoolifeisfoo Zombie plugins finder ✭✭✭

I'm developing a theme for vanilla 2.1, using LESS.
I need to import external dependencies (others less/css files inside theme folder) from my main custom.less file using @import syntax.
This less file is referred directly in the master.tpl (with less.js):
<link rel="stylesheet/less" type="text/css" href="{link path="/"}themes/less/custom.less" />
<script src="{link path="/"}themes/less/design/js/less-1.3.3.min.js" type="text/javascript"></script>

This works correcty, but using @import "design/css/bootstrap.min.css" inside custom.less generate a request to http://example.com/themes/less/design/css/bootstrap.min.css that is what I'm expecting, but a 403 Forbidden is generated.

How can I import directly files from my theme folder?

Tagged:
Kasper

Comments

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited April 2013

    Funnily enough, you're trying to do the exact same thing that I myself was trying to do a year ago when I wrote the first version of Bootstrap for Vanilla :-) Here's my advice:

    First off, don't use less.js. LESS is genius but less.js is an absolute nightmare. What you should do instead, is compile your LESS files how it was originally intended: Using Node.js. Getting started with this is however a bit of a pain unless you've got some help, which is exactly why I wrote Ninja (shameless self promotion!). It actually comes with Bootstrap out of the box so it should give you an idea how to use it.

    Second off, relying on theme hooks instead of views when including assets in your theme is a great idea. Again, Ninja will show you how to do this easily. The source is full of comments so it should be easy to get started!

    Hope that helps at least a bit! If you need more help, just say the word.

    // Kasper

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited April 2013

    @422 said:
    steer clear of import

    Unless used in Sass or LESS (...and Stylus, Roole etc.) in which case @import means "grab this file and insert it into the compiled stylesheet" - given that you're not importing a CSS file that is

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • lifeisfoolifeisfoo Zombie plugins finder ✭✭✭

    First of all thank you @kasperisager for your advice.

    *I have tried to use Ninja some weeks ago but a I have encountered problems resolving dependencies (npm, grunt, etc) version. Linux distro contains not up-to-date version and mantains different version of the same tools can be a nightmare, unless a distro specific tool is used (in debian like you have update-alternatives), but the software must be packaged. I can suggest you to add a vagrant file inside Ninja so a "O.S. agnostic" quick start is possible.

    *Why you say that "less.js is an absolute nightmare" ?

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    No worries! I'll look into adding Vagrant support in Ninja - it isn't a super big project so I didn't deem it necessary at first.

    As for less.js being a nightmare, I say that because it compiles all of your less files client side which is a bad idea if you've got a ton of stuff to compile. Initial load times are usually up to 10 seconds (that's going to scare your visitors away) when compiling Bootstrap client-side. It's much better to handle this as part of a build-process using Grunt or some other task manager - Make would do the trick too.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • lifeisfoolifeisfoo Zombie plugins finder ✭✭✭

    Ah, ok, is a time problem. Now I'm using only a sub-part of bootstrap (grid) and the compile time is null.
    Obviously compiling cliend side in production environment is a bad idea.

  • 422422 Developer MVP

    Remember also, if you use minify ( we have our own system ), and use @import , not wthin sass or less ( or other vendors ) your css will most likely messup.

  • lifeisfoolifeisfoo Zombie plugins finder ✭✭✭

    I know :) .

    I'm wondering about adding a LESS preprocessor to vanilla ServeCss function. LessPHP class support multi path search folder for the import syntax http://leafo.net/lessphp/ .

    With these I can work editing directly .less files and serving automatically .css in the frontend (evert F5 or with a file change detector).
    @kasperisager: the road to be a Ninja is long ;)

    Kasper
  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff

    That sounds like a really good idea! I actually did somewhat the same thing in Austere (http://vanillaforums.org/addon/austere-theme) but it was never as integrated as you have in mind. I simply used Assetic as middleware, enabling developers to make use of eg. LessPHP without too much hassle. Would love to see something more integrated though :-)

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

Sign In or Register to comment.