• Set $width to 56px
• Set $icon-color to rgba(0, 0, 0, 0.54) or white

https://codepen.io/SimplyCodin/pen/RxrwpY

Follow the new Navigation Rail specifications and [Bottom Navigation] specifications.

Table of Contents

• Tasklist
• Specs

Tasklist

Core

• Use CSS Grid (?)
• Use nested elements and classes instead of BEM style classes
• Replace Classes with Custom Attributes (?) - Cleaner co
• Add MIT LICENSE and Update LICENSE headers
• Replace SASS Variables with CSS Variables
• Output in /dist instead of root folder
• Switch to SugarSS over Sass (?)
• Repo Maintenance
  • Remove Lockfiles (NPM and Yarn) and Prepros Config
  • Replace gulpfile with npm script based build system
  • Update demo

Mobile

• Verify Spec Compliance

Desktop

• Widen the rail
• Change Item Size
• Add Labels

Specs

Core

• Container
  • Item
    • Align: Center
    • Icon
      • Size: 2px

Mobile

• Container (Navigation Bar)
  • Width: 76px
  • Item:
    • Height: 56px
    • Width: 80px
    • Max Width: 168px (?)
    • Margins
      • Top: 14px
      • Bottom: 16px
    • Label
      • Height: 12px
      • Font Size: 12px

Desktop

• Container (Rail)
  • Margin
    • Top: 8px
  • Width: 76px
  • Item:
    • Size: 76px
    • Margins
      • Top: 14px
      • Bottom: 16px
    • Label
      • Font Size: 14px