richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

swaps all docs to use ui headers instead of h1-h6

pull/13/head
Jack Lukic 12 years ago
parent
0a1bbb4c61
commit
96f03b01e7
5 changed files with 131 additions and 126 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 56
      node/src/documents/collections/form.html
  2. 38
      node/src/documents/collections/grid.html
  3. 93
      node/src/documents/collections/menu.html
  4. 36
      node/src/documents/collections/message.html
  5. 34
      node/src/documents/collections/table.html

56
node/src/documents/collections/form.html
View File

@ -7,7 +7,7 @@ type : 'UI Collection'
--- ---
<div class="segment"> <div class="segment">
<div class="container"> <div class="container">
<h1>Form</h1>
<h1 class="ui dividing header">Form</h1>
<p>Forms are a grouping of elements requiring user input.</p> <p>Forms are a grouping of elements requiring user input.</p>
<p> <p>
Forms always include fields, and fields always contain form elements. Fields themselves may also include: Forms always include fields, and fields always contain form elements. Fields themselves may also include:
@ -28,10 +28,10 @@ type : 'UI Collection'
<a class="item">Variations</a> <a class="item">Variations</a>
</div> </div>
</div> </div>
<h2>Collection</h2>
<h2 class="ui dividing header">Collection</h2>
<div class="example"> <div class="example">
<h4>Form:</h4>
<h4 class="ui header">Form:</h4>
<p>A form is a collection of user input elements, and has no stylings of its own.</p> <p>A form is a collection of user input elements, and has no stylings of its own.</p>
<div class="ui info message"> <div class="ui info message">
<p>This example uses a ui segment to add the padding and background color. This is not required.</p> <p>This example uses a ui segment to add the padding and background color. This is not required.</p>
@ -67,10 +67,10 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h2>Elements</h2>
<h2 class="ui dividing header">Elements</h2>
<div class="example"> <div class="example">
<h4>Field</h4>
<h4 class="ui header">Field</h4>
<p>A field is a form element containing a label and an input</p> <p>A field is a form element containing a label and an input</p>
<div class="ui form"> <div class="ui form">
<div class="field"> <div class="field">
@ -81,7 +81,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Text Area</h4>
<h4 class="ui header">Text Area</h4>
<p>A textarea uses the default form element</p> <p>A textarea uses the default form element</p>
<div class="ui form"> <div class="ui form">
<div class="field"> <div class="field">
@ -92,7 +92,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Checkbox</h4>
<h4 class="ui header">Checkbox</h4>
<p>Checkboxes are styled forms of standard form checkboxes.</p> <p>Checkboxes are styled forms of standard form checkboxes.</p>
<div class="ui form"> <div class="ui form">
<div class="field"> <div class="field">
@ -113,7 +113,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Radio Box</h4>
<h4 class="ui header">Radio Box</h4>
<p>Radio boxes are styled forms of standard form radio controls.</p> <p>Radio boxes are styled forms of standard form radio controls.</p>
<div class="ui form"> <div class="ui form">
<div class="inline field"> <div class="inline field">
@ -155,7 +155,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Text Block</h4>
<h4 class="ui header">Text Block</h4>
<p>Text blocks have special meaning inside a form tag. All message blocks are hidden by default.</p> <p>Text blocks have special meaning inside a form tag. All message blocks are hidden by default.</p>
<div class="ui form"> <div class="ui form">
<div class="ui message"> <div class="ui message">
@ -168,12 +168,12 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h2>States</h2>
<h2 class="ui dividing header">States</h2>
<h3>Form</h3>
<h3 class="ui header">Form</h3>
<div class="example"> <div class="example">
<h4>Loading</h4>
<h4 class="ui header">Loading</h4>
<p>If a form is in loading state, it will automatically show a loading indicator:</p> <p>If a form is in loading state, it will automatically show a loading indicator:</p>
<div class="ui loading form segment"> <div class="ui loading form segment">
@ -207,7 +207,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Error</h4>
<h4 class="ui header">Error</h4>
<p>If a form is in an error state, it will automatically show any error message blocks:</p> <p>If a form is in an error state, it will automatically show any error message blocks:</p>
<div class="ui error form segment"> <div class="ui error form segment">
<div class="ui error message"> <div class="ui error message">
@ -244,7 +244,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Warning</h4>
<h4 class="ui header">Warning</h4>
<p>If a form is in warning state, it will automatically show any warning message block:</p> <p>If a form is in warning state, it will automatically show any warning message block:</p>
<div class="ui warning form segment"> <div class="ui warning form segment">
@ -284,10 +284,10 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h3>Form Fields</h3>
<h3 class="ui header">Form Fields</h3>
<div class="example"> <div class="example">
<h4>Error</h4>
<h4 class="ui header">Error</h4>
<p>Individual fields may contain an error state</p> <p>Individual fields may contain an error state</p>
<div class="ui form segment"> <div class="ui form segment">
@ -305,7 +305,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Disabled</h4>
<h4 class="ui header">Disabled</h4>
<p>Individual fields may be disabled or read only</p> <p>Individual fields may be disabled or read only</p>
<div class="ui form segment"> <div class="ui form segment">
@ -322,12 +322,12 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h2>Variations</h2>
<h2 class="ui dividing header">Variations</h2>
<h3>Forms</h3>
<h3 class="ui header">Forms</h3>
<div class="example"> <div class="example">
<h4>Fluid</h4>
<h4 class="ui header">Fluid</h4>
<p>A form can take the width of its container</p> <p>A form can take the width of its container</p>
<div class="ui fluid form segment"> <div class="ui fluid form segment">
<div class="two fields"> <div class="two fields">
@ -345,7 +345,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Size</h4>
<h4 class="ui header">Size</h4>
<p>A form can also be small or large</p> <p>A form can also be small or large</p>
<div class="ui small form segment"> <div class="ui small form segment">
<div class="two fields"> <div class="two fields">
@ -377,7 +377,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Inverted</h4>
<h4 class="ui header">Inverted</h4>
<p>A form on a dark background may have to invert its color scheme</p> <p>A form on a dark background may have to invert its color scheme</p>
<div style="background-color: #333333; padding: 15px;"> <div style="background-color: #333333; padding: 15px;">
@ -405,10 +405,10 @@ type : 'UI Collection'
</div> </div>
<h3>Fields</h3>
<h3 class="ui header">Fields</h3>
<div class="example"> <div class="example">
<h4>Inline</h4>
<h4 class="ui header">Inline</h4>
<p>A field can have its label next to instead of above it.</p> <p>A field can have its label next to instead of above it.</p>
<div class="ui form"> <div class="ui form">
<div class="ui inline fields"> <div class="ui inline fields">
@ -421,7 +421,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Date</h4>
<h4 class="ui header">Date</h4>
<p>A field can let users know they are for dates</p> <p>A field can let users know they are for dates</p>
<div class="ui form"> <div class="ui form">
<div class="date field"> <div class="date field">
@ -432,10 +432,10 @@ type : 'UI Collection'
</div> </div>
<h2>Groups</h2>
<h2 class="ui dividing header">Groups</h2>
<div class="example"> <div class="example">
<h4>Field Groups</h4>
<h4 class="ui header">Field Groups</h4>
<p>Fields can exist side by side to show relation</p> <p>Fields can exist side by side to show relation</p>
<div class="ui form"> <div class="ui form">
<div class="ui three fields"> <div class="ui three fields">
@ -456,7 +456,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Inline</h4>
<h4 class="ui header">Inline</h4>
<p>Multiple fields may be inline in a row</p> <p>Multiple fields may be inline in a row</p>
<div class="ui form"> <div class="ui form">
<div class="ui two inline fields"> <div class="ui two inline fields">

