pier1/rocketbelt

Rocketbelt is a UX-focused, responsive, and mobile-first pattern library collaboratively assembled at Pier 1 Imports.

Rocketbelt

Rocketbelt is a UX-focused, responsive, and mobile-first pattern library collaboratively assembled at Pier 1 Imports.

rocketbelt.io | Rocketbelt on GitHub

Introduction

Rocketbelt is a pattern library that addresses recurring design problems across the ecommerce landscape.

It strives to be a comprehensive, living document that serves the clarity of design decisions. It facilitates a shared vocabulary and therefore a shared understanding of user interfaces.

The pattern library guarantees consistency in the online experience--critical since the experience is the brand.

Rocketbelt ensures UI components are reusable, efficient, and easily maintained. It accelerates UI development by providing building blocks to quickly build potentially complicated interactions. The pattern library allows rapid prototyping to also be high fidelity.

Features

• SASS-based patterns
• Auto-updating, inline code snippets
• Flexbox grid & component layouts
• Responsive & mobile-first
• User-definable browser support & prefix-free development
• Easy cross-browser/cross-device testing via BrowserSync
• Coming soon: Automated visual regression tests of all patterns

Getting Started

Browse the pattern library at rocketbelt.io or fork the GitHub repo! Then build your fork and run a local instance by running npm install && gulp.

Contributing

Rocketbelt is a collaborative, living document and your contributions are valued--please submit GitHub issues and pull requests.

Acknowledgements

BrowserStack generously supports Rocketbelt's goal of cross-browser & cross-device compatibility.

rocketbelt's Issues

Use postcss-normalize

Replace the static @import of normalize.css with a PostCSS plugin. This will slim down the built CSS and allow us to ditch parts of normalize.css as UA stylesheets become more consistent from browser to browser.

Tabcordion styling

Tweak the tabcordion styling to make what's clickable a little more obvious:

• Unselected tab text should be blue
• Selected tab text should be gray
• Fix the expand/collapse icon in accordion mode

Incorporate pattern regression tests with deployment

Visual regression tests need to run before each merge into develop or master.

Form Updates: Label Weight

Form labels need to stand out a little bit more—make them semibold.

Add skip navigation pattern

Should be .visually-hidden until it receives focus via keyboard. See starbucks.com for a great example.

Build .sass-lint.yml sort order from .csscomb.json

We need the property sort order defined in both .sass-lint.yml and in .csscomb.json so that

1. gulp lint-sass can enforces a property sort order
2. Editors can use CSS Comb to auto-sort properties in the preferred order (defined in .csscomb.json)

Because they're enforced via 2 different tools, there is duplicate information that could easily get out of sync.

To fix this, let's build a new Gulp task that reads the source-order properties from .csscomb.json, converts the array to YAML, and overwrites property-sort-order.order in .sass-lint.yml. This task should run as a prerequisite to the lint-sass task.

Build tag components

Rocketbelt needs tags with color & size variations. These will be used to draw attention to item metadata.

Build a Priority+ nav example

The UX team would love to test something vs. the hamburger on mobile. The Priority+ pattern makes a whole mess of sense to me and is easily implemented. Let's build a POC of this component.

See:

• Revisiting the Priority+ Pattern
• nav-priority
• PriorityNav.js

Build icons example page

Should use the SVG sprite to layout all the icons & serve as a reference on <use xlink:href="#rb-icon-foo" />

Append optional "enterprise" icons

Unicode convenience map/function

Unicode characters for generated content aren't easily remembered. Add a SASS function that wraps a map so that unicode characters can be accessed via something like unicode('nbsp'), unicode('horizontal-bar'), etc.

Add existing icons to Sketchfile

Bring icon font characters into the icons Sketchfile.

Add `sass-lint`

Start linting to boost code quality.

Add `a11y` linting.

Accessibility is a core tenet of Rocketbelt, but it's not yet baked in. An a11y linter needs to be part of a build task so that developing accessible components is easier, and so that a deployment can fail if it contains inaccessible component code.

Break Gulpfile into pieces

The project is big enough that the Gulpfile is becoming a bit unwieldy. Probably a good idea to chunk it up with a technique similar to this.

Document accessibility best practices

Super high-level. A future issue will be created for each component's a11y needs.

Feature :: Valid classes on forms fields

Dropping this in here for a possible feature of valid classes on form fields.

