{ // 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 "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" } }