Web Apps

Web Apps Overview

Setup

• CDN / Preferred
• NPM / Managed Dependencies
• Pre-built
• React

Design Toolkits

Component Samples

Themes

• Overview
• Gray / Light
• Gray / Dark
• Blue / Light
• Blue / Dark

Grid System

• Overview
• Container
• Fluid Container
• Columns
• Offsets

Foundations

• Typography
• Roboto
• Headings
• Text Weights
• Text Alignment
• Body Text
• Contextual Alternatives
• Lists
• Blockquotes
• Monospace
• Keyboard Shortcuts
• Code Snippets
• Iconography
• Font Awesome
• Color
• Meaning
• Colors
• Brand
• Contextual Alternatives
• Backgrounds
• Palette
• Material / Shadows
• Basic
• Whiteframe / Card
• Depth

Buttons

• Raised Buttons
• Styles
• Usage
• Sizes
• Dropdowns / Dropups
• Block Buttons
• Groups
• Radio / Checkbox Groups
• Toolbars
• Flat Buttons
• Styles
• Sizes
• Dropdowns / Dropups
• Block Buttons
• Groups
• Radio / Checkbox Groups
• Toolbars
• Icon Buttons
• Basic
• Styled
• Segmented
• Floating Action Buttons
• Basic
• Mini
• Speed Dial

Forms

• Overview
• Input Types
• Text Inputs
• Static Control
• Checkboxes
• Switches
• Radios
• Select / Multi-select
• File Browser
• Date / Time Pickers
• Form Buttons
• Input Sizes
• Input Groups
• Text Addons
• Checkbox / Radio Addons
• Button Addons
• Dropdown Addons
• Help Text
• Validation States
• Required and Optional Inputs
• Horizontal Forms
• Text Inputs
• Static Control
• Checkboxes
• Switches
• Radios
• Select / Multi-select
• File Browser
• Date / Time Pickers
• Form Buttons
• Inline Forms
• Basic
• Borderless Forms
• Search Forms
• Sliders

Navigation

• Navbar
• Default
• Inverse
• Depth
• Contextual Buttons
• Banner Bar
• Internal
• External
• Brand Logo
• Bottom Nav
• Drawer / Sidebar
• Default
• Inverse
• Backdrop
• Overflow
• Collapsible Groups
• Dropdowns
• Toolbars
• Basic
• Primary Action
• Inputs
• Sizes
• Flat Variant
• Tabs
• Basic
• Inverse Variant
• Pill Variant
• Stacked Pills
• Steppers
• Vertical Variant
• Horizontal Variant
• Breadcrumbs
• Pagination
• Default
• Round Variant
• Pager

Containers

• Panels / Cards
• Basic
• Flat Panels
• Hoverable Panels
• Sections
• Contextual Alternatives
• Expandable Groups
• List Groups
• Basic
• Separators
• Custom Content
• Jumbotron
• Splash Screen
• Static
• Active
• Wells

Indicators

• Progress Indicators
• Progress Bar
• Spinner
• Alerts
• Badges / Labels

Content

• Tables
• Basic
• Striped Rows
• Condensed Rows
• Mixed Content
• Images
• Media Objects
• Chips

Overlays

• Tooltips
• Popovers
• Dialogs / Modals
• Toasts
• Toast Container
• Block Toast
• Pill Toast

Utilities

• Borders
• Additive
• Subtractive
• Color
• Display
• Notation
• Examples
• Flex
• Enable Flex Layout
• Direction
• Justify Content
• Align Items
• Align Self
• Auto Margins
• Wrap
• Order
• Align Content
• Sizing
• Width
• Height
• Spacing
• How It Works
• Notation

Charts and Graphs

• Color Palettes
• Categorical Data
• Semantic Data
• Sequential Data
• Typography
• Font Families
• Font Weights
• Chart Types
• Bar Chart (Horizontal)
• Bar Chart (Vertical)
• Line Chart

Examples

• External Website
• Login Page
• Web App
• Website
• Table
• Tabbed Card
• Tabbed Card Table
• Advanced Search
• Splash Screen

iOS

• Style Guide

Android

• Style Guide