Uniform

Uniform is a CSS/SCSS framework that is designed to be modular and streamline the development of responsive/fluid UIs.

This is accomplished through the use of flexbox for layout, combined with a typography-based layout system that takes the guesswork out of writing CSS to match a design.

Get Started

Prerequisites

• Node.js

Installing

Once you install Node.js, you can use the following to install all dependencies:

npm install

Build

We need to build before we can start up Kitchen Sink properly

npm run build

Start

After running the start command below, you should be able to see Kitchen Sink running in your browser at http://localhost:33546

npm run start

Demo

Kitchen sink is hosted on Github Pages.

Development

Currently the easiest way to test uniform changes locally:

1. Create/update Uniform branch and build

• Make your changes on your own Uniform branch
• Update version number as appropriate in Uniform package.json
• Build Uniform locally: npm run build

2. Update local CMS branch to use your Uniform branch

• Update CMS package.json to point to your local uniform build Example: "@edlio/uniform": "../uniform/"
• Do npm install on CMS in order to pull in your Uniform branch
• Rebuild CMS with appropriate gulp commands
• Your Uniform changes should now take effect

QA

Preparing your PR for QA testing is similar to testing on local environment. It's simple if you've already checked your changes locally

1. Commit/push Uniform branch to Github

• Push Uniform branch with build artifacts to Github

2. Update/deploy CMS branch with updated package.json/package-lock.json to QA

• Update CMS package.json to include path to your Uniform branch. Example: "@edlio/uniform": "git+ssh://git@github.com/edlio/uniform.git#[your-branch-name]".
• QA can't see your Uniform changes without CMS pointing to your Uniform branch. Uniform changes must be accompanied by a CMS PR with an updated package.json/package-lock.json. Keep package.json pointing directly at your new Uniform branch
• QA should be ready to test using your Uniform branch

Deployment

When you're satisfied with the results from testing your Uniform branch locally, follow these steps to deploy your changes.

1. Edit your Uniform/CMS PR to prepare for CC and publishing to NPM

• Build artifacts should not be in a final PR for Uniform. Uniform is rebuilt on production. Revert changes to build artifacts using git checkout origin/master docs libs. Commit/push these changes to remove these cluttering file changes
• Ensure that your Uniform version in package.json has been incremented properly
• On your CMS PR, change package.json to point to the new Uniform version instead of directly to a Uniform branch. Example: "@edlio/uniform": "1.14.25",. Commit and push this change

2. Get CC on Uniform/CMS PRs

3. Merge Uniform PR

4. Publish your new Uniform version

First timers

• In order to publish you must be part of the NPM member list. Contact any member on this list to be added to the team list if you're not on it already.
• Use npm adduser to associate your machine with your npm account

Publish Instructions

• On your machine, navigate to Uniform master branch (your branch should already be merged to master)
• Pull latest master branch. You MUST be on master branch before publishing
• Run npm run publish
• Check Uniform to ensure the new version has been published

5. Merge/deploy CMS PR

• Production CMS will not actually pick up the new Uniform changes until you deploy your CMS PR that points to the newly published Uniform version
• Merge/deploy your CMS PR with the updated package/package-lock.json
• Check changes to ensure everything works properly and looks good
• If there is a problem - simply revert CMS PR so that CMS simply points back at the old Uniform version, then go back and retool

Authors

• Graham Butler
• Eric Liao

License

TBD

Acknowledgements

• Big credit to Graham Butler for his initiative on the project and getting to where we are