Skip to main content Skip to main navigation

Mercury UI Framework

Features

  • Accordions
  • Accordions to horizontal tabs
  • Accordions to vertical tabs
  • Alerts
  • Banded sections & hero banners
  • Buttons, button groups, & button badges
  • Cards
  • Dropdowns
  • Grid system using flexbox
  • Input styling & input groups
  • Mega menus & off canvas menus
  • Modals
  • Pagination
  • Responsive tables
  • Toolbars
  • Tooltips
  • Easily add & remove breakpoints using SASS maps
  • Responsive classes using breakpoints for most features
  • jQuery plugins with configuration settings and callbacks for accordions, tabs, dropdowns, mega menus, off canvas menus, and modals
  • Developed with ARIA attributes and accessibility in mind

Architecture

Atomic Design

The Mercury UI Framework follows the atomic design principles and patterns, with a slightly different naming convention for some pieces. This includes:

  • Base & Typography (Atoms)
  • Components (Molecules)
  • Layout (Organisms)
  • Templates
  • Pages

CSS

The Mercury UI Framework is built using SASS utilizing features such as variables, maps, mixins, includes, functions, nesting, and more. SASS partials live in a folder structure that resembles the atomic design list above. Folder structure is important to point out because each folder gains specificity as it moves down the list. This helps developers think about inheritance and should prevent code duplication and unwanted styling regressions.

SASS partials folder structure:

  • Variables
  • Maps
  • Mixins
  • Functions
  • Base
  • Typography
  • Components
  • Layout
  • Templates
  • Pages
  • Utilities

Our CSS also uses a flavor of the BEM pattern that utilizes double dashes.

  • Blocks: .horizontal-tab (Block names should be kept short and separated by single dashes)
  • Element: .horizontal-tab--tab-accordion (Elements repeat the block name, then are separated by double dashes; element names should also be kept short and separated by single dashes)
  • Modifiers: .tab-is-shown (Modifiers reference the block name, then use semantically named classes such as "is-shown" and "is-active")

jQuery

  • Accessibility
  • Callbacks

Gulp

  • Autoprefixer
  • cleanCSS

TODO

  1. Remove jQuery dependency
  2. Improve keyboard accessibility
  3. Change colors to CSS variables when browser support is better (Edge)
  4. Add ghost button styling
  5. Add responsive font sizing mixin

Resources