Setup

Developer Setup

0. Clone the master branch
   • git clone [email protected]:rackerlabs/helix-ui.git
1. Install a Node version manager
   • nodenv (recommended)
   • nvm
2. Install Node
   • From the root of the project, run...
     • nodenv: nodenv install
     • nvm: nvm install $(cat .node-version)
3. Install yarn
4. yarn install

QE Setup

0. Follow instructions in Developer Setup
1. Install wget
   • Mac
   • CentOS
2. Install/Update java
   • Mac
   • CentOS

Designer Setup

0. Clone the art branch
   • git clone -b art [email protected]:rackerlabs/helix-ui.git
1. Install Sketch version 47 or later
2. Install the SVGO Compressor Sketch plugin

Configure SVGO Compressor Plugin

NOTE: It seems that version 1.4.1 doesn't work with the latest Sketch. Looking at updates across BohemianCoding github projects and their beta release, they may be adding SVGO functionality into Sketch 50.

1. With Sketch open, go to Plugins > SVGO Compressor > About SVGO Compressor
2. In the modal that appears, click Edit SVGO Settings....
   • This should open the configuration file in a text editor.
3. Update "plugins" with the configuration shown below.
4. Save and close the configuration.

SVGO "plugins" configuration

{
  "plugins": [
    { "name": "cleanupIDs" },
    { "name": "cleanupListOfValues" },
    { "name": "cleanupNumericValues" },
    { "name": "collapseGroups" },
    { "name": "convertColors" },
    { "name": "convertPathData" },
    { "name": "convertShapeToPath" },
    { "name": "convertStyleToAttrs" },
    { "name": "convertTransform" },
    { "name": "mergePaths" },
    { "name": "minifyStyles" },
    { "name": "removeComments" },
    { "name": "removeDesc", "params": { "removeAny": true } },
    { "name": "removeDimensions" },
    { "name": "removeDoctype" },
    { "name": "removeEditorsNSData" },
    { "name": "removeEmptyAttrs" },
    { "name": "removeEmptyContainers" },
    { "name": "removeEmptyText" },
    { "name": "removeHiddenElems" },
    { "name": "removeMetadata" },
    { "name": "removeNonInheritableGroupAttrs" },
    { "name": "removeTitle" },
    { "name": "removeUnknownsAndDefaults" },
    { "name": "removeUnusedNS" },
    { "name": "removeUselessDefs" },
    { "name": "removeUselessStrokeAndFill" },
    { "name": "removeXMLProcInst" },
    { "name": "sortAttrs" }
  ]
}

Accessibility

Configuring your Mac for Keyboard Navigation

Certain browsers use the Mac OS system settings to apply keyboard navigation accessibility. To enable full keyboard navigation, enable the Keyboard setting shown in the image below.