Change.org CSS style guide
The style guide is a pattern library for Change.org apps. It is a set of design tools for the responsive, flexible, and efficient development of UI, as well as serving as a compass for consistency and intuitive experiences throughout the Change.org ecosystem. The goal is to eliminate the need for writing and maintaining CSS in the Change.org consumer apps.
Getting started
To make use of the Change.org pattern library in your app:
- Install via npm:
npm install change-styleguide - Or download the latest release
What's included
The package includes the source LESS files as well as the compiled CSS, so you can make use of it in whole or in part. What you get:
- Base styles: normalized elements, base styles for semantic HTML documents, global variables such as colors, and the complete icon suite.
- Utilities: oft-repeated, low-level structural and positional classes for common patterns or overrides, e.g. styles for text alignment
- Components: object-oriented classes for encapsulating style, semantics, and behavior for UI objects, e.g. modals
Documentation on how to use the patterns can be found at http://styleguide.change.org/user-interface/ or when running this repo locally.
Contribute
Please refer to the contribution guidelines for instructions on getting the style guide development environment set up. It also includes documentation on how to submit pull requests, our CSS code standards, and examples of all our CSS patterns.
Prettier
This repository uses Prettier to enforce a uniform code style. A precommit hook is setup to format the code once you run git commit. If you have an error in your code (e.g. missing a closing }), you will need to fix the error(s) and run git commit again. You will see the following when an error occurs:
✖ prettier --write found some errors. Please fix them and try committing again.