Name: Password: Sign in

Front-end Framework Structure


Grid System

12 col, responsive with width of device.

Attributes

  • Style : -default, -primary, -secondary, -info, -danger, -warn, -success, -left-icon, -right-icon
  • Size : -xl, -lg, -md, -sm, -xs
  • Shape : -oval, -round, -square
  • Joint : -pre, -joint, -app
  • Input Length : -xl, -lg, -md, -sm, -xs
  • Pseudo: :focus, :hover, :visited, :active, :checked, :disabled, :first-child, :last-child, :nth-child(n)

Element

Element\Attribute Style Size Shape Joint Input Length Pseudo
Heading
Paragraph
Unordered-list, Ordered-list
Link Y
Preview
Quote
Button Y Y Y Y Y
Input Y Y Y Y Y
Textarea Y Y Y Y
Select Y Y Y Y Y
Radio Y Y
Checkbox Y Y
Image Y Y Y

Functional

  • cell: set padding

Component

  • ut-headerthemed
    • logo
    • item
    • search
    • drop-down
      • drop-down-item
  • ut-carousel
    • focus
    • left-right
    • radio
  • ut-sidebar ( item up 2 to infinity ) themed
    • item
      • title
      • content
  • ut-hor-bar ( item up 2 to 10 ) themed
    • item
    • expand
      • expand-item
  • ut-banner ( item up 1 to 5 ) themed
    • concern
      • slogan
      • content
    • item plus horizental, left
      • image
      • header
      • content
  • ut-modal
    • header
    • content
    • footer
  • ut-indicator
    • badge
    • label
    • content
  • ut-alert with style
    • content
    • close
  • ut-tip ( hover near )
  • ut-tab: plus hor, ver ( hor up 2 to 10, ver up 2 tp 20 )
    • tab
    • content
  • ut-tile
    • wrap
      • image
      • text
  • ut-panel with style
    • title
    • badge
    • hover
    • breakLine
    • teaser

Icon Map

  • class*="icon-"