Member Experience (MX)

MX is built on top of Daxko’s common components, but adds specialized components and colors made specifically to serve members and to match the client’s branding.

Theming

With MX, themes can be created to add accent colors that match a client’s branding.

When styling components, a good rule of thumb to follow is that actions should use a primary color, while accent elements should use a secondary color.

Theme Colors

For simple text components, you can use a .theme–level-shade class to add accent colors to specific elements. There’s 2 levels of color, primary and secondary along with 3 shades of color, light, medium, and dark.

<h3 class="theme--primary-dark">Theme Primary Color (Dark)</h3>
<h3 class="theme--primary-med">Theme Primary Color (Medium)</h3>
<h3 class="theme--primary-light">Theme Primary Color (Light)</h3>
<h3 class="theme--secondary-dark">Theme Secondary Color (Dark)</h3>
<h3 class="theme--secondary-med">Theme Secondary Color (Medium)</h3>
<h3 class="theme--secondary-light">Theme Secondary Color (Light)</h3>

Advanced Theming

For more complex theming, such as changing colors based off of state or background colors, you can add your theme colors to mx_themes/_theme.scss. Only theme colors should be placed in this file. Positioning and layout values should otherwise be placed in their component file.

Nav

The nav component is a mobile only fixed header that gives the current page’s context along with navigational links.

<nav class="nav" role="navigation">
  <button type="button" class="nav--left">
  </button>
  <div class="nav--title">Association Name</div>
  <button type="button" class="nav--right">
  </button>
</nav>

Page Layouts

Page layouts are a mobile only component allowing you to layout elements following the nav component. Include a .page class to your element to automatically account for the correct spacing and scrolling after the nav.

<nav class="nav">...</nav>
<div class="page">
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
</div>

Advanced Layouts

The page layout can be customized to set the background color or adjust the padding, depending on the type of content you want to display.

Dark Background

Include a dark background by adding a .page--dark to your element.

<nav class="nav">...</nav>
<div class="page page--dark">
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
</div>

Condensed Padding

Condense the default padding with .page--small-padding.

<nav class="nav">...</nav>
<div class="page page--small-padding">
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
</div>

No Padding

Remove any padding with .page--full-width allowing your content to fill the full width of the device.

<nav class="nav">...</nav>
<div class="page page--full-width">
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
</div>

Full Screen

For content that does not need to account for the nav element, you can use .fullscreen.

<nav class="nav">...</nav>
<div class="fullscreen">
  <div class="tile">...</div>
  <div class="tile">...</div>
  <div class="tile">...</div>
</div>

Tiles

Tiles are used to group and display a list of tiles of related content using a .tile class. Tiles work best visually inside a dark contrasting element to help provide spacing between groups of tiles.

<div class="tile">
  <h3 class="theme--secondary-med">Personal Training - 1 Session</h3>
  <ul>
    <li>Jan 1 - 31, 2016</li>
    <li>Ages 13+</li>
  </ul>
</div>
<div class="tile">...</div>
<div class="tile">...</div>

Tile Headers

You can separate specific groups of tiles by including a .tile--header element between the tiles you want to group.

<div class="tile--header">3pm</div>
<div class="tile">...</div>
<div class="tile">...</div>
<div class="tile--header">4pm</div>
<div class="tile">...</div>

Tile Descriptions

Additionally, tiles can include descriptions that give additional context for each tile.

<div class="tile">
  ...
  <div class="tile--description">
    Join your friends as you learn to weave intricate baskets in a harsh underwater environment.
    (Note: Underwater breathing apparatus not included)
  </div>
</div>

Buttons

Buttons slightly differ in MX, in that only standard .btn and .btn-primary are supported.

<button type="button" class="btn">Button</button>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn" disabled>Button</button>
<button type="button" class="btn btn-primary" disabled>Primary Button</button>
<div class="btn-group">
  <button type="button" class="btn">A</button>
  <button type="button" class="btn">B</button>
  <button type="button" class="btn">C</button>
</div>

Inverted Buttons

For elements that have a solid background, .btn-inverted is available.

<button type="button" class="btn btn-inverted">Button</button>
<button type="button" class="btn btn-inverted" disabled>Disabled Button</button>
<div class="btn-group">
  <button type="button" class="btn btn-inverted">A</button>
  <button type="button" class="btn btn-inverted">B</button>
  <button type="button" class="btn btn-inverted">C</button>
</div>

Calendar

Use the calendar to display and filter schedule for a particular week.

<ul class="calendar-week">
  <li class="calendar-week--day">
    <div class="calendar-week--day-name">Mon</div>
    <div class="calendar-week--date">1</div>
  </li>
  <li class="calendar-week--day calendar-week--active">
    <div class="calendar-week--day-name">Tue</div>
    <div class="calendar-week--date">2</div>
  </li>
  <li class="calendar-week--day">
    <div class="calendar-week--day-name">Wed</div>
    <div class="calendar-week--date">3</div>
  </li>
  ...
</ul>

Cards

Cards are primarily used to display member cards on mobile, and styled in order to be stacked while still displaying the card title.

<div class="card-list">
  <div class="card">
    <div class="card--title">Wally</div>
    <div class="text-center">
      <svg class="card--barcode" viewBox="0 0 156 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
        ...
      </svg>
      <div class="card--number">123456</div>
    </div>
  </div>
  <div class="card">
    <div class="card--title">Kirsten</div>
    <div class="text-center">
      <svg class="card--barcode" viewBox="0 0 156 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
        ...
      </svg>
      <div class="card--number">123456</div>
    </div>
  </div>
  <div class="card">
    <div class="card--title">Jason</div>
    <div class="text-center">
      <svg class="card--barcode" viewBox="0 0 156 100" xmlns="http://www.w3.org/2000/svg" version="1.1">
        ...
      </svg>
      <div class="card--number">123456</div>
    </div>
  </div>
</div>

Loader

When performing asynchronous actions that may cause some delay, you can use a .loader element to indicate that something is happening in the background.

<div class="loader"></div>