Inputs, selects, or textareas (I/S/T's) that have been appended a .valid class would have border with the success color.

• I/S/T's with focus should have focused styles instead of valid styles.
• I/S/T's not focused and not dirty should not be valid.

Update dependencies

Need to upgrade Jade to Pug and fix other outdated dependencies.

Add flexibility.js script

Rocketbelt needs to support IE9 (for now). It also needs to incorporate modern layouts via Flexbox. Luckily, flexibility.js can polyfill Flexbox properties in older browsers.

The Gulp task already generates the -js-* properties that flexibility.js targets… so Rocketbelt only needs to add the script itself.

Update grays

Based on feedback from Creative.

Add generated Sassdoc HTML to site

Add search in the nav

Something like lunr.js would be awesome.

Feature Detection

Rocketbelt needs to style certain elements differently on touch devices than on non-touch devices.

Build out pattern regression tests

Need to establish baselines for each pattern & each state.

Tags Default Size too large

needs to be smaller...

Some examples on the PDP:
https://invis.io/7S8WVBEM4

Rethink the default button

Creating a button—especially a primary button—should be intentional and take some amount of effort. Perhaps a button with no decorator (e.g. <button> or .button) should be a text button.

(This could ameliorate some of the crazy selectors generated by this chunk of SASS.)

Icon system with an SVG sprite

Icon fonts are so (new Date()).getFullYear() - 1. Create an icon font equivalent using an SVG spriting technique via gulp-svg-sprite. It would be great if all SVGs could be kept within one Sketch file, then exported via sketchtool and piped to gulp-svg-sprite.

Paragraph last-of-type margin

A zero-margin property was added for last-of-type during the initial typography design. This was implemented with longer-form use in mind but is requiring lots of overrides when content is sprinkled in between paragraphs. This property should be removed.

Dialog accessibility

To provide acceptable accessibility, the Rocketbelt dialog (modal) should:

• Allow keyboard navigation between default modal UI elements (close button, action buttons, etc.)
• Be closable via ESC or by clicking/tapping outside of the dialog
• Trap keyboard focus when opened
• Return keyboard focus to the element that opened the dialog
• Provide aria-labelledby & aria-label attributes to indicate the purpose/content of the dialog
• Use proper semantics
  • Dialog should be marked up as a <section> with role=dialog
  • Toggle the aria-hidden attribute when closed/opened
  • Use only <button> elements to close the dialog

Update accordion JS to allow panes to collapse.

Accordions currently always have 1 pane expanded. Update the Javascript to allow an open accordion pane to be collapsed.

Gallery & carousel should use chevron icons

Replace \276e, \276f with previous/next icons when they're added to Rocketbelt.

Fix SASS linting issues

Embetter the SASS by fixing common-sense linting issues. The fix should include updates to .sass-lint.yml to loosen rules where necessary.

Get rid of symlinks

Symlinks aren't needed outside of the build process, and are making life painful for users on Windows.

Left nav truncated

With too many items the left nav doesn't scroll and the items are truncated.

Tabcordion transitions

Tab highlight transitions are a little wonky.

Write Sassdoc comments

Do a better job documenting the coolness that's available in the tools folder.

Form Updates: Helper Text

Helper text needs to appear next to error text (instead of below) when both are present.

Slim down the navigation JS

It's more configurable than we need and consequentially is a bigger download than we'd like. Streamline the thing to reduce the overall page weight.

Get rid of JS dependency in tab component

CSS transitions should allow this to be pulled off without JS.

Fix initial `a11y` linting issues

Lots of a11y issues need to be cleaned up.

Responsive image gallery

An image gallery in Rocketbelt should display the carousel (thumbnails) as follows:

• Mobile widths: hidden
• Desktop/Tablet widths: below the main image

Radio button style

Default radio button styling looks disabled. Give it a 2px border with a white background instead of a solid gray background.

Rich tooltips

Rocketbelt's tooltips need to be augmented to work with HTML content. (Right now they're text-only based on data attributes.)
General AC:

• They should be able to be triggered via mouse or keyboard (triggering element should accept keyboard focus)
• Tooltip should be an element with role="tooltip" that's linked to the triggering element via aria-describedby
• Extend the existing tooltip styles
• Allow top/right/bottom/left positioning of tooltip (similar to existing text tooltip)

See http://codepen.io/mpiotrowicz/pen/PwQYMd for a good working example.

Basic image gallery

Rocketbelt lacks a basic image gallery. The experience must be touch-friendly and should closely mimic native behavior when swiping between images on mobile devices.

Add the Rocketbelt logo

Add the logo to README.md and to the _layout template to add some visual interest.

Form Updates: Touch-Friendly Input Height

Form fields need to be a touch-friendly height on touch devices.

Subpixel antialiasing

Light text on a dark background looks less than ideal. Add a subpixel antialiasing class to remedy this.

.selector {
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

Fix "last modified" times in sitemap

Pass a lastmod config function to gulp-sitemap that accounts for the git commit date of the corresponding index & partials.

Slim down modal JS

It's more configurable than we need and huge as a consequence. Streamline the thing to reduce the overall page weight.

IE fixes

The left nav is broken on the docs site in IE.