SetupGetting Started

There are a few requirements and setup steps for integrating Amino into your app.

Technologies

Amino consists of components and styling utilities. Components are built with ReactJS and styling is exposed in Sass as files of either classes, or variables, functions and mixins. These assets can be imported into your project however you like.

Installing

Amino is distributed as a private gem on GemFury. Here's how to get it installed.

  • Configure your NPM setup to use the Transcriptic GemFury proxy. This is most easily accomplished by adding a .npmrc file to your project with this content:
    
                                registry=https://npm-proxy.fury.io/transcriptic/
                                @transcriptic:registry=https://npm.fury.io/transcriptic/
                                //npm.fury.io/transcriptic/:_authToken=${NPM_PROXY_TOKEN}
                                always-auth=true
                              
    Be sure to expose NPM_PROXY_TOKEN as a environmental variable.
  • Install Amino with yarn add @transcriptic/amino.
  • Ensure the Amino styling path (/node_modules/@transcriptic/amino/dist/styling/) is in scope for Sass imports for your build tool. The proper path can be accessed by requiring Amino in your build tool:require('@transcriptic/amino/dist/styling/index.js').includePaths. For Webpack, you would provide this include path to your Sass loader.
  • Include the Amino Sass classes once at the top level of your Sass: @import 'amino-classes';. Make sure these are not imported in a file that itself is imported multiple times. Otherwise, your final CSS will contain duplicated classes.
  • Include the Amino Sass utilities (variables, mixins and functions) at the very top level of your Sass to ensure global availability: @import 'amino-utilities';
  • Import the compiled Amino CSS either in an HTML template, or in your Sass/CSS. In WebPack when using Sass Loader you can import the file using the special Sass Loader module path syntax: @import '[email protected]/amino/dist/main.css';
  • With styling imported, Amino components can be imported in your React code like so: import { Button, Label, ... } from '@transcriptic/amino';

You should be good to go now!