avvo-styleguide/README.md

Avvo styleguide

# Avvo's Styleguide

This repo was ripped and migrated from the [avvo_ui](https://github.com/avvo/avvo_ui) Rails gem.

The intent of this repo is to put the responsibility of compiling the `.scss` and `.js` onto the app - allowing for better modularity and flexibility to load only what is needed.

It serves up uncompiled ES6 based Javascript and .scss files for consumption in the host app. `./source`

There is also a compiled .css and Javascript version for use in host apps that wish to not have to compile the assets `./dist`.


## Usage
Install the package
```
    npm install avvo-styleguide --save-dev
```
or with Yarn (faster and preferred package manager)
```
    yarn add avvo-styleguide
```

### Javascript with Webpack
Import as you would other node_module packages
```
import FunctionExport from 'avvo-styleguide/source/javascripts/path_to_file'
```

### Sass in Rails app
1. Add additional assets to load path `config/initializers/assets.rb`
```
    Rails.application.config.assets.paths << Rails.root.join('node_modules')
```

2. Add modules to autoloader path `config/application.rb`
```
    class Application < Rails::Application
        # ....

        config.autoload_paths += %W(#{config.root}/node_modules)
    end
```

3. Suggestion: Import the raw .scss files into a single .scss file - eg. `app/assets/stylesheets/styleguide/main.scss`.
Reference that file when needed.
```
    @import './sass_helpers';

    @import 'node_modules/avvo-styleguide/source/stylesheets/vendor/normalize';
    @import 'node_modules/avvo-styleguide/source/stylesheets/fonts/all';
    @import 'node_modules/avvo-styleguide/source/stylesheets/base/all';
    @import 'node_modules/avvo-styleguide/source/stylesheets/layout/all';
    @import 'node_modules/avvo-styleguide/source/stylesheets/components/all';
    @import 'node_modules/avvo-styleguide/source/stylesheets/shame/all';
    @import 'node_modules/avvo-styleguide/source/stylesheets/utilities/all';
```

4. Make sure to still include your sass helpers when using one off .scss pages and need access to Avvo's colors, or other features of the styleguide `app/assets/stylesheets/styleguide/sass_helpers.scss`
```
    @import 'node_modules/avvo-styleguide/source/stylesheets/functions/all';
    @import 'node_modules/avvo-styleguide/source/stylesheets/config/all';
    @import 'node_modules/avvo-styleguide/source/stylesheets/mixins/all';
```

### Releasing new Version
1. Go to http://infrastructure.corp.avvo.com/read-token.html to set up `~/.npmrc`
2. Run `npm publish`