Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jasonreece/css-burrito
An organizational Sass template.
https://github.com/jasonreece/css-burrito
Last synced: 16 days ago
JSON representation
An organizational Sass template.
- Host: GitHub
- URL: https://github.com/jasonreece/css-burrito
- Owner: jasonreece
- License: mit
- Created: 2013-07-22T16:21:31.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2017-04-14T20:09:14.000Z (over 7 years ago)
- Last Synced: 2024-04-13T21:57:09.004Z (7 months ago)
- Language: JavaScript
- Size: 162 KB
- Stars: 191
- Watchers: 16
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# **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'
}
```
or
```
// 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](http://necolas.github.io/normalize.css/), [Bootstrap](http://getbootstrap.com/), or [Foundation](http://foundation.zurb.com/).
* It also contains a ```_libs-variable-overrides.scss``` file for overriding third party variables.
### **3. global** - There are six global components.
* `_settings.scss` - global maps and variables
* `_utilities.scss` - extends, mixins, functions, and utilities.
* `_base.scss` - global defaults for base-level tags (body, p, etc.)
* `_layout.scss` - global layout classes (margin, padding, floats, etc).
* `_skin.scss` - global skin classes (gradients, colors, box-shadows, etc).
* `_typography.scss` - global typography classes.
### **4. modules**
* Any unit of style that can be found across multiple pages (Buttons, Navigations, Modals).
* **Most of your styles should be found here.**