6

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

Ankur Sinha
  • 6,473
  • 7
  • 42
  • 73
Koala7
  • 1,340
  • 7
  • 41
  • 83

1 Answers1

8

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.

orourkek
  • 2,091
  • 15
  • 22
  • Ok, so you include the main.less (or bootstrap.less) in the folder less and then all the less files in the bootstrap folder. The main.less compiles the layout.css in the CSS folder, but how can it compile the css file in the css folder? you give some instructions? in my case the bootstrap.less compile the bootstrap.css in the same path automatically – Koala7 Jan 10 '13 at 17:37
  • 1
    Where the compiled file ends up depends on what you're using as a compiler. SimpLESS, for example, allows you to set a target location and filename for the compiled css. – orourkek Jan 10 '13 at 17:39
  • Ok now i understand it, i have not used SimpLESS in my try, that's why i have made this question. So there is nothing bad or wrong keep all these less files in the less folder. – Koala7 Jan 10 '13 at 17:43
  • The main reason I organize my directories like this is so that the `less/` directory can easily be restricted through htaccess or excluded from VC when the project gets to production, leaving you with the `css/` directory, and only a handful of files at most (usually 1) – orourkek Jan 10 '13 at 17:47
  • I got it...many thanks, you want fairly keep the website structure clean, i was also looking this other way to organize the files here http://stackoverflow.com/questions/10451317/twitter-bootstrap-customization-best-practices what do you think about the first answer? by the way i give you the right answer! – Koala7 Jan 10 '13 at 17:54
  • 1
    That's a good way to do it if you plan on customizing bootstrap ***and*** updating the source often. Usually I'll stick with the same version of the bootstrap source, or merge the new version in and work out conflicts manually. I like to modify the bootstrap core for every project, so updating is less of a concern for me. – orourkek Jan 10 '13 at 18:10