38
node/src/documents/collections/grid.html
View File

@ -9,7 +9,7 @@ type : 'UI Collection'
<div class="segment"> <div class="segment">
<div class="ui main responsive grid"> <div class="ui main responsive grid">
<div class="column"> <div class="column">
<h1>Grid</h1>
<h1 class="ui dividing header">Grid</h1>
<p>A grid is a set of elements without a visual definition, that creates a structure to harmonize negative space in a layout.</p> <p>A grid is a set of elements without a visual definition, that creates a structure to harmonize negative space in a layout.</p>
</div> </div>
</div> </div>
@ -17,10 +17,10 @@ type : 'UI Collection'
<div class="main responsive ui grid"> <div class="main responsive ui grid">
<div class="column"> <div class="column">
<h2>Collection</h2>
<h2 class="ui dividing header">Collection</h2>
<div class="highlighted example"> <div class="highlighted example">
<h4>Grid</h4>
<h4 class="ui header">Grid</h4>
<p>A grid is made up of columns of content. By default a grid must assume a certain number of columns.</p> <p>A grid is made up of columns of content. By default a grid must assume a certain number of columns.</p>
<p>Each set of columns matching up to the number of columns in a grid create a row.</p> <p>Each set of columns matching up to the number of columns in a grid create a row.</p>
@ -93,7 +93,7 @@ type : 'UI Collection'
<div class="highlighted example"> <div class="highlighted example">
<h4>Page Grid</h4>
<h4 class="ui header">Page Grid</h4>
<p>A page grid is a grid that exists on the top level of a website and includes gutters to the left and right.</p> <p>A page grid is a grid that exists on the top level of a website and includes gutters to the left and right.</p>
<div class="ui two column page grid"> <div class="ui two column page grid">
@ -123,7 +123,7 @@ type : 'UI Collection'
</div> </div>
<div class="highlighted example"> <div class="highlighted example">
<h4>Rows</h4>
<h4 class="ui header">Rows</h4>
<p>A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit vertically flushed against the edge of a grid, but will still have vertical and horizontal gutters on the first and last column.</p> <p>A row is used to create vertical padding between groups of columns on a page. If no rows are specified columns will sit vertically flushed against the edge of a grid, but will still have vertical and horizontal gutters on the first and last column.</p>
<p> <p>
<div class="ui grid"> <div class="ui grid">
@ -254,7 +254,7 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<div class="highlighted example"> <div class="highlighted example">
<h4>Columns</h4>
<h4 class="ui header">Columns</h4>
<p>Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.</p> <p>Columns each contain gutters giving them equal vertical spacing from other columns. Columns by default do not take up their entire row height.</p>
<p>A grid will automatically center any columns that do not match a full row width.</p> <p>A grid will automatically center any columns that do not match a full row width.</p>
<div class="ui three column grid"> <div class="ui three column grid">
@ -281,12 +281,12 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h2>Variations</h2>
<h2 class="ui dividing header">Variations</h2>
<h3>Grid</h3>
<h3 class="ui header">Grid</h3>
<div class="example"> <div class="example">
<h4>Responsive Grid</h4>
<h4 class="ui header">Responsive Grid</h4>
<p>A grid can be responsive to a browsers width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.</p> <p>A grid can be responsive to a browsers width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.</p>
<div class="ui text message info ignore"> <div class="ui text message info ignore">
@ -321,7 +321,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Changing grid column count</h4>
<h4 class="ui header">Changing grid column count</h4>
<p>A grid can have a different number of columns per row</p> <p>A grid can have a different number of columns per row</p>
<div class="ui three column grid"> <div class="ui three column grid">
<div class="column"> <div class="column">
@ -395,7 +395,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Divided</h4>
<h4 class="ui header">Divided</h4>
<p>A grid can show a division between its columns</p> <p>A grid can show a division between its columns</p>
<div class="ui six divided column grid"> <div class="ui six divided column grid">
<div class="row"> <div class="row">
@ -445,7 +445,7 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<div class="example"> <div class="example">
<h4>Celled</h4>
<h4 class="ui header">Celled</h4>
<p>A grid can have rows divided into cells</p> <p>A grid can have rows divided into cells</p>
<div class="ui celled grid"> <div class="ui celled grid">
<div class="row"> <div class="row">
@ -480,7 +480,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Text Alignment</h4>
<h4 class="ui header">Text Alignment</h4>
<p>A grid can specify its text alignment</p> <p>A grid can specify its text alignment</p>
<div class="ui center aligned three column grid"> <div class="ui center aligned three column grid">
<div class="row"> <div class="row">
@ -516,7 +516,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Vertical Alignment</h4>
<h4 class="ui header">Vertical Alignment</h4>
<p>A grid can specify its vertical alignment to have all its columns vertically centered.</p> <p>A grid can specify its vertical alignment to have all its columns vertically centered.</p>
<div class="ui middle aligned three column grid"> <div class="ui middle aligned three column grid">
<div class="row"> <div class="row">
@ -551,9 +551,9 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h3>Rows</h3>
<h3 class="ui header">Rows</h3>
<div class="example"> <div class="example">
<h4>Vertical Alignment</h4>
<h4 class="ui header">Vertical Alignment</h4>
<p>A row can also specify its vertical alignment to have its columns vertically centered.</p> <p>A row can also specify its vertical alignment to have its columns vertically centered.</p>
<div class="ui three column grid"> <div class="ui three column grid">
<div class="top aligned row"> <div class="top aligned row">
@ -646,10 +646,10 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h3>Columns</h3>
<h3 class="ui header">Columns</h3>
<div class="example"> <div class="example">
<h4>Row Alignment (Floating)</h4>
<h4 class="ui header">Row Alignment (Floating)</h4>
<p>A column can be"floated", to either the left or right of its row.</p> <p>A column can be"floated", to either the left or right of its row.</p>
<div class="ui grid"> <div class="ui grid">
<div class="left floated four wide column"> <div class="left floated four wide column">
@ -681,7 +681,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Column Width</h4>
<h4 class="ui header">Column Width</h4>
<p>A column can span across multiple grid columns.</p> <p>A column can span across multiple grid columns.</p>
<div class="ui grid"> <div class="ui grid">
<div class="three wide column"> <div class="three wide column">

