Twitter Bootstrap and less files

Question

I have coded a Landing page just to try Twitter Bootstrap with Less files. I am not sure if I have organized my less files as it should be.

In the head section of my index.html:

<link rel="stylesheet/less" type="text/css" href="bootstrap.less" />

Here the content of my bootstrap.less

// Core variables and mixins
@import "less/variables.less"; // Modify this for custom colors, font-sizes, etc
@import "less/mixins.less";

// CSS Reset
@import "less/reset.less";

// Grid system and page structure
@import "less/scaffolding.less";
@import "less/grid.less";
@import "less/layouts.less";

// Base CSS
@import "less/type.less";

// Utility classes
@import "less/utilities.less"; // Has to be last to override when necessary

In my folder "less" i have the following files

• utilities.less
• utilities.css
• variables.less
• variables.css
• grid.less
• grid.css
• type.less
• layouts.less
• mixins.less
• scaffolding.less
• reset.less

They are all actually necessary to make my landing page work but I am not sure if this file organization is the best solution. I am bit confused about that, could you help me out and tell me if I am doing well? Is there a better way to organize the files?

Here you see the landing page

Answer 1

How you organize your files is entirely up to you, but here's how I normally do it during development:

public/
    css/
        layout.css  (compiled from main.less)
        less/
            main.less  (imports bootstrap/bootstrap.less)
            bootstrap/
                bootstrap.less
                ...etc...

Usually main.less also imports files like blog.less, forum.less, etc (depending on the site content). This schema lets me include layout.css in the HTML, and either compile the lesscss through a watcher, or on demand.