change-styleguide

:warning: DEPRECATED - only update dependencies if needed

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.