93
node/src/documents/collections/menu.html
View File

@ -7,7 +7,7 @@ type : 'UI Collection'
--- ---
<div class="segment"> <div class="segment">
<div class="container"> <div class="container">
<h1>Menu</h1>
<h1 class="ui dividing header">Menu</h1>
<p>A menu is a collection of interface elements usually showing several actions which a user can take</p> <p>A menu is a collection of interface elements usually showing several actions which a user can take</p>
</div> </div>
</div> </div>
@ -22,9 +22,9 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h2>Collection</h2>
<h2 class="ui dividing header">Collection</h2>
<div class="example"> <div class="example">
<h4>Menu</h4>
<h4 class="ui header">Menu</h4>
<p>This example uses several menu elements to display the versatility of a menu collection.</p> <p>This example uses several menu elements to display the versatility of a menu collection.</p>
<div class="ui menu"> <div class="ui menu">
@ -34,7 +34,7 @@ type : 'UI Collection'
</a> </a>
<a class="item"> <a class="item">
<i class="icon mail"></i> Messages <i class="icon mail"></i> Messages
<div class="left ui label">22</div>
<div class="ui label">22</div>
</a> </a>
<div class="right menu"> <div class="right menu">
<div class="fitted borderless item"> <div class="fitted borderless item">
@ -54,13 +54,13 @@ type : 'UI Collection'
<div class="example"> <div class="example">
<h4>Vertical Menu</h4>
<h4 class="ui header">Vertical Menu</h4>
<p>A vertical menu can have its own sub menus. This example uses three levels of menu depth.</p> <p>A vertical menu can have its own sub menus. This example uses three levels of menu depth.</p>
<div class="ui ignore warning message"><i class="icon heart"></i> A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with <a href="grid.html">ui grid</a>.</div> <div class="ui ignore warning message"><i class="icon heart"></i> A vertical menu's width defaults to an arbitrary size. To have it fit your content more precisely use the fluid variation in conjunction with <a href="grid.html">ui grid</a>.</div>
<div class="ui vertical menu"> <div class="ui vertical menu">
<div class="item"> <div class="item">
<i class="icon user"></i> <i class="icon user"></i>
<b>Username</b>
<b>Zombo_213</b>
</div> </div>
<div class="item"> <div class="item">
<p>Welcome to your profile. You can do anything you want on your profile.</p> <p>Welcome to your profile. You can do anything you want on your profile.</p>
@ -68,23 +68,28 @@ type : 'UI Collection'
<div class="item"> <div class="item">
<b>My Profile</b> <b>My Profile</b>
<div class="menu"> <div class="menu">
<a class="active item"><i class="icon mail"></i>Messages
<div class="ui teal label">2 new
</div>
<a class="active item">
Messages
<div class="ui teal label">2 new</div>
</a> </a>
<div class="item"> <div class="item">
<i class="icon users"></i>Friends
Friends
<i class="icon users"></i>
<div class="menu"> <div class="menu">
<a class="item">Close Friends</a> <a class="item">Close Friends</a>
<a class="item">School</a> <a class="item">School</a>
<a class="item">Work</a> <a class="item">Work</a>
</div> </div>
</div> </div>
<a class="item"><i class="icon bookmark"></i>Followers</a>
<a class="item">
Followers
<i class="icon bookmark"></i>
</a>
</div> </div>
</div> </div>
<div class="dropdown item"> <div class="dropdown item">
Actions <i class="icon right triangle"></i>
Actions
<i class="icon right triangle"></i>
<div class="menu"> <div class="menu">
<div class="item">Search</div> <div class="item">Search</div>
<div class="item">Add</div> <div class="item">Add</div>
@ -95,7 +100,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Tiered Menu</h4>
<h4 class="ui header">Tiered Menu</h4>
<p>This example uses several menu elements to display the versatility of a menu collection.</p> <p>This example uses several menu elements to display the versatility of a menu collection.</p>
<div class="ui tiered menu"> <div class="ui tiered menu">
@ -130,10 +135,10 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h2>Elements</h2>
<h2 class="ui dividing header">Elements</h2>
<div class="example"> <div class="example">
<h4>Header Item</h4>
<h4 class="ui header">Header Item</h4>
<p>A menu may have a header to help label sections of a menu. This can also be a <a href="/elements/header.html">ui header</a>.</p> <p>A menu may have a header to help label sections of a menu. This can also be a <a href="/elements/header.html">ui header</a>.</p>
<div class="ui vertical menu"> <div class="ui vertical menu">
<div class="header item"> <div class="header item">
@ -159,7 +164,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Text Item</h4>
<h4 class="ui header">Text Item</h4>
<p>A menu may have a simple text item.</p> <p>A menu may have a simple text item.</p>
<div class="ui ignore info message"> <div class="ui ignore info message">
<p><i class="icon heart"></i> Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname <b>text</b></p> <p><i class="icon heart"></i> Single paragraphs are automatically formatted as text. You can also specify an item as textual by adding the classname <b>text</b></p>
@ -176,7 +181,7 @@ type : 'UI Collection'
<div class="example"> <div class="example">
<h4>Link Item</h4>
<h4 class="ui header">Link Item</h4>
<p>A menu may contain a link item, or an item formatted as if it is a link.</p> <p>A menu may contain a link item, or an item formatted as if it is a link.</p>
<div class="ui ignore info message"> <div class="ui ignore info message">
@ -193,7 +198,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Dropdown Item</h4>
<h4 class="ui header">Dropdown Item</h4>
<p>An item may contain a nested menu in a dropdown.</p> <p>An item may contain a nested menu in a dropdown.</p>
<div class="ui ignore warning message"> <div class="ui ignore warning message">
<p><i class="icon heart"></i> A dropdown menu will, by default, automatically show when the parent element is hovered.</p> <p><i class="icon heart"></i> A dropdown menu will, by default, automatically show when the parent element is hovered.</p>
@ -211,7 +216,7 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<div class="example"> <div class="example">
<h4>Menu</h4>
<h4 class="ui header">Menu</h4>
<p>A menu may contain another menu group in the same level as menu items.</p> <p>A menu may contain another menu group in the same level as menu items.</p>
<div class="ui menu"> <div class="ui menu">
<a class="item">Browse</a> <a class="item">Browse</a>
@ -224,7 +229,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Nested Menu</h4>
<h4 class="ui header">Nested Menu</h4>
<p>A menu item may contain another menu nested inside that acts as a grouped sub-menu.</p> <p>A menu item may contain another menu nested inside that acts as a grouped sub-menu.</p>
<div class="ui vertical menu"> <div class="ui vertical menu">
<a class="item"><b>Friends</b></a> <a class="item"><b>Friends</b></a>
@ -240,10 +245,10 @@ type : 'UI Collection'
</div> </div>
<h2>States</h2>
<h2 class="ui dividing header">States</h2>
<div class="example"> <div class="example">
<h4>Hover</h4>
<h4 class="ui header">Hover</h4>
<p>A menu item can be hovered</p> <p>A menu item can be hovered</p>
<div class="ui ignore warning message"><i class="icon heart"></i> Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.</div> <div class="ui ignore warning message"><i class="icon heart"></i> Menu items are only hoverable if they are links, defined with the variant "link", or are given the class name hover programmatically.</div>
<div class="ui compact menu"> <div class="ui compact menu">
@ -255,7 +260,7 @@ type : 'UI Collection'
<div class="example"> <div class="example">
<h4>Down</h4>
<h4 class="ui header">Down</h4>
<p>A menu item can be pressed in</p> <p>A menu item can be pressed in</p>
<div class="ui compact menu"> <div class="ui compact menu">
<div class="down item"> <div class="down item">
@ -265,7 +270,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Active</h4>
<h4 class="ui header">Active</h4>
<p>A menu item can be active</p> <p>A menu item can be active</p>
<div class="ui compact menu"> <div class="ui compact menu">
<div class="active item"> <div class="active item">
@ -275,11 +280,11 @@ type : 'UI Collection'
</div> </div>
<h2>Variations</h2>
<h2 class="ui dividing header">Variations</h2>
<h3>Menu</h3>
<h3 class="ui header">Menu</h3>
<div class="example"> <div class="example">
<h4>Inverted</h4>
<h4 class="ui header">Inverted</h4>
<p>A menu may have its colors inverted to show greater contrast</p> <p>A menu may have its colors inverted to show greater contrast</p>
<div class="ui inverted menu"> <div class="ui inverted menu">
<div class="item"> <div class="item">
@ -301,7 +306,7 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<div class="example"> <div class="example">
<h4>Colors</h4>
<h4 class="ui header">Colors</h4>
<p>Additional colors can be specified.</p> <p>Additional colors can be specified.</p>
<div class="ui green menu"> <div class="ui green menu">
<a class="active item"> <a class="active item">
@ -421,7 +426,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Basic</h4>
<h4 class="ui header">Basic</h4>
<p>A menu may reduce its complexity to blend in with a page</p> <p>A menu may reduce its complexity to blend in with a page</p>
<div class="ui segment"> <div class="ui segment">
<div class="ui basic menu"> <div class="ui basic menu">
@ -452,7 +457,7 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<div class="example"> <div class="example">
<h4>Text</h4>
<h4 class="ui header">Text</h4>
<p>A menu can display simple text links</p> <p>A menu can display simple text links</p>
<div class="ui segment"> <div class="ui segment">
<div class="ui text menu"> <div class="ui text menu">
@ -487,7 +492,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Colors</h4>
<h4 class="ui header">Colors</h4>
<p>Additional colors can be specified</p> <p>Additional colors can be specified</p>
<div class="ui grey compact menu"> <div class="ui grey compact menu">
<a class="item"> <a class="item">
@ -549,7 +554,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Icons</h4>
<h4 class="ui header">Icons</h4>
<p>A menu may have just icons</p> <p>A menu may have just icons</p>
<div class="ui icon menu"> <div class="ui icon menu">
<a class="item"> <a class="item">
@ -577,7 +582,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Icons</h4>
<h4 class="ui header">Icons</h4>
<p>A menu may have labeled icons</p> <p>A menu may have labeled icons</p>
<div class="ui labeled icon menu"> <div class="ui labeled icon menu">
<a class="item"> <a class="item">
@ -612,7 +617,7 @@ type : 'UI Collection'
<div class="example"> <div class="example">
<h4>Fluid</h4>
<h4 class="ui header">Fluid</h4>
<p>A vertical menu may take the size of its container. (A horizontal menu does this by default) </p> <p>A vertical menu may take the size of its container. (A horizontal menu does this by default) </p>
<div class="ui fluid vertical menu"> <div class="ui fluid vertical menu">
<a class="item">Run</a> <a class="item">Run</a>
@ -622,7 +627,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Evenly sized items</h4>
<h4 class="ui header">Evenly sized items</h4>
<p>A menu may divide its items evenly</p> <p>A menu may divide its items evenly</p>
<div class="ui fluid three item menu"> <div class="ui fluid three item menu">
<a class="item">Buy</a> <a class="item">Buy</a>
@ -632,7 +637,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Pointing</h4>
<h4 class="ui header">Pointing</h4>
<p>A menu can point to content below itself to show ownership</p> <p>A menu can point to content below itself to show ownership</p>
<div class="ui pointing menu"> <div class="ui pointing menu">
<div class="item"> <div class="item">
@ -683,7 +688,7 @@ type : 'UI Collection'
<div class="example"> <div class="example">
<h4>Attached</h4>
<h4 class="ui header">Attached</h4>
<p>A menu may be attached to other content segments</p> <p>A menu may be attached to other content segments</p>
<div class="ui top attached pointing menu"> <div class="ui top attached pointing menu">
<div class="item"> <div class="item">
@ -709,7 +714,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Horizontal Sizes</h4>
<h4 class="ui header">Horizontal Sizes</h4>
<p>A horizontal menu can vary in size</p> <p>A horizontal menu can vary in size</p>
<div class="ui large menu"> <div class="ui large menu">
<div class="item"> <div class="item">
@ -741,7 +746,7 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<div class="example"> <div class="example">
<h4>Vertical Sizes</h4>
<h4 class="ui header">Vertical Sizes</h4>
<p>A vertical menu can vary in size</p> <p>A vertical menu can vary in size</p>
<div class="ui large vertical menu"> <div class="ui large vertical menu">
<div class="item"> <div class="item">
@ -794,10 +799,10 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h3>Items</h3>
<h3 class="ui header">Items</h3>
<div class="example"> <div class="example">
<h4>Fitted</h4>
<h4 class="ui header">Fitted</h4>
<p>A menu item or menu might be fitted to remove element padding</p> <p>A menu item or menu might be fitted to remove element padding</p>
<div class="ui menu"> <div class="ui menu">
<div class="fitted item"> <div class="fitted item">
@ -811,11 +816,11 @@ type : 'UI Collection'
<div class="example"> <div class="example">
<h4>Borderless</h4>
<h4 class="ui header">Borderless</h4>
<p>A menu item or menu might might have no dividers</p> <p>A menu item or menu might might have no dividers</p>
<div class="ui borderless menu"> <div class="ui borderless menu">
<div class="item"> <div class="item">
<i class="icon left-open"></i> Previous
<i class="icon left arrow"></i> Previous
</div> </div>
<div class="item">1</div> <div class="item">1</div>
<div class="item">2</div> <div class="item">2</div>
@ -824,7 +829,7 @@ type : 'UI Collection'
<div class="item">5</div> <div class="item">5</div>
<div class="item">6</div> <div class="item">6</div>
<div class="item"> <div class="item">
<i class="icon right-open"></i> Next
Next <i class="icon right arrow"></i>
</div> </div>
</div> </div>
</div> </div>

36
node/src/documents/collections/message.html
View File

@ -8,7 +8,7 @@ type : 'UI Collection'
<div class="segment"> <div class="segment">
<div class="container"> <div class="container">
<h1>Message</h1>
<h1 class="ui dividing header">Message</h1>
<p>Messages can alert a user to something they must immediately consider before proceeding on to the normal content of the page.</p> <p>Messages can alert a user to something they must immediately consider before proceeding on to the normal content of the page.</p>
</div> </div>
</div> </div>
@ -23,10 +23,10 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h2>Standard</h2>
<h2 class="ui dividing header">Standard</h2>
<div class="example"> <div class="example">
<h4>Text Block</h4>
<h4 class="ui header">Text Block</h4>
<p>A basic text block</p> <p>A basic text block</p>
<div class="ui message"> <div class="ui message">
<div class="header"> <div class="header">
@ -42,7 +42,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>List Block</h4>
<h4 class="ui header">List Block</h4>
<p>A text block with a list</p> <p>A text block with a list</p>
<div class="ui message"> <div class="ui message">
<div class="header"> <div class="header">
@ -57,7 +57,7 @@ type : 'UI Collection'
<div class="example"> <div class="example">
<h4>Dismissable Block</h4>
<h4 class="ui header">Dismissable Block</h4>
<p>A text block that the user can choose to hide</p> <p>A text block that the user can choose to hide</p>
<div class="ui message"> <div class="ui message">
<i class="icon close"></i> <i class="icon close"></i>
@ -72,26 +72,26 @@ type : 'UI Collection'
</div> </div>
<h2>States</h2>
<h2 class="ui dividing header">States</h2>
<h4>Hidden</h4>
<h4 class="ui header">Hidden</h4>
<p>Text Blocks can be hidden</p> <p>Text Blocks can be hidden</p>
<div class="ui hidden message"> <div class="ui hidden message">
<p>You can't see me</p> <p>You can't see me</p>
</div> </div>
<div class="example"> <div class="example">
<h4>Visible</h4>
<h4 class="ui header">Visible</h4>
<p>Text Blocks can be set to visible if they need to force themselves to be shown.</p> <p>Text Blocks can be set to visible if they need to force themselves to be shown.</p>
<div class="ui visible message"> <div class="ui visible message">
<p>You can always see me</p> <p>You can always see me</p>
</div> </div>
</div> </div>
<h2>Variations</h2>
<h2 class="ui dividing header">Variations</h2>
<div class="example"> <div class="example">
<h4>Icon Block</h4>
<h4 class="ui header">Icon Block</h4>
<p>A text block can contain an icon.</p> <p>A text block can contain an icon.</p>
<div class="ui icon message"> <div class="ui icon message">
<i class="icon cloud"></i> <i class="icon cloud"></i>
@ -105,7 +105,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Compact Block</h4>
<h4 class="ui header">Compact Block</h4>
<p>A text block that only takes up the width of its content.</p> <p>A text block that only takes up the width of its content.</p>
<div class="ui compact message"> <div class="ui compact message">
Get all the best inventions in your e-mail every day. Sign up now! Get all the best inventions in your e-mail every day. Sign up now!
@ -113,7 +113,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Attached Block</h4>
<h4 class="ui header">Attached Block</h4>
<p>A text block can be formatted to attach itself to content</p> <p>A text block can be formatted to attach itself to content</p>
<div class="ui attached message"> <div class="ui attached message">
<div class="header"> <div class="header">
@ -157,14 +157,14 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<div class="example"> <div class="example">
<h4>Colored Block</h4>
<h4 class="ui header">Colored Block</h4>
<p>A text block can be formatted to be different colors</p> <p>A text block can be formatted to be different colors</p>
</div> </div>
<div class="example"> <div class="example">
<h4>Warning Block</h4>
<h4 class="ui header">Warning Block</h4>
<p>A text block may be formatted to display warning messages.</p> <p>A text block may be formatted to display warning messages.</p>
<div class="ui warning message"> <div class="ui warning message">
<i class="icon close"></i> <i class="icon close"></i>
@ -176,7 +176,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Info Block</h4>
<h4 class="ui header">Info Block</h4>
<p>A text block may be formatted to display information.</p> <p>A text block may be formatted to display information.</p>
<div class="ui info message"> <div class="ui info message">
<i class="icon close"></i> <i class="icon close"></i>
@ -191,7 +191,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Success Block</h4>
<h4 class="ui header">Success Block</h4>
<p>A text block may be formatted to display a success message.</p> <p>A text block may be formatted to display a success message.</p>
<div class="ui success message"> <div class="ui success message">
<i class="icon close"></i> <i class="icon close"></i>
@ -202,7 +202,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Error Block</h4>
<h4 class="ui header">Error Block</h4>
<p>A text block may be formatted to display errors.</p> <p>A text block may be formatted to display errors.</p>
<div class="ui error message"> <div class="ui error message">
<i class="icon close"></i> <i class="icon close"></i>
@ -217,7 +217,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Sizes</h4>
<h4 class="ui header">Sizes</h4>
<p>A text block can have different sizes</p> <p>A text block can have different sizes</p>
<div class="ui small message"> <div class="ui small message">
This is a very small message. This is a very small message.

34
node/src/documents/collections/table.html
View File

@ -8,7 +8,7 @@ type : 'UI Collection'
<div class="segment"> <div class="segment">
<div class="container"> <div class="container">
<h1>Tables</h1>
<h1 class="ui dividing header">Tables</h1>
<p>Tables are useful for displaying collections of tuples.</p> <p>Tables are useful for displaying collections of tuples.</p>
<p> <p>
Tables consist of an optional table header, content, and table footer. They may be formatted to show numeric content or for rows of text. Tables consist of an optional table header, content, and table footer. They may be formatted to show numeric content or for rows of text.
@ -26,9 +26,9 @@ type : 'UI Collection'
</div> </div>
</div> </div>
<h2>Standard</h2>
<h2 class="ui dividing header">Standard</h2>
<div class="example"> <div class="example">
<h4>Table</h4>
<h4 class="ui header">Table</h4>
<p>A standard table</p> <p>A standard table</p>
<table class="ui table"> <table class="ui table">
<thead> <thead>
@ -62,10 +62,10 @@ type : 'UI Collection'
</div> </div>
<h2>States</h2>
<h2 class="ui dividing header">States</h2>
<div class="example"> <div class="example">
<h4>Positive / Negative</h4>
<h4 class="ui header">Positive / Negative</h4>
<p>A cell may let a user know whether a value is good or bad:</p> <p>A cell may let a user know whether a value is good or bad:</p>
<table class="ui table"> <table class="ui table">
<thead> <thead>
@ -98,9 +98,9 @@ type : 'UI Collection'
</table> </table>
</div> </div>
<h3>Cells</h3>
<h3 class="ui header">Cells</h3>
<div class="example"> <div class="example">
<h4>Error</h4>
<h4 class="ui header">Error</h4>
<p>A cell or row may alert the user to an error or a negative value:</p> <p>A cell or row may alert the user to an error or a negative value:</p>
<table class="ui table"> <table class="ui table">
<thead> <thead>
@ -134,7 +134,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Warning</h4>
<h4 class="ui header">Warning</h4>
<p>A cell or row may warn a user:</p> <p>A cell or row may warn a user:</p>
<table class="ui table"> <table class="ui table">
<thead> <thead>
@ -168,7 +168,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Active</h4>
<h4 class="ui header">Active</h4>
<p>A cell or row can be active:</p> <p>A cell or row can be active:</p>
<table class="ui table"> <table class="ui table">
<thead> <thead>
@ -200,7 +200,7 @@ type : 'UI Collection'
</tbody> </tbody>
</table> </table>
<div class="example"> <div class="example">
<h4>Disabled</h4>
<h4 class="ui header">Disabled</h4>
<p>A cell can be disabled:</p> <p>A cell can be disabled:</p>
<table class="ui table"> <table class="ui table">
<thead> <thead>
@ -234,10 +234,10 @@ type : 'UI Collection'
</div> </div>
<h2>Variations</h2>
<h2 class="ui dividing header">Variations</h2>
<div class="example"> <div class="example">
<h4>Collapsing</h4>
<h4 class="ui header">Collapsing</h4>
<p>By default tables take the size of their container. A collapsing takes up only as much space as its rows.</p> <p>By default tables take the size of their container. A collapsing takes up only as much space as its rows.</p>
<table class="ui table collapsing"> <table class="ui table collapsing">
<thead> <thead>
@ -271,7 +271,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Cells</h4>
<h4 class="ui header">Cells</h4>
<p>A table may be divided each row into separate cells</p> <p>A table may be divided each row into separate cells</p>
<table class="ui celled table"> <table class="ui celled table">
<thead> <thead>
@ -305,7 +305,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Sortable</h4>
<h4 class="ui header">Sortable</h4>
<p>A table may allow a user to sort contents by clicking on a table header.</p> <p>A table may allow a user to sort contents by clicking on a table header.</p>
<p>Adding a classname of ascending or descending, will show the user the direction of sort. This example uses a modified version of the kylefox's <a href="library/tablesort.js">tablesort plugin</a> to provide the proper class names.</p> <p>Adding a classname of ascending or descending, will show the user the direction of sort. This example uses a modified version of the kylefox's <a href="library/tablesort.js">tablesort plugin</a> to provide the proper class names.</p>
@ -341,7 +341,7 @@ type : 'UI Collection'
</table> </table>
</div> </div>
<div class="example"> <div class="example">
<h4>Padded</h4>
<h4 class="ui header">Padded</h4>
<p>A table may sometimes need to be more padded for legibility</p> <p>A table may sometimes need to be more padded for legibility</p>
<table class="ui padded table"> <table class="ui padded table">
<thead> <thead>
@ -364,7 +364,7 @@ type : 'UI Collection'
</table> </table>
</div> </div>
<div class="example"> <div class="example">
<h4>Compact</h4>
<h4 class="ui header">Compact</h4>
<p>A table may sometimes need to be more compact to make more rows visible at a time</p> <p>A table may sometimes need to be more compact to make more rows visible at a time</p>
<table class="ui compact table"> <table class="ui compact table">
<thead> <thead>
@ -418,7 +418,7 @@ type : 'UI Collection'
</div> </div>
<div class="example"> <div class="example">
<h4>Size</h4>
<h4 class="ui header">Size</h4>
<p>A table can also be small or large</p> <p>A table can also be small or large</p>
<table class="ui small table"> <table class="ui small table">
<thead> <thead>

Write Preview
Loading…
Cancel
Save