Page tree
Skip to end of metadata
Go to start of metadata

Process Overview

  1. Collect real examples

    1. on

    2. from the iOS and Android apps

    3. on other sites

    4. from other pattern libraries
  2. Define attributes of thing, e.g., alert types

    1. visual

    2. contexutal

  3. Archetypes/Flavors of where we would use this?

    1. Think about pattern in general

    2. Try to find 2-4 examples of similarly implemented

  4. Whiteboard some design possibilities
    1. For example:
  5. Develop the visual design
    1. TODO: how will this work in the short term without Brian and Frances?
    2. Get approval from the various stakeholders
  6. Implement the pattern for the web
    1. Implement a new SASS partial
    2. Update the documentation
      1. Create a new "post" 
      2. Add example usages
      3. Add a "Mobile" section with the current best practices
    3. Add technical details to the wiki if necessary
      1. Describe configuration options
    4. Talk to the Accessibility team about the implications
  7. Create PR against
    1. Generate a preview using: gulp build-preview
    2. Use the Pattern Library PR Template
    3. Review the implementation
  8. Publish a new release
    1. Follow these steps: edX Pattern Library Release Process

Implementing a Pattern


The following abbreviated directory structure of the pattern library repository illustrates files that need to be added or modified when adding a new pattern.  In this example, the alert pattern is being added.

├── _posts
| └── patterns
| └── // 1. Add a new post with example usage of the new pattern
├── sass
| ├── _edx-pattern-library.scss // 2. Update this file to import new SASS partial
| └── patterns
| └── _alerts.scss // 3. Add a new SASS partial to style the new pattern

Theming Support

In order to support theming, SASS variables should be declared at the beginning of the pattern's SASS partial with the !default flag along with default values.  For example:

// ----------------------------
// ----------------------------
$alert-background-color: palette(grayscale, white) !default;

// alert colors
$alert-information-color: palette(information, base) !default;
$alert-warning-color: palette(warning, base) !default;

Right-to-Left (RTL)

We use Bi App Sass to support bi-directional sites.  In general, please use mixins when styling a left or right, as in the following example:

.alert-action {
    width: 100%;
	@include float(right);
    @include border-left(1px);
  • No labels