@buildit/gravity-ui-sass
Advanced tools
Comparing version 0.2.0 to 0.2.1
@@ -11,2 +11,13 @@ # Changelog | ||
## [0.2.1] - 2018-01-25 | ||
### Added | ||
- Basic developer and branching strategy docs | ||
### Changed | ||
- Colour particles in style guide now display a11y info | ||
### Fixed | ||
- Pre-compiled CSS is now correctly included in published NPM package | ||
## [0.2.0] - 2018-01-19 | ||
@@ -13,0 +24,0 @@ ### Added |
{ | ||
"name": "@buildit/gravity-ui-sass", | ||
"version": "0.2.0", | ||
"version": "0.2.1", | ||
"description": "A SASS UI library from the Buildit's Gravity design system", | ||
@@ -8,3 +8,3 @@ "main": "index.js", | ||
"index.js", | ||
"dist/css/gravity.css", | ||
"dist/ui-lib/", | ||
"src/ui-lib/" | ||
@@ -11,0 +11,0 @@ ], |
124
README.md
# gravity-ui-sass | ||
A SASS UI library from the Buildit's Gravity design system | ||
A SASS UI library from the Buildit's Gravity design system. | ||
## Pull Requests and Release process | ||
--- | ||
We are following these conventions: | ||
⚠️ This library is still under heavy development and does not yet have a stable API. | ||
- [semver](http://semver.org/) for versioning, | ||
- [changelog](http://keepachangelog.com/en/0.3.0/). | ||
--- | ||
**Before** opening a new PR, make sure you have added the changes done to the `CHANGELOG` file. | ||
**After** every successful merge the following commands are required to be issued by an admin: | ||
## Using this library | ||
$ npm version $type | ||
### Pre-requisites | ||
Where `$type` is either `major`, `minor`, or `patch` depending on the impact of the changes. | ||
* [SASS](http://sass-lang.com/) compilation setup in your project | ||
* `npm` (>= v5.6.0) | ||
* [Eyeglass](https://github.com/sass-eyeglass/eyeglass) (>= 1.3.0) | ||
Edit and commit the `CHANGELOG` updating the `[Unreleased]` tag to the new version followed by the date in the format `YYYY-MM-DD`, as per convention. | ||
### Installation | ||
Push the updated version in the `package.json`, `package-lock.json` and `CHANGELOG`, and the new git tag (which will automatically create a new release in GitHub): | ||
```bash | ||
$ npm install --save-dev @buildit/gravity-ui-sass | ||
``` | ||
$ git push origin master --tags | ||
### Usage | ||
In your own SASS you can then include Gravity like so: | ||
Release a new version to npm: **OBSOLETE** Publishing will be handled by Travis CI | ||
```sass | ||
@import 'gravity-ui-sass'; | ||
``` | ||
$ npm publish --access=public | ||
You can view all the available UI components in the [Buildit Living Style Guide](http://style.buildit.digital/). | ||
--- | ||
## Travis CI | ||
## Development | ||
### Documentation Changes | ||
### One-time setup | ||
If you do not want to build the pipeline because all you are changing is the Readme.md file, us `[ci skip]` in the commit message. | ||
1. Clone this repo: https://github.com/buildit/gravity-ui-sass | ||
1. Run `npm install` to install all the dev dependencies | ||
### Pipeline | ||
### Building and running the style guide locally | ||
- Any pushed commit got build (`npm run-script styleguide`) | ||
- Any successful build of `develop` branch get deployed to Staging | ||
- Any successful build of a Tag that begins with `v#.#.#` (case-sensitive) get deployed to Production | ||
We use Pattern Lab to generate our [Buildit Living Style Guide](http://style.buildit.digital/). During development, it's useful to build and run the style guide locally via: | ||
### Travis CI Setup | ||
Travis CI build expects the following environment variables: | ||
- `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY`: AWS credentials used for deploying | ||
- `STAGING_BUCKET` and `STAGING_BUCKET_REGION`: S3 bucket and Region for Staging environment | ||
- `PROD_BUCKET` and `PROD_BUCKET_REGION`: S3 bucket and Region for Production environment | ||
### Configuring Travis CI to Publish to NPM | ||
Verify you have ruby version > 1.9.3: | ||
```bash | ||
> ruby -v | ||
> ruby 2.4.0p0 (2016-12-24 revision 57164) [x86_64-darwin16] | ||
$ npm start | ||
``` | ||
Install the Travis CI CLI: | ||
This should also open the style guide in your default web browser. In any case, the URL will be listed in the console output. By default it is: http://localhost:3000/ | ||
```bash | ||
> gem install travis -v 1.8.8 --no-rdoc --no-ri | ||
``` | ||
The local server will then also watch source files under `src/` for changes and automatically trigger rebuilds & browser refreshes as necessary. | ||
> **NOTE**: It may be necessary to have XCode CLI if working on a Mac | ||
```bash | ||
> xcode-select --install | ||
``` | ||
### Building the style guide | ||
Edit your `.travis.yml` file to have a deploy provider: | ||
To only build the style guide (which is, in effect, a static HTML website) but _not_ run a local server, do: | ||
```yaml | ||
- provider: npm | ||
email: <BUILDIT_NPM_USER_EMAIL_ADDRESS> | ||
api_key: | ||
secure: <ENCRYPTED_NPM_AUTH_TOKEN> (*) | ||
on: | ||
repo: <GIT_REPO_NAME> (e.g. buildit/buildit for the Buildit Website) | ||
branch: <TARGETED_BRANCH> | ||
tags: <TRUE_OR_FALSE> (Whether to build on Tags) | ||
condition: <CONDITION_TO_ACTIVATE_ON> (i.e. a regex) | ||
...<ANY_OTHER_OPTIONS>... | ||
```bash | ||
$ npm run styleguide | ||
``` | ||
\* Generated using Travis-CI CLI, read below or click see [here](https://docs.travis-ci.com/user/deployment/npm/#NPM-auth-token) | ||
Note that this will _also_ build the UI library. The build output will go into `dist/`. You can view the style guide locally by opening `dist/index.html` in your browser. | ||
#### Travis Encryption of API Key for NPM | ||
This is mainly intended for automated build and deployments to our hosted [Buildit Living Style Guide](http://style.buildit.digital/). | ||
Travis needs to have access to the Buildit NPM account to be able to push the new artefacts to the NPM registry. As this is a public project it was decided to use a generic user account on NPM. The API key is then generated and linked to this account. | ||
> **NOTE**: To generate or protect the API key, it is required to have the Travis-CI CLI tool installed. Please see above for details. | ||
You must be logged-in on your NPM CLI instance in order to link your CLI environment to your remote Buildit NPM account. The following command will update your .npmrc file in your personal home directory once you have entered in all the security information: | ||
### Building the UI library only | ||
```bash | ||
> npm login | ||
``` | ||
To only build the UI library (without the style guide), use: | ||
After successful log on, navigate to your npmrc file (e.g. on a mac `/Users/<user>/.npmrc`), to retrieve the generated API key for the next steps. | ||
You must be logged-in on the Travis-CI CLI in order to link your CLI environment to your remote Travis-CI.org account: | ||
```bash | ||
> travis login --auto | ||
$ npm run build | ||
``` | ||
Run the following command to encrypt the NPM API key: | ||
The build output will go into `dist/` and, in this instance, only contains the artefacts that are needed when publishing the [`@buildit/gravity-ui-sass` NPM package](https://www.npmjs.com/package/@buildit/gravity-ui-sass). | ||
```bash | ||
> travis encrypt <API_KEY> -r buildit/gravity-ui-sass --org | ||
``` | ||
> **NOTE**: Do not use the `--add env.global` or any other permutation to the `travis encrypt` command, as it may overwrite other variables in your .travis.yml file. | ||
### Further information | ||
### Deployment | ||
* Coding standards (TBC) | ||
* Contribution guidelines (TBC) | ||
* [`git` branching strategy](./docs/branching-strategy.md) | ||
* [Release process](./docs/releasing.md) | ||
* [Travis CI setup](./docs/travis-ci.md) (for automated build & deplpoyments) | ||
Currently, deployment only means synchronising the output of the build (`./dist`) with an S3 bucket. | ||
S3 buckets and DNS have to be set up manually. |
15218
20
142
88