a package based CSS framework

Get started

avalanche comes with a CLI to kickstart new projects:

# Install the avalanche CLI.
npm install @avalanche/cli -g
# Create a new project with the name "Your Project Name".
avalanche "Your Project Name"

avalanche is flexible in the way you can use it – it is also very easy to integrate avalanche packages into your existing project.

Learn more about how to use avalanche


See some examples how to combine certain avalanche packages to solve common webdesign problems.

See the examples


avalanche packages are well-tested building blocks to lay the foundation for developing solid design sytems.

See all packages


High quality code needs documentation. avalanche uses SassDoc for source code documentation.

See the documentation

Develope robust design systems

avalanche establishes the foundation for a package based CSS workflow. Heavy weight CSS toolkits often stay in your way when creating unique looking experiences or they lead to a rather bland design. But you don't have to reinvent the wheel for every new project either. avalanche provides building blocks for you to handpick and integrate into your workflow. You can read more about the philosophy behind avalanche in this blog article.

Do you want to support avalanche?

Star the project on GitHub