Search code examples
twitter-bootstrapmeteorlessflatui

Import Flat-Ui in Meteor app

I'm trying to include the flat-ui theme for bootstrap in Meteor. I have added the mrt:bootstrap-3 and less packages. Then I have copied the folders fonts, img, js and less from the flat-ui project inside lib/Flay-UI-2.2.2/ in my project directory. However I have the following compiling error:

While building the application:
lib/Flat-UI-2.2.2/less/modules/button-groups.less:12:35: Less compiler
error: variable @brand-primary is undefined
lib/Flat-UI-2.2.2/less/modules/buttons.less:10:14: Less compiler error:
variable @btn-font-size-base is undefined
...

It looks like it is not compiling in the right order, how can I solve this issue? I have also tried to rename flat-ui.less with flat-ui.import.less without any success.

Update 1 Following the indication of @user3435693 I was able to compile. However I still have some troubles. I'm not able to use the checkbox and switches. For example, I see switches like this

meteor

instead of this

original

Plus I'm not able to see the glyphicons. Any suggestion?

Solution

  • It seems I've figured out how it works:

    1. Put the less folder inside the client folder.

    2. Change the file extension of all the files from .less to .import.less as well as all the import as @user3435693 said.

    3. Add mizzao:bootstrap-3.

    4. Put the img and fonts folders in the public folder.

    5. Attach the jQuery scripts to the template with

      Template.myTemp.rendered = function() {
  $.getScript('your/path/to/lib/application.js');
  $.getScript('your/path/to/lib/flat-ui.min.js');
};

    Then it works!