Contributing Documentation

This site is the official library for UCLA branded components and documentation on how to use them. As a proactive UCLA web community, we are always striving to improve and expand our library, with a governance process for reviewing contributed components. Anyone may contribute a component to the UCLA Web Component Library.

In this documentation we keep track of status types. If you’re familiar with open source projects then you will be familiar with this process. If not, please follow our principles and process closely and with a little bit of practice, you will learn to contribute and carry this knowledge into other projects. To join the discussion on what’s needed, please head to our forum.

These components are to be used on official university websites and applications.


Core Principles


We anticipate that there will likely be use cases we haven’t come across yet. We appreciate contributions based on current user and developer needs and insights into future needs.


Embrace the unknowns. Design and develop with flexibility in mind. Done is better than perfect.


ADA compliance is required legally, and as a trusted educational institute, it is our responsibility to uphold accessibility standards. All branches must first pass an ADA compliance assessment before being merged into the main branch.

The Process

Step One

See which issues currently need to be resolved. Please review our issue board. We use Bitbucket for our repository.

Step Two

Create your issue branch on the “campus” repository.

Step Three

Code! Make sure to follow the principles of our contributing guidelines listed above.

Step Four

Write the documentation for your component. Use either Component Documentation Template 1 (used for Tables) or Template 2 (used for Buttons).

Step Five

Once your code is ready for approval, you can create a pull request for your branch to be merged into the master repository. Our UCLA Web Components Library governance team will review your request and provide you with feedback. It is important to work with our governance team and follow the principles. Our governance team will test your component on all major web browsers and devices. Most pull requests will not get accepted on your first try, but we strongly encourage you to implement the feedback notes and try again!

Pull Request Review

Pull requests are reviewed the TBD of every month.

Strategic Communications

Strategic Communications is the steward and approver of the UCLA mark in marketing and advertising over delegated UCLA domains. For more information see policy 110 or contact Strategic Communications.

Strategic Communications will review each component before it is approved for “Ready” status. Each component must be on brand and follow the UCLA brand guidelines. The component submitter is responsible for supplying documentation on its use. Undocumented components will not be approved.

Strategic Communications will provide feedback if a component was not approved for use based on UCLA brand guidelines.


OIT/DCP is the campus approved accessibility experts in WCAG compliance. For information on ADA compliance contact ADA/504 compliance.

OIT/DCP will provide feedback on why a component was not approved for use according to the WCAG 2.0 AA compliance guidelines.

Get Started with the Repository

Visit the repository at the Strategic Communications Bitbucket:

This library was built on Fractal.

  1. Clone respository and run npm install
  2. Run gulp build
  3. Run gulp watch
  4. Navigate to http://localhost:3000

Gulp Tasks

Task Description
build Build Fractal framework, build expanded styling and scripts for both documentation and components library, and remove string filters (used for production versioning)
watch Start Fractal development web server, watch for styling and script changes for both the documentation and components library, and run linters for both the documentation and components library
*production Build Fractal framework and build compressed styling and scripts for both documentation and components library
*addImageFilterStrs Add filter string for images