cg-style v0.2.0

cg-style

The global style of cloud.gov

Dev setup

These instructions explain how to develop the cloudgov style while using it on another (companion) site. This allows to see the result of the style changes here on an actual cloud.gov site. This has already been started with cg-docs.

0. Ensure npm is installed.

1. In the cg-style repo, link the current module by running npm link in the root of the repo.

2. In the companion site repo, link the cg-style repo by running npm link cg-style in the root of the repo.

   • Confirm that the cg-style folder exists in node_modules folder.

3. In the cg-style repo, complete the build by running npm run build.

4. In the companion site repo, import cg style into the main sass file: @import "../node_modules/cg-style/css/cg_style.scss";.
5. In the companion site repo, run sass to build the cg-style repo into the css. This is best done through a script in package.json: "build": "node-sass static_src/main.scss static/css/main.css"

When writing styling code, make changes in the cg-style repo, run npm run build in the cg-style repo, run npm run build in the companion site repo, and changes should be built. Alternatively, both repos have a watch task which can be run with npm run watch to allow changes to propegate automatically.

There is a coding standards document that dictates standards and suggestions for how to write code: documentation/frontend_standards.md.

Run npm run lint to lint the codebase for style problems.