cg-style
This repository houses cg-style or cloudgov-style, a shared style library for the cloud.gov product ecosystem. Cloudgov-style was built on top of the US Web Design Standards.
The purpose of cg-style is to provide the assets such as CSS, SCSS, JS, images and fonts to design a site with the visual style of cloud.gov. This allows multiple sites built in separate repositories and with different languages to share a global style without repeating styling code. The cg-style library is primarily distributed on the node/npm ecosystem.
Install and use
node/npm
The best way to install cg-style is with the node package manager or npm. If you haven't already cloned the cg-style [repository for development use](#development, run the following command on a computer with node/npm installed to install cg-style into your project
npm install cloudgov-style --save
Once installed, all the assets from cg-style have to be consumed by your project. This can be done in multiple ways depending on what assets and your project setup. For example, a simple site could copy over the relevant assets with build commands and include them from the html with link tags.
# build commands
cp ./node_modules/cloudgov-style/js/* ./public/js
cp ./node_modules/cloudgov-style/css/* ./public/css
cp -R ./node_modules/cloudgov-style/img/**/* ./public/img
cp -R ./node_modules/cloudgov-style/fonts/**/* ./public/fonts
... Another possibility for importing the JS and SCSS is to use browserify and SASS to import them into the project.
;;Using svg images
Images that are part of the cg-style project are available as one central svg sprite with each image consisting of a svg <symbol>. To use these images, you can use the svg xlink attribute as follows:
<svg class="icon">
<use xlink:href="/public/img/cloudgov-sprite.svg#i-agreement"/>
</svg>
Development and contributing setup
See the CONTRIBUTING documentation.