gdotdesign / mui

MUI - Modern User Interfaces

MUI

MUI is a UI Libarary / Framework that doesn't suck. It offers Custom Elements with just vanilla JavaScript & CSS and nothing else, no shadow dom, no scoped style, no voodoo nor magic, and still works in every modern browser.

Basic concepts

• Exetensible
• Simple
• Only Custom Elements ( no input, textarea, select, etc...)
• Modular
• Keyboard Support
• Touch Support
• Same Look and Feel everywhere
• Test (CI)
• Modern

Guidelines

If you want to create a new (not existing) component, these are the guidelines to follow:

• Every component must be implemented in CoffeeScript.
• Every component must implement a disabled state.
• Every component must implement a public API.
• Every component must be tested extensivly.
• Every component must be documented.
• Every component must use the UI.Events event types.
• Every component must extend either UI.Abstract or an other component.
• Every component must be skinned at least in one theme.
• A component in disabled state can only be manipulated with the API (not with user interaction).
• A component should not leak
• A component must not use CSS classes for control.
• A component should use attributes for control.
• A component which implements properties must use the @get and @set property constructors.
• Any CSS references to an other component must be made with SELECTOR method: @button = @querySelector(UI.Button.SELECTOR())

Contributing

You can contribute by:

• Creating new a Component
  • Fork the repo
  • Create component
  • Create tests and documentation
  • Create a pull request
  • The Component will be reviewed and accepted if it meets the Guidelines.
• Submitting / Fixing bugs
• Testing MUI in real world projects
• Publishing articles about MUI (tutorials, reviews, comparissons, etc...)
• Staring this repo
• Sharing this repo

Polyfills / Extensions

The library provides the following polyfills / extensions (in vendor/shims.js):

• requestAnimationFrame
• matchesSelector
• console
• Element::toggleAttribute
• Element::click
• Function::bind
• window.scrollY
• Number::clamp
• Number::clampRange

Browser Support

• IE9+
• Chrome
• Firefox
• Safari
• Opera
• Android(4+)
• iOS

mui's Issues

Context

https://github.com/gdotdesign/mui/tree/compontent/context

Core

• Abstract
• Drag
• iCheckable
• iInput
• iOpenable
• UI

Specs

• ui-button
• ui-checkbox
• ui-color
• ui-dropdown
• ui-email
• ui-form
• ui-grid
• ui-label
• ui-modal
• ui-option
• ui-page
• ui-pager
• ui-radio
• ui-range
• ui-select
• ui-slider
• ui-text
• ui-texarea
• ui-toggle
• ui-tooltip

Views

Create View class for compositing other classes

Popover

Bootstrap like popvers
http://twitter.github.io/bootstrap/javascript.html#popovers

Add Pointer Events (Support)

Documentation

Core

• Abstract
• Drag
• iCheckable
• iInput
• iOpenable
• UI
• Color

Components

• ui-button
• ui-checkbox
• ui-color
• ui-dropdown
• ui-email
• ui-form
• ui-grid
• ui-label
• ui-modal
• ui-option
• ui-page
• ui-pager
• ui-password
• ui-radio
• ui-range
• ui-select
• ui-slider
• ui-text
• ui-texarea
• ui-toggle
• ui-tooltip

Number Input

Default Theme

• theme
• ui-button
• ui-checkbox
• ui-color
• ui-dropdown
• ui-email
• ui-form
• ui-grid
• ui-label
• ui-input
• ui-modal
• ui-option
• ui-page
• ui-pager
• ui-radio
• ui-range
• ui-select
• ui-slider
• ui-text
• ui-texarea
• ui-toggle
• ui-tooltip

Keyboard support

Add keyboard support to all Components.

• UI.Button - Trigger action on enter
• UI.Color - Open / Close picker on focus / blur
• UI.Range - Increment / Decrement on up, right / down, left
• I.Checkable - Toggle checked state on enter
• UI.Tooltip - Toggle on alt
• UI.Toggle
  • Toggle checked state on enter
  • Checked / Uncheked on right / left
• UI.Select
  • Open / Close dropdown on focus / blur
  • Next / Previous on up, right / down, left

Tabs

Components

• ui-button
• ui-checkbox
• ui-color
• ui-dropdown
• ui-email
• ui-form
• ui-grid
• ui-label
• ui-modal
• ui-option
• ui-page
• ui-pager
• ui-radio
• ui-range
• ui-select
• ui-slider
• ui-text
• ui-texarea
• ui-toggle
• ui-tooltip

Website

Form input validations

Validation types (UI.validators):

• required
• maxlength
• pattern
• email
• custom function

Validators by component (specs):

• iInput -> required, maxlength, pattern
• iCheckable (checkbox, toggle) -> required
• UI.Email -> iInput + email
• UI.Text -> iInput
• UI.Textarea -> iInput
• UI.Select -> required
• UI.Number -> required

Additinons:

• UI.Form
  • #valid
  • #invalid
  • validate()

States (Style)

• [valid]
• [invalid]

Events

• validate (true / false)