Sass Director

A Showcase of Manifest Files

A few well-thought-out Sass structures by some intelligent people. You can try them in the generator or submit your own!

• Hugo Giraudel's Guidelines

  @import "vendors/bootstrap";
  @import "vendors/jquery-ui";
  
  @import "utils/variables";
  @import "utils/functions";
  @import "utils/mixins";
  @import "utils/placeholders";
  
  @import "base/reset";
  @import "base/typography";
  
  @import "layout/navigation";
  @import "layout/grid";
  @import "layout/header";
  @import "layout/footer";
  @import "layout/sidebar";
  @import "layout/forms";
  
  @import "components/buttons";
  @import "components/carousel";
  @import "components/cover";
  @import "components/dropdown";
  
  @import "pages/home";
  @import "pages/contact";
  
  @import "themes/theme";
  @import "themes/admin";
        

• Jina Bolton's Architecture

  @import "dependencies/color";
  @import "dependencies/typography";
  @import "dependencies/layout";
  @import "dependencies/motion";
  
  @import "base/site";
  @import "base/text-inline";
  @import "base/text-block";
  @import "base/lists";
  @import "base/tables";
  @import "base/forms";
  @import "base/media";
  @import "base/code";
  
  @import "components/buttons";
  @import "components/tooltips";
  
  @import "helpers/themes";
  @import "helpers/layout-float";
  @import "helpers/layout-table";
  @import "helpers/visibility";
  
  @import "tools/show-grids"
  @import "tools/diagnostic"
  
  @import "responsive/high-definition"
  @import "responsive/print"
        

• Una Kravets' Mini Framework

  // Base styles -- these output no code
  @import 'base/reset';
  @import 'base/vars/color';
  @import 'base/vars/grid';
  @import 'base/vars/type';
  @import 'base/helpers/mixins';
  @import 'base/helpers/functions';
  @import 'base/helpers/extends';
  
  // Layout elements affecting the page
  @import 'theme/grid';
  @import 'theme/color';
  @import 'theme/type';
  
  // Regions of your page -- repeated & modular
  @import 'regions/nav';
  @import 'regions/header';
  @import 'regions/footer';
  @import 'regions/sidebar';
  
  // Modules -- elements that are repeated
  @import 'modules/buttons';
  
  // Components -- compound modules
  @import 'components/forms';
  
  // Unique pages -- Views that aren't reused
  @import 'pages/home';
  @import 'pages/contact';
  
  // Everyone messes up sometimes -- here's the to-do that didn't quiet have a spot yet
  @import 'to-do';