@avvo/suitably

Suitably

This repo was ripped and migrated from the 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/suitably --save-dev

or with Yarn (faster and preferred package manager)

    yarn add @avvo/suitably

Javascript with Webpack

Import as you would other node_module packages

    import FunctionExport from '@avvo/suitably/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/suitably/source/stylesheets/vendor/normalize';
    @import 'node_modules/@avvo/suitably/source/stylesheets/fonts/all';
    @import 'node_modules/@avvo/suitably/source/stylesheets/base/all';
    @import 'node_modules/@avvo/suitably/source/stylesheets/layout/all';
    @import 'node_modules/@avvo/suitably/source/stylesheets/components/all';
    @import 'node_modules/@avvo/suitably/source/stylesheets/shame/all';
    @import 'node_modules/@avvo/suitably/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/suitably/source/stylesheets/functions/all';
    @import 'node_modules/@avvo/suitably/source/stylesheets/config/all';
    @import 'node_modules/@avvo/suitably/source/stylesheets/mixins/all';