Twitter Bootstrap i mniej plików

Question

Mam zakodowaną stronę docelową tylko po to, aby wypróbować Twitter Bootstrap z mniejszą ilością plików. Nie jestem pewien, czy uporządkowałem moje mniej plików, tak jak być powinno.

W sekcji head mojego index.html:

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

Oto treść mojego 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 

W moim folderze "mniej" Mam następujące pliki

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

Są one rzeczywiście niezbędne do działania strony docelowej, ale nie jestem pewien, czy ta organizacja plików jest najlepszym rozwiązaniem. Jestem nieco zdezorientowany, możesz mi pomóc i powiedzieć, czy dobrze sobie radzę? Czy istnieje lepszy sposób porządkowania plików?

Here widać stronie docelowej

Answer 1

Jak organizować swoje pliki, zależy wyłącznie od Ciebie, ale tutaj jest jak zwykle zrobić go w trakcie rozwoju:

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

Zazwyczaj main.less importuje także pliki jak blog.less, forum.less, itp. (w zależności od zawartości witryny). Schemat ten pozwala mi dołączyć layout.css do kodu HTML i albo skompilować je przez watcher, albo na żądanie.