bhanditz / css-chassis

An attempt at creating an open standard for both CSS and JavaScript UI libraries.

Chassis is creating open standards designed for CSS libraries, JavaScript UI libraries, and web developers in general. This project will define standards for markup and class names for common widgets and patterns, as well as an implementation of those standards. Similar to how DOM libraries can build upon Sizzle, we hope UI libraries will build upon this project.

Goals

• Broad Device Support: The number of devices being used around the world continues to grow. We aim to support a wide range of devices without sacrificing usability or aesthetics.
• Performance: The styles applied to your web page have a significant impact on, for example, how quickly the page can be rendered and how smoothly the page scrolls. We aim to keep this impact as small as possible.
• Modularity: Each component will be designed as separate modules, allowing customized builds of just the pieces you need.
• Pushing Web Standards: We will work with the W3C and WHATWG to improve CSS standards based on our work and feedback from the community.
• Collaboration: We value input and collaboration from the community. We don't want to just build yet another CSS library; we want to improve collaboration and interoperability across projects.

Project Collaboration and Interoperability

If you maintain a JavaScript library that has UI components, we'd love for you to join our efforts. We'd be happy to hear your feedback and work through updates of your project(s) to support Chassis. If you have the time and interest to help define the standards and improve on our implementation, that's even better! Check out the contribution guidelines for more information.

Getting started

Prerequisites

Node.js and npm should be installed, as well as grunt-cli.

Building

Once you've cloned Chassis to your machine, run these commands:

$ npm install
$ grunt build

Develop

To automate the build process during development, run the grunt watch task to compile SCSS upon file change.

$ grunt watch

Grunt Tests

To run the tests locally run:

$ grunt test

Make sure you run the tests before creating a pull request.

Performance testing

Setup

• Follow the steps for building above
• Ensure you have both Firefox and Chrome browsers installed
• Download and start CouchDB

Running the tests

Once you have completed the setup run this:

$ grunt perf

DO NOT USE YOUR COMPUTER WHILE TESTS ARE RUNNING

Once the tests completed, view the results.

Viewing the test pages

Follow the steps above to build. Once that is complete run this:

$ grunt connect:dev

This will start a connect server that will run until you stop it (Ctrl+C). Then go to http://localhost:4200/framework/{framework name}/component/{component name}/count/{ # of components to render}/ and you can see the generated test page.