https://github.com/avalanchesass/avalanche

A package based CSS framework.
https://github.com/avalanchesass/avalanche

avalanche css css-framework npm package-based sass sass-framework scss

Last synced: 4 days ago
JSON representation

A package based CSS framework.

• Host: GitHub
• URL: https://github.com/avalanchesass/avalanche
• Owner: avalanchesass
• License: mit
• Created: 2014-04-05T07:49:13.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T00:37:07.000Z (almost 2 years ago)
• Last Synced: 2024-12-05T07:47:57.931Z (18 days ago)
• Topics: avalanche, css, css-framework, npm, package-based, sass, sass-framework, scss
• Language: SCSS
• Homepage: https://avalanche.oberlehner.net
• Size: 8.5 MB
• Stars: 93
• Watchers: 3
• Forks: 6
• Open Issues: 44
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

• Awesome-CSS-Resources - Avalanche:

README

        
# avalanche

[![Build Status](https://travis-ci.org/avalanchesass/avalanche.svg?branch=master)](https://travis-ci.org/avalanchesass/avalanche)

[![GitHub stars](https://img.shields.io/github/stars/avalanchesass/avalanche.svg?style=social&label=Star)](https://github.com/avalanchesass/avalanche)

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.

## Get started

avalanche comes with a CLI to kickstart new projects:

```bash

# 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](https://avalanche.oberlehner.net/get-started/).

## Packages

Go to the avalanche website to browse all available packages: [https://avalanche.oberlehner.net/packages](https://avalanche.oberlehner.net/packages/).

## Coding styleguide

avalanche follows some strict principles how to write CSS. [Read more about it in the styleguide](https://github.com/avalanchesass/avalanche/blob/master/STYLEGUIDE.md).

## Testing

- Test all packages at once: `npm test`

- Test a specific package: `npm test -- -p PACKAGE-NAME`

## Articles

Read more about avalanche and what problems inspired the development of this CSS framework.

- [Dreaming of a Package Based CSS Workflow](https://markus.oberlehner.net/blog/dreaming-of-a-package-based-css-workflow/)

- [Building avalanche 4.x.x](https://markus.oberlehner.net/blog/building-avalanche-v4/)

## Thanks

The development of avalanche is based on the work and ideas of (among others) the following three people:

- [Harry Roberts](https://csswizardry.com/): [BEMIT](https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/), [ITCSS](http://itcss.io/) and [inuitcss](https://github.com/inuitcss/inuitcss)

- [Nicole Sulivan](http://www.stubbornella.org/content/): [OOCSS](https://github.com/stubbornella/oocss)

- [Jonathan Snook](https://snook.ca/): [SMACSS](https://smacss.com/)

## About

### Author

Markus Oberlehner  

Website: https://markus.oberlehner.net  

Twitter: https://twitter.com/MaOberlehner  

PayPal.me: https://paypal.me/maoberlehner

### License

MIT