Get started

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.