Twitter bootstrap and fewer files

Question

I encoded the Landing page to try Twitter Bootstrap with smaller files. I am not sure that I organized fewer files, as it should be.

In the main section of my index.html:

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

Here is the contents 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 "less" folder, 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

All of them are really necessary for my landing page to work, but I'm not sure if this file organization is the best solution. I am a little confused by this, could you help me and say if I am good? Is there a better way to organize files?

Here you see the landing page.

Answer 1

How you organize your files is completely up to you, but here is how I usually do this during the development process:

 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 content of the site). This scheme allows me to include layout.css in HTML and compile lesscss via observer or on demand.