diff --git a/spec/elements/button.json b/spec/elements/button.json old mode 100755 new mode 100644 index 7a8ba679b..6789d7174 --- a/spec/elements/button.json +++ b/spec/elements/button.json @@ -1,110 +1,94 @@ { - - // 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" - ] + "Name": "Semantic Button", + "Description": "Buttons indicate a possible user action.", + "Definition": "Elements", + "Types": { + "Animated": ".ui.animated.button > .visible.content", + "Icon": ".ui.icon.button > .cloud.icon", + "Labeled Icon": ".ui.labeled.icon.button > .pause.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" + "Groups": {}, + "States": {}, + "Variations": { + "Social": [ + "facebook", + "twitter", + "google plus", + "vk", + "linkedin", + "instagram", + "youtube" + ], + "Sizes": [ + "mini", + "tiny", + "small", + "medium", + "large", + "big", + "huge", + "massive" + ], + "Ordinality": [ + "primary", + "secondary" + ], + "Basic": [ + "basic" + ], + "Colors": [ + "black", + "green", + "red", + "blue" + ], + "Toggle": [ + "toggle" + ], + "Feedback": [ + "positive", + "negative" + ], + "Fluid": [ + "fluid" + ], + "Circular": [ + "circular", + "circular icon" + ], + "Vertically Attached": [ + "top attached", + "bottom attached" + ], + "Horizontally Attached": [ + "left attached", + "right attached" + ] + }, + "Group Variations": {}, + "Definitions": { + "Animated": "A button can animate to show hidden content", + "Icon": "Groups can be formatted as icons", + "Labeled Icon": "Groups can be formatted as labeled icons", + "Buttons": "Buttons can exist together as a group", + "Icons": "Button groups can show groups of icons", + "Conditionals": "Button groups can be separated by conditionals", + "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", + "Disabled": "A button can show it is currently unable to be interacted with", + "Loading": "A button can show a loading indicator", + "Social": "A button can be formatted to link to a social website", + "Sizes": "Groups can have a shared size", + "Ordinality": "A button can be formatted to show different levels of emphasis", + "Basic": "A button group can be formatted to remove extra formatting", + "Colors": "Groups can have a shared color", + "Toggle": "A button can be formatted to toggle on and off", + "Feedback": "A button can be positive or negative:", + "Fluid": "Groups can be divided evenly to fit parent", + "Circular": "A button can be circular:", + "Vertically Attached": "A button can be attached to the top or bottom of other content", + "Horizontally Attached": "A button can be attached to the left or right of other content", + "Vertical": "Groups can be formatted to appear vertically" } - }, - - // 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" - } } \ No newline at end of file diff --git a/spec/elements/divider.json b/spec/elements/divider.json new file mode 100644 index 000000000..74d96c0d6 --- /dev/null +++ b/spec/elements/divider.json @@ -0,0 +1,35 @@ +{ + "Name": "Semantic Divider", + "Description": "A divider visually segments content into separate groups", + "Definition": "Elements", + "Types": { + "Divider": ".ui.divider", + "Vertical Divider": ".ui.vertical.divider", + "Horizontal Divider": ".ui.horizontal.divider", + "Icon Divider": ".ui.horizontal.icon.divider > .circular.heart.icon" + }, + "Variations": { + "Inverted": [ + "inverted" + ], + "Fitted": [ + "fitted" + ], + "Section": [ + "section" + ], + "Clearing": [ + "clearing" + ] + }, + "Definitions": { + "Divider": "A standard divider", + "Vertical Divider": "A divider can segment content vertically", + "Horizontal Divider": "A divider can segment content horizontally", + "Icon Divider": "A divider can include an icon", + "Inverted": "A divider can have its colors inverted", + "Fitted": "A divider can be fitted, without any space above or below it.", + "Section": "A divider can provide greater margins to divide sections of content", + "Clearing": "A divider can clear the contents above it" + } +} \ No newline at end of file diff --git a/spec/elements/header.json b/spec/elements/header.json new file mode 100644 index 000000000..4b54f6e36 --- /dev/null +++ b/spec/elements/header.json @@ -0,0 +1,59 @@ +{ + "Name": "Semantic Header", + "Description": "Headers provide a short summary of content", + "Definition": "Elements", + "Types": { + "Header": ".ui.header", + "Descriptive Headers": ".ui.header", + "Icon": ".ui.header", + "Page Headings": ".ui.header", + "Content Headings": ".ui.header" + }, + "States": {}, + "Variations": { + "Attached": [ + "top attached", + "bottom attached" + ], + "Floating": [ + "right floated", + "left floated" + ], + "Colors": [ + "black", + "blue", + "red", + "green", + "purple", + "teal" + ], + "Dividing": [ + "dividing" + ], + "Block": [ + "black block" + ], + "Inverted": [ + "inverted black block", + "inverted blue block", + "inverted red block", + "inverted green block", + "inverted purple block", + "inverted teal block" + ] + }, + "Definitions": { + "Header": "A standard header", + "Descriptive Headers": "Headers may have sub headers containing further context to the section", + "Icon": "A header can be formatted to emphasize an icon", + "Page Headings": "Headers may be oriented to give the heirarchy of a section in the context of the page", + "Content Headings": "Headers may be oriented to give the importance of a section in the context of the content that surrounds it", + "Disabled": "A header can show that it is inactive", + "Attached": "A header can be attached to other content", + "Floating": "A header can sit to the left or right of other content", + "Colors": "A header can be formatted with different colors", + "Dividing": "A header can be formatted to divide itself from the content below it", + "Block": "A header can be formatted to create a block", + "Inverted": "A header can have its colors inverted for contrast" + } +} \ No newline at end of file diff --git a/spec/elements/icon.json b/spec/elements/icon.json new file mode 100644 index 000000000..5682f0783 --- /dev/null +++ b/spec/elements/icon.json @@ -0,0 +1,28 @@ +{ + "Name": "Semantic Icon", + "Description": "An icon is a glyph used to represent another concept more simply", + "Definition": "Elements", + "Types": {}, + "States": {}, + "Variations": { + "Size": [], + "Link": [], + "Flipped": [], + "Rotated": [], + "Circular": [], + "Square": [], + "Colors": [], + "Inverted": [] + }, + "Definitions": { + "Disabled": "An icon can show that it is disabled", + "Size": "An icon can vary in size", + "Link": "An icon can be formatted as a link", + "Flipped": "An icon can be flipped", + "Rotated": "An icon can be rotated", + "Circular": "An icon can be formatted to appear circular", + "Square": "An icon can be formatted to appear square", + "Colors": "An icon can be formatted with different colors", + "Inverted": "an icon can have its colors inverted for contrast" + } +} \ No newline at end of file diff --git a/spec/elements/image.json b/spec/elements/image.json new file mode 100644 index 000000000..0f1a4daef --- /dev/null +++ b/spec/elements/image.json @@ -0,0 +1,36 @@ +{ + "Name": "Semantic Image", + "Description": "An image is a graphic representation of something", + "Definition": "Elements", + "Types": { + "Image": ".ui.medium.image", + "Image Link": ".ui.medium.image > ." + }, + "\n States\n ": {}, + "Variations": { + "Avatar": [ + "avatar" + ], + "Rounded": [ + "rounded" + ], + "Circular": [ + "circular" + ], + "Floated": [ + "small left floated", + "small right floated" + ] + }, + "Groups": {}, + "Definitions": { + "Image": "An image", + "Image Link": "An image can be formatted to link to other content", + "Disabled": "An image can show that it is disabled and cannot be selected", + "Avatar": "An image may be formatted to appear inline with text as an avatar", + "Rounded": "An image may appear rounded", + "Circular": "An image may appear circular", + "Floated": "An image can sit to the left or right of other content", + "Sizes": "A group of images can be formatted to have the same size." + } +} \ No newline at end of file diff --git a/spec/elements/input.json b/spec/elements/input.json new file mode 100644 index 000000000..1ea84bb25 --- /dev/null +++ b/spec/elements/input.json @@ -0,0 +1,38 @@ +{ + "Name": "Semantic Input", + "Description": "Inputs allow a user to enter information", + "Definition": "Elements", + "Types": { + "Input": ".ui.input > ." + }, + "States": {}, + "Variations": { + "Icon": [ + "icon" + ], + "Labeled": [ + "labeled" + ], + "Action": [ + "action" + ], + "Fluid": [ + "fluid icon", + "fluid action" + ], + "Size": [ + "mini icon" + ] + }, + "Definitions": { + "Input": "A standard input", + "Focus": "An input field can show a user is currently interacting with it", + "Loading": "An icon input field can show that it is currently loading data", + "Error": "An input field can show the data contains errors", + "Icon": "An input can be formatted with an icon", + "Labeled": "An input can be formatted with a label", + "Action": "An input can be formatted to alert the user to an action they may perform", + "Fluid": "An input can take the size of its container", + "Size": "An input can vary in size" + } +} \ No newline at end of file diff --git a/spec/elements/label.json b/spec/elements/label.json new file mode 100644 index 000000000..03a42d801 --- /dev/null +++ b/spec/elements/label.json @@ -0,0 +1,69 @@ +{ + "Name": "Semantic Label", + "Description": "Labels give descriptions to pieces of content", + "Definition": "Elements", + "Types": { + "Label": ".ui.label > .mail.icon", + "Detail": ".ui.label > .detail", + "Removable": ".ui.label > .delete.icon", + "Link": ".ui.label > .detail > .mail.icon", + "Image": ".ui.image.label > .", + "Corner": ".ui.right.red.corner.label > .heart.icon", + "Attached": ".ui.top.attached.label" + }, + "Variations": { + "Colors": [ + "black", + "green", + "red", + "blue", + "orange", + "purple", + "teal" + ], + "Horizontal": [ + "red horizontal", + "purple horizontal", + "red horizontal", + "horizontal" + ], + "Circular": [ + "black circular", + "green circular", + "red circular", + "blue circular", + "purple circular", + "teal circular" + ], + "Floating": [ + "floating red", + "floating teal" + ], + "Pointing": [ + "pointing", + "pointing below", + "pointing left", + "pointing right" + ], + "Size": [ + "small", + "large" + ] + }, + "Groups": {}, + "Definitions": { + "Label": "A basic label", + "Detail": "A label can contain a detail", + "Removable": "A label can contain a delete icon", + "Link": "A label can contain a text link", + "Image": "A label can be formatted to include an image", + "Corner": "A label can position itself in the corner of an element", + "Attached": "A label can attach to a content segment", + "Colors": "Labels can share colors together", + "Horizontal": "A horizontal label is formatted to label content along-side it horizontally", + "Circular": "Labels can share shapes", + "Floating": "A label can float above another element", + "Pointing": "A label can point to content next to it", + "Size": "Labels can share sizes together" + } +} \ No newline at end of file diff --git a/spec/elements/loader.json b/spec/elements/loader.json new file mode 100644 index 000000000..51efaa175 --- /dev/null +++ b/spec/elements/loader.json @@ -0,0 +1,36 @@ +{ + "Name": "Semantic Loader", + "Description": "Loaders lets a user know to wait for activity to finish", + "Definition": "Elements", + "Types": { + "Loader": ".ui.loader", + "Text Loader": ".ui.text.loader" + }, + "States": {}, + "Variations": { + "Inline": [ + "active inline" + ], + "Size": [ + "mini text", + "small text", + "medium text", + "large text" + ], + "Inverted": [ + "mini inverted text", + "small inverted text", + "medium inverted text", + "large inverted text" + ] + }, + "Definitions": { + "Loader": "A loader", + "Text Loader": "A loader can contain text", + "Active": "A loader can be active or visible", + "Disabled": "A loader can be disabled or hidden", + "Inline": "Loaders can appear inline with content ", + "Size": "Loaders can have different sizes", + "Inverted": "Loaders can have their colors inverted." + } +} \ No newline at end of file diff --git a/spec/elements/progress.json b/spec/elements/progress.json new file mode 100644 index 000000000..7f38f2883 --- /dev/null +++ b/spec/elements/progress.json @@ -0,0 +1,38 @@ +{ + "Name": "Semantic Progress", + "Description": "Progress bars show the percent of a task complete", + "Definition": "Elements", + "Types": { + "Progress Bar": ".ui.progress > .bar" + }, + "States": {}, + "Variations": { + "Attached": [ + "top attached", + "bottom attached" + ], + "Color": [ + "blue", + "black", + "green", + "red", + "blue", + "purple", + "teal" + ], + "Striped": [ + "striped" + ] + }, + "Definitions": { + "Progress Bar": "A standard progress bar", + "Active": "A progress bar can show activity", + "Successful": "A progress bar can show success", + "Warning": "A progress bar can show a warning state", + "Failed": "A progress bar can show failure", + "Disabled": "A progress bar can be disabled", + "Attached": "A progress bar can show progress of an element", + "Color": "Can have different colors:", + "Striped": "A progress bar can be striped" + } +} \ No newline at end of file diff --git a/spec/elements/segment.json b/spec/elements/segment.json new file mode 100644 index 000000000..0df903ffe --- /dev/null +++ b/spec/elements/segment.json @@ -0,0 +1,66 @@ +{ + "Name": "Semantic Segment", + "Description": "A segment is used to create a grouping of related content.", + "Definition": "Elements", + "Types": { + "Segment": ".ui.segment > .", + "Vertical Segment": ".ui.vertical.segment > .", + "Horizontal Segment": ".ui.horizontal.segment > .", + "Piled": ".ui.piled.segment > .", + "Stacked": ".ui.stacked.segment > ." + }, + "States": {}, + "Variations": { + "Inverted": [ + "inverted" + ], + "Raised": [ + "raised" + ], + "Colored": [ + "blue", + "orange", + "green", + "red", + "purple", + "teal" + ], + "Ordinality": [ + "primary", + "secondary", + "tertiary" + ], + "Circular": [ + "circular", + "inverted circular" + ], + "Floated": [ + "right floated", + "left floated" + ], + "Basic": [ + "basic" + ], + "Attached": [ + "top attached", + "attached", + "bottom attached" + ] + }, + "Definitions": { + "Segment": "A segment of content", + "Vertical Segment": "A vertical segment divides content vertically", + "Horizontal Segment": "A horizontal segment divides content horizontally", + "Piled": "A segment can be formatted to look like a pile of pages", + "Stacked": "A segment can be formatted to show it contains multiple pages", + "Disabled": "A segment may show its content is disabled\n \n Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n \n ", + "Inverted": "A segment can have its colors inverted for contrast", + "Raised": "A segment may be formatted to raise above the page.", + "Colored": "A segment can be colored", + "Ordinality": "A segment can be formatted to appear more or less noticeable", + "Circular": "A segment can be circular", + "Floated": "A segment cant sit to the left or right of other content", + "Basic": "A basic segment has no special formatting", + "Attached": "A segment can be attached to other content on a page" + } +} \ No newline at end of file diff --git a/spec/elements/step.json b/spec/elements/step.json new file mode 100644 index 000000000..3426cee13 --- /dev/null +++ b/spec/elements/step.json @@ -0,0 +1,24 @@ +{ + "Name": "Semantic Step", + "Description": "Steps show the current activity in a series of consecutive activities.", + "Definition": "Elements", + "Standard": {}, + "Groups": {}, + "States": {}, + "Variations": { + "Size": [ + "small", + "large" + ], + "Step": [ + "four" + ] + }, + "Definitions": { + "Step": "Steps can be divided evenly inside their parent", + "Steps": "A set of step", + "Active": "A step can be highlighted as active", + "Disabled": "A step can show that it cannot be selected", + "Size": "Steps can have different sizes" + } +} \ No newline at end of file