The (working) Visual, UI, and Front End Styleguide for edX.
CSS HTML JavaScript Ruby
Latest commit be21507 Mar 3, 2017 @bjacobel bjacobel committed on GitHub Merge pull request #380 from edx/bjacobel/release-0.18.1
Release 0.18.1
Permalink
Failed to load latest commit information.
.github Add a GitHub pull request template May 4, 2016
gulp Simplify and improve UXPL development/build process (#367) Sep 22, 2016
pattern-library Updated buttons to be more accessible. (#373) Nov 16, 2016
pldoc Updated buttons to be more accessible. (#373) Nov 16, 2016
.bowerrc pldoc: adding .bowerrc file to firm up location of installed packages Oct 14, 2015
.eslintignore Make entire repo pass ESLint (#344) Jul 22, 2016
.eslintrc.json Remove afontgarde edx-icons and modernizr files and add ESlint Jul 11, 2016
.gitignore Improve navigation and header May 5, 2016
.mention-bot Add some config for the mention bot (#336) Jun 22, 2016
.npmignore Add a Travis build May 17, 2016
.pr_cover_letter.md.j2 Clean up the gulp tasks for documentation May 3, 2016
.travis.yml Simplify and improve UXPL development/build process (#367) Sep 22, 2016
AUTHORS Configure Zappr (pull request approval bot) (#359) Aug 11, 2016
CHANGELOG.md Release 0.18.1 Mar 3, 2017
CONTRIBUTING.md Replace misplaced reference to UITK with UXPL (#331) Jun 3, 2016
Gemfile Convert to Webpack from gulp-sass May 17, 2016
Gemfile.lock Convert to Webpack from gulp-sass May 17, 2016
LICENSE updating documentation and supporting materials: Aug 31, 2015
README.md Removed reference to susy in readme. (#372) Nov 16, 2016
_config.yml Convert to Webpack from gulp-sass May 17, 2016
bower.json Release 0.18.1 Mar 3, 2017
gulpfile.js Make entire repo pass ESLint (#344) Jul 22, 2016
openedx.yaml Specify an owner Aug 23, 2016
package.json Release 0.18.1 Mar 3, 2017
webpack.config.js Fix issue where WDS HMR was not hot reloading Nov 4, 2016

README.md

edX Pattern Library

The (working) UI library and Front End Styleguide for edX/Open edX applications and sites.

GitHub version npm version Bower version


Table of Contents

  1. Overview
  2. License
  3. Dependencies
  4. Documentation
  5. Getting Started
  6. Contributions

Overview

This library contains the following:

License

The code in this repository is licensed the Apache 2.0 license unless otherwise noted. Please see the LICENSE file for details.

Dependencies

Using the edX Pattern Library source code in a project current requires:

  • Locally installing a package manager (either Node/npm or Bower).
  • Use of modern web browsers - see Open edX/edX browser support
  • The use and compilation of Sass into CSS using perferrably LibSass (if using the Sass method for including the pattern library).

Third Party Dependencies

Also, the Pattern Library currently relies on the following thrd party libraries:

Library Version Purpose
Bourbon 4.2.6 basic sass/CSS utilities
bi-app-sass latest right-to-left/left-to-right directional support for layouts
breakpoint-sass 2.6.1 CSS breakpoint/media-query management
Font Awesome 4.6.3 Accessibility-minded iconic font

Documentation

The edX Pattern Library has its own living documentation site at http://ux.edx.org. Additionally, we have many styleguides and how-to wiki documents in the Github repository.

Getting Started

Contributions

Contributions are very welcome. The easiest way is to fork this repo, and then make a pull request from your fork. The first time you make a pull request, you may be asked to sign a Contributor Agreement.

Please refer to our contributor guidelines in the main edx-platform repo for important additional information.

Contributing and the edX Pattern Library

There are a few additional details alongside our general guidelines to keep in mind contributing to the edX Pattern Library:

Pattern Library Features, Ideas, and Improvements

If you're looking to suggest an idea or you're thinking about developing a feature, start a discussion by visiting the Open edX JIRA site and create a new "Issue" by selecting the "Create" button at the top of the page. Choose the project "edX Pattern Library" and the issue type "New Feature" or "Improvement" (you may first need to create a free JIRA account).

Bugs and Issues

If you notice an issue or a bug with the Pattern Library, we would love ot hear about it! Follow the above instructions on logging a new edX Pattern Library JIRA issue and then assign the issue type of "Bug" to your issue. An edX UX & Front End Development Team member will then take it from there and triage your bug.

Conversely, if you want to help resolve any known bugs/issues, which are tracked in JIRA, you can create a free JIRA account and then comment on the ticket to indicate that you are working on it. Don't hesitate to ask clarifying questions on the ticket as needed, too, if anything is unclear.

Submitting Code

For code contributions, please open up a pull request! PRs will get OSPR tickets assigned to them, as mentioned in the above contributing guidelines.

Approval by UX and Front End Team Members

An edX UX or Front End Development Team member will be working with you on any pull requests you make. They will be evaulating your pull request from a design point of view as well as from a Front End Development perspective. Other team members as well as UI/Front End Developers may also lend a hand.

Tests

The edX Pattern Library source code doesn't currently leverage the Open edX test suite nor are there any automated tests configured for this codebase currently.

Front End Development Standards

In addition to the general contributor documentation, any contributions should meet specific Front End Development requirements, including the guidelines and principles listed in: