Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_uc.css, line 434

2.8 Extra Credit

Reserved Names

Reserved Words and Modifier Descriptors

These words should be used to describe states and generic elements of the UI and should be used instead of some variation or alternate name.

Component Name Modifier

Components styling is most are

  • ** -container ** or UI Name with no modifier (Use instead of holder when items are UI based)
  • ** -group ** or UI Name with no modifier (Use instead of list, holder, collection when items or repeatable Content)
  • ** -item ** or UI Name with no modifier (generic child of container or group)
  • ** -separator ** (a visual treatment or break between items within a container or group )

States

  • show
  • hide
  • is-active
  • is-complete
  • is-disabled
  • is-current
  • is-selected
  • focus
  • success
  • hover
  • warning
  • alert (Depreciate the use of ‘error’ for the native descriptor from foundation)
  • primary
  • secondary
  • reverse

Colors

  • State Colors
    • -success, -green
    • -warning, -orange
    • -alert, -red
    • -primary, -productColor
    • -secondary
    • -highlight
  • Black
  • White
  • Black and White have transparencies
    • -10 alpha,
    • -20 alpha,
    • -30 alpha,
    • -40 alpha,
    • -50 alpha,
    • -60 alpha,
    • -70 alpha,
    • -80 alpha,
    • -90 alpha