SemanSemantic-UItic-UI/spec/elements/button.json

{

  // Package Name (Name Type)
  "Name"         : "Semantic Button",

  // Version #
  "Version"      : "0.1",

  // Type of element
  "Type"    : "button",

  // Type of definition
  "Definition" : "Element",

  // ID of UI components that must be included
  "Dependencies" : [],

  // list of required components in "name type" format
  "Coupling"     : ["semantic icon",  "semantic loader"],

  // List of mutually exclusive types with their koan generators <https://github.com/zodoz/jquery-ZenCoding>
  "Types": {
    "Singular": {
      "Standard"     : ".ui.button",
      "Icon"         : ".ui.icon.button > i.add.icon",
      "Labeled Icon" : ".ui.icon.button > i.add.icon",
      "Social"       : [
        ".ui.facebook.button > i.facebook.icon",
        ".ui.twitter.button > i.twitter.icon"
      ]
    },
    "Plural": {
      "Standard"    : ".ui.buttons > .button+.button+.button",
      "Icon"        : ".ui.buttons > ( (.button > i.icon.user) + (.button > i.icon.heart) + (.button > i.icon.lab))",
      "Conditional" : ".ui.buttons > .button+.or+.button",
      "Vertical" : ".vertical.ui.buttons > .button+.button+.button"
    }
  },

  // Set of states that an element can occupy
  "States": {
    "Hover"    : "hover",
    "Down"     : "down",
    "Active"   : "active",
    "Loading"  : "loading",
    "Disabled" : "disabled"
  },

  // Sets of variations of an element
  "Variations" : {
    "Circular" : "circular",
    "Toggle"   : "toggle",
    "Fluid"    : "fluid",
    "Size"     : [
      "mini",
      "tiny",
      "small",
      "medium",
      "large",
      "huge",
      "massive"
    ],
    "Color" : [
      "black",
      "green",
      "red",
      "blue",
      "green",
      "red",
      "teal"
    ],
    "Feedback": [
      "positive",
      "negative"
    ],
    "Attached" : [
      "attached top",
      "attached bottom",
      "attached left",
      "attached right"
    ]
  },

  // Used with generators to create example content
  "Text": {
    ".button" : ["Button", "Follow", "Submit"]
  },

  // Your module may optionally include a text definition of its variations to help clarify their purpose. This may include the definition of types or variations
  "Definition": {
    "Standard"     : "A simple button",
    "Icon"         : "A button icon is formatted to contain only an icon",
    "Labeled Icon" : "A button can have an icon and a label",
    "Social"       : "A button can be formatted to link to a social website",

    "Hover"        : "A button can change to show a user has hovered their mouse",
    "Down"         : "A button can change when pressed using touch or mouse events",
    "Active"       : "A button can show it is currently the active user selection",
    "Loading"      : "A button can show a loading indicator",
    "Disabled"     : "A button can show it is currently unable to be interacted with",

    "Attached"     : "A button can attach to other content",
    "Circular"     : "A button can be circular",
    "Color"        : "A button can have different colors",
    "Fluid"        : "A button can be fluid",
    "Ordinality"   : "A button can blend into a page",
    "Size"         : "A button can vary in size",
    "Toggle"       : "A button can be formatted to toggle on and off"
  }
}