Import Flat-Ui in Meteor app

Question

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

instead of this

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

Answer 1

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!

Answer 2

I think it doesn't suffice if you rename flat-ui.less to flat-ui.import.less.

If you prefer to use the files from the Flat UI repo instead of a package, I would proceed as follows:

1. Rename every file within the <flat_ui_directory> in your client code to include the .import keyword.
2. Rename every import that is made in flat-ui.import.less to include the .import keyword
3. Import flat-ui.import.less to your own less file, e.g. style.less

Hope that works.