Paint.css is a pattern library consisting of lightweight, reusable modules for Circle based on yeti.css. It has been built to reflect Circle's visual and branding guidelines.
- How To Run
- Structure
- How To Include In Your App
- Custom Fonts
- CSS Reset
- Documentation
- Contributing
- License
For development mode:
npm install
npm start
The demo site will be available at http://localhost:8080
. You can use the livereload extension and files will automatically rebuild and reload in the browser when you change them.
Paint.css is located in lib/paintcss
and can be installed through npm. Variables and mixins can be found in lib/paintcss/globals
and components in lib/paintcss/components
. Markup for each component lives in public/templates
.
Note: installing paint.css will not include assets
or public
.
├── assets
│ ├── logos
│ └── swatches
├── lib
│ └── paintcss
│ ├── components
│ ├── globals
│ └── index.styl
└── public
├── css
├── images
├── js
├── styl
└── templates
Paint.css is a Stylus plugin, so you just need to ensure Stylus knows to use the plugin, and then import it in your app.
Make sure that you have stylus
available from command line:
npm install -g stylus
If you are compiling your Stylus with its command line interface, maybe directly or via a Makefile or similar, it's as easy as:
-
npm install paintcss --save-dev
-
Add "-u paintcss" to the command:
stylus -u paintcss ./path/to/app.styl
-
Now you can import paintcss, or a subcomponent of paintcss, in your app's .styl files:
@import 'paintcss' // or @import 'paintcss/components/type'
The simplest way to include Paint.css in a moonboots app is to use stylizer;
-
npm install paintcss --save
-
Add 'paintcss' to the list of plugins in stylizer in your beforeCSS moonboots build step:
beforeBuildCSS: function (done) { var plugins = ['paintcss']; if (config.isDev) { stylizer(stylesheetsDir + '/app.styl', stylesheetsDir + '/app.css', plugins, done); } },
-
Import Paint.css or a submodule of Paint.css in your app's .styl files:
@import 'paintcss' //or @import 'paintcss/components/type'
It's strongly recommended that you pin to a specific version of paint.css, so that updates to the styleguide don't break your site. To do that, reference a specific tagged release in your package.json by appending # to the git url, e.g.:
```js
//package.json
{
//...
"dependencies": {
"paintcss": "git+ssh://[email protected]/meetcircle/paint.css#v0.1.0"
},
//...
}
```
You can see the list of available releases at: https://github.com/meetcircle/paint.css/releases.
Paint.css defines Gotham Rounded as the default typeface. Use Typography.com to set up font serving accordingly or change the typeface variables here.
A CSS reset is included in Paint.css by default (namely normalize.css).
Documentation and examples of usage can be found on http://meetcircle.github.io/paint.css.
See the CONTRIBUTING.md for information on how to contribute to yeti.css.
MIT