File Structure

Framework

The subfolder framework contains the files that shouldn't change project to project (except for framework updates).

/framework/_reset.scss
Contains the standard css reset plus some custom stuff we use to reduce browser differences.
/framework/base/
Contains basic components, layout tools, and content styles. Majority of css lives here.
/framework/legacy/
Contains legacy partials that are being phased out.
/framework/mixins/
Helpful tools used by the framework and available to custom project files. Must be included in the stylesheet compiling file in order to access code.
/framework/options/
Contains extra componenets that require JavaScript to run (modals, tooltips, etc). Can include all with the _bootstrap partial or individually depending on section, page, or project.
/framework/theme/_default.scss
Contains default values for theme files. Project specific files can override these values. Contains some legacy variables that we are in the process of deprecating.

Project

The subfolder project contains unique files to the project and the file with which all the css from the framework will compile with. An example might look like the following list. In a new project, the main global.scss files might look like the code on the right.

In contemporary practice, "index" would be the better name for the entry file into a folder, rather than "_bootstrap".

/project/global.scss (compiles general framework css, the theme, and anything global)
/project/global/
- _bootstrap.scss (imports all the files in this folder)
- _header.scss
- _footer.scss
- _layout.scss
- _typography.scss
/project/commerce.scss (compiles section css only with the theme and any helpers from the framework)
/project/commerce/ (assorted individual page files that could be organized in a pages folder or in the relevant section folder)
- _department.scss
- _category.scss
- _product.scss
/project/homepage.scss (compiles page css only with the theme and any helpers from the framework)
/project/themes/ (one project can have different themes for different sectons or to enable different modes)
- _main.scss
- _admin.scss

// ====================================
// framework - reset
@import '../framework/reset';

// framework - default theme
@import '../framework/theme/defaults';

// ====================================
// project theme
@import 'theme/main';

// ====================================
// framework
 
// tools for making other things
@import '../framework/mixins/bootstrap';

// components, layouts, content styles
@import '../framework/base/bootstrap';

// optional components, require scripts
@import '../framework/options/bootstrap';

// ====================================
// project global styles
@import 'global/bootstrap';

Output

Files compiled and minified for production should go into the relevant build directory. Optionally, files that are uncompressed and being watched during development can go in a separate dev directory.

/build/
- global.min.css
/dev/
- global.css

The original version of this project kept all of the scss and output files together in a nitrocss directory, kept amongst php view files. In this docs site, nitrocss source files are maintained separately, with the output files placed into the public/ folder.

Third-party Libraries

The subfolder vendors contains unique files from third-parties that might be helpful, and vary project to project. I'm a fan of Matej Latin's Modular Scale for font sizing, and will include modular scale for web typography purposes.

/vendors/_bootsrap.scss (includes all the vendor files)
/vendors/modularscale/
- _bootstrap.scss (includes all of this vendor's files)
- _function.scss
- _power.scss
- _respond.scss
- etc...

Image Credit

Photo in header by Nick Fewings on Unsplash .