title: Twitter Bootstrap and less files
body: <p>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.</p>
  
  <p>In the head section of my index.html:</p>
  
  <pre><code>&lt;link rel="stylesheet/less" type="text/css" href="bootstrap.less" /&gt;
  </code></pre>
  
  <p>Here the content of my bootstrap.less</p>
  
  <pre><code>// 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
  </code></pre>
  
  <p>In my folder "less" i have the following files</p>
  
  <ul>
  <li>utilities.less </li>
  <li>utilities.css</li>
  <li>variables.less</li>
  <li>variables.css</li>
  <li>grid.less</li>
  <li>grid.css</li>
  <li>type.less</li>
  <li>layouts.less</li>
  <li>mixins.less</li>
  <li>scaffolding.less</li>
  <li>reset.less</li>
  </ul>
  
  <p>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?</p>
  
  <p><a href="http://experiments.hostzi.com/Landing/">Here</a> you see the landing page</p>