Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
..
Failed to load latest commit information.
action_menu
buttons
confirm
contacts
date_selector
dialer
drawer
edit_mode
headers
icons
input_areas
keyboard_symbols
layout
lists
object_menu
progress_activity
scrolling
seekbars
shrinking_ui/images
smart-screen
status
switches
tabs
time_selector
value_selector
README.md
action_menu.css
animations.css
buttons.css
confirm.css
contacts.css
date_selector.css
drawer.css
edit_mode.css
headers.css
icons.css
input_areas.css
keyboard_symbols.css
layout.css
lists.css
object_menu.css
option_menu.css
progress_activity.css
scrolling.css
seekbars.css
shrinking_ui.css
status.css
switches.css
tabs.css
time_selector.css
value_selector.css

README.md

Building Blocks

Taxonomy

  • action_menu.css: context menus
  • buttons.css: common buttons
  • confirm.css: dialog boxes with message + accept/dismiss buttons
  • edit_mode.css: edition panels with a dialog-like button toolbar
  • headers.css: common header bars (title + navigation buttons)
  • input_areas.css: common input areas (e.g. search bars)
  • status.css: notification toasters
  • switches.css: checkboxes, radio buttons, ON/OFF switches

Specific Attributes

A data-type attribute is used when the type and role attributes are not specific enough. Here’s the list of its possible values.

  • action: used in action_menu.css, title + action selection + accept/dismiss buttons
  • confirm: used in confirm.css, message + accept/dismiss buttons
  • edit: used in edit_mode.css, edition panel with dialog-like button toolbar
  • object: used in action_menu.css, action selection + accept/dismiss buttons
  • switch: used in switches.css, turns a checkbox into an ON/OFF switch

Class Name Usage

We try to avoid arbitrary class names as much as possible, but sometimes we have to use some — here’s the list.

Common Class Names

Icons

  • .icon
  • .icon-add
  • .icon-back
  • .icon-close
  • .icon-dialog
  • .icon-edit
  • .icon-menu
  • .icon-user
  • .icon-view

Skins

  • .skin-dark
  • .skin-organic

Buttons

  • .danger: dangerous choice, e.g. delete something
  • .recommend: default/recommended choice, should be safe

Other

  • .action: applies to fieldset elements (explanation needed)
  • .bottom: bottom-positioned element, applies to search forms
  • .compact: compact list, applies to button lists
  • .full: full-width element, applies to buttons or search forms

Usage by Block

action_menu.css

None

buttons.css

  • .compact
  • .danger
  • .icon-dialog
  • .icon-view
  • .recommend

confirm.css

  • .full

edit_mode.css

  • .danger
  • .full
  • .icon
  • .recommend

headers.css

  • .icon
  • .icon-add
  • .icon-edit
  • .icon-close
  • .icon-back
  • .icon-menu
  • .icon-user
  • .skin-dark
  • .skin-organic

input_areas.css

  • .action (explanation needed)
  • .bottom
  • .full

status.css

None

switches.css

  • .danger

Future improves

  • Use [data-icon="name"] instead of .icon.icon-name