qpp-style
Shared style guide across the QPP program.
This repository houses qpp-style
, a shared style guide/library for the QPP program. qpp-style
was built on top of bootstrap.
The purpose of qpp-style
is to provide assets such as CSS, SCSS, JS, images and fonts to design a site with the visual style of qpp.cms.gov
. This allows multiple sites built in separate repositories and with different languages to share a global style without repeating styling code. The qpp-style library is primarily distributed on the node/npm ecosystem.
Install and Use
node/npm
The best way to install qpp-style is with the node package manager or npm. If you haven't already cloned the qpp-style
repository, run the following command on a computer with node/npm installed to install qpp-style into your project.
npm install --save-dev CMSgov/qpp-style
Once installed, all the assets from qpp-style
need to be consumed by your project. The simplest way to to this is by copying over the relevant assets with build commands and include them from the html with link tags. For example:
- Build all assets that came with the module:
$ pushd .
$ cd ./node_modules/qpp-style
$ npm install
$ npm start
- Copy assets to project directory:
$ popd
$ mkdir -p public
$ cp -r ./node_modules/qpp-style/build/* public
- Create webpage:
$ touch public/index.html
- Link to css in html:
<html lang="en">
<head>
<link href="/css/qpp-style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>QPP Quality Payment Program</h1>
</body>
</html>
Another way to use the style is by importing the sass into your project. This can be done in the following way:
-
Copy the fonts to /fonts
:
$ mkdir -p fonts
$ cp -r ./node_modules/qpp-style/fonts/* fonts
-
Create a .scss
file and adding this line:
@import "../node_modules/qpp-style/styles/qpp_style";