Start from scratch
If you start a new project, you can use the avalanche CLI to setup a new project powered by avalanche.
# Install the avalanche CLI. npm install @avalanche/cli -g # Create a new project with the name "Your Project Name". avalanche "Your Project Name" # Switch to the newly created directory. cd your-project-name # Install dependencies and start the build process. npm start
After installing the avalanche CLI and creating a new project you end up with the following directory structure:
your-project-name/ ├── app/ │ └── index.html ├── scss/ │ ├── components/ │ ├── generic/ │ ├── objects/ │ ├── settings/ │ ├── tools/ │ ├── utilities/ │ └── index.scss ├── .gitignore ├── gulpfile.js └── package.json
The directory structure is based on the BEMIT (BEM + ITCSS) methodology. You can read more about the concept at csswizardry.com.
The included Gulp build process uses the node-sass-magic-importer, a node-sass custom importer. Among other things this makes it possible to use globbing inside your sass files. Every file you create inside the default directory structure will be imported by the
index.scss file automatically.
Installing and using packages
Install avalanche packages like regular npm modules:
npm install @avalanche/object-grid --save-dev
To use a avalanche package in your project, import it in your sass code:
// Import the grid packages main file. @import 'node_modules/@avalanche/object-grid/scss/index.scss';
Usage with node-sass-magic-importer
avalanche is designed to be used in combination with the node-sass-magic-importer npm package.
node-sass-magic-importer is a custom node-sass importer for selector specific imports, node importing, module importing, globbing support and importing files only once.
To integrate the
node-sass-magic-importer custom importer module into your build process, follow the steps in the modules usage guide.