Css-burrito NPM

css-burrito

An architectural Sass template that will:

create and @import new modules for you.
remove modules that are no longer needed and un-@import them.
list all modules files, just in case you need a quick peek..

Quick Install

Clone the Repo or install with npm.

npm install -g css-burrito

Add the template to your project.

In the command line, navigate to the root of your project and run:

burrito -n

This creates a new instance of css-burrito in the root of your project.

The file structure looks like this:

styles/
	index.scss
	global/
    	_base.scss
        _layout.scss
        _settings.scss
        _skin.scss
        _typography.scss
        _utilities.scss
    libs/
    	_libs-variable-overrides.scss
    modules/
    	_modules.scss

If you'd like to change where the template is installed, or rename any of the main files, you can do this in a .cssburritorc or .cssburritorc.json file. or you can create a burrito object inside of package.json.

// in package.json
"burrito": {
  pathToStyles: 'path/to/burrito',
  stylesDirectoryName: 'custom-styles-directory-name',
  stylesFileName: 'custom-styles-file-name.scss'
}

// in .cssburritorc
{
  pathToStyles: 'path/to/burrito',
  stylesDirectoryName: 'custom-styles-directory-name',
  stylesFileName: 'custom-styles-file-name.scss'
}

Adding New Modules

css-burrito will add new modules files, and @import them into the project for you!

To use this feature run:

burrito -m (file-name[s])

Removing Modules

css-burrito will also delete unnecessary modules files, and remove the @import from the project for you!

To use this feature run:

burrito -r (file-name[s])

List the Files in the Modules Directory

css-burrito will list your module files for you.

To use this feature run:

burrito -l

Need Help?

It's always there for you.

burrito -h

What's in our burrito template?

css-burrito has four main ingredients.

1. index.scss

This file imports all of the other files from the libs, global and module sections.
It has an inbox section where developers that don't usually work on the project can leave temporary code that is easily seen by the maintainers of the project.
It also has a shame section for quick fixes, hacks, and other questionable techniques. Be sure to fix them later.

2. libs

This section houses third party CSS libraries like Normalize, Bootstrap, or Foundation.
It also contains a _libs-variable-overrides.scss file for overriding third party variables.