<p>A grid is made up of columns of content. By default a grid must assume a certain number of columns. The semantic library assumes 12 columns by default.</p>
<p>If only a single column is specified inside a grid or a grid row, semantic will assume the column to take up the entire grid width. If you would like to override this behavior, specify the grid width as a <b>one wide column</b></p></div>
<p>If only a single column is specified inside a grid or a grid row, semantic will assume the column to take up the entire grid width. If you would like to override this behavior, specify the grid width as a <b>one wide column</b></p>
<p>It is also important to note, that padding is applied directly to columns, which means other ui elements should not be used in combination with column, but directly as children.</div>
<divclass="ui grid">
<divclass="column">
1
<divclass="ui segment">
1
</div>
</div>
<divclass="column">
2
<divclass="ui segment">
2
</div>
</div>
<divclass="column">
3
<divclass="ui segment">
3
</div>
</div>
<divclass="column">
4
<divclass="ui segment">
4
</div>
</div>
<divclass="column">
5
<divclass="ui segment">
5
</div>
</div>
<divclass="column">
6
<divclass="ui segment">
6
</div>
</div>
<divclass="column">
7
<divclass="ui segment">
7
</div>
</div>
<divclass="column">
8
<divclass="ui segment">
8
</div>
</div>
<divclass="column">
9
<divclass="ui segment">
9
</div>
</div>
<divclass="column">
10
<divclass="ui segment">
10
</div>
</div>
<divclass="column">
11
<divclass="ui segment">
11
</div>
</div>
<divclass="column">
12
<divclass="ui segment">
12
</div>
</div>
</div>
</div>
<divclass="example">
<divclass="highlighted example">
<h4>Rows</h4>
<p>A basic grid has padding on the first and last columns of each row.</p>
<p>A row is used to create vertical padding between rows of columns on a page. If no rows are specified, a grid column will sit flush along each side of the grid.</p>
@ -72,97 +97,157 @@ type : 'UI Collection'
<divclass="ui grid">
<divclass="row">
<divclass="column">
1a
<divclass="ui segment">
1a
</div>
</div>
<divclass="column">
2a
<divclass="ui segment">
2a
</div>
</div>
<divclass="column">
3a
<divclass="ui segment">
3a
</div>
</div>
<divclass="column">
4a
<divclass="ui segment">
4a
</div>
</div>
<divclass="column">
5a
<divclass="ui segment">
5a
</div>
</div>
<divclass="column">
6a
<divclass="ui segment">
6a
</div>
</div>
<divclass="column">
7a
<divclass="ui segment">
7a
</div>
</div>
<divclass="column">
8a
<divclass="ui segment">
8a
</div>
</div>
<divclass="column">
9a
<divclass="ui segment">
9a
</div>
</div>
<divclass="column">
10a
<divclass="ui segment">
10a
</div>
</div>
<divclass="column">
11a
<divclass="ui segment">
11a
</div>
</div>
<divclass="column">
12a
<divclass="ui segment">
12a
</div>
</div>
</div>
<divclass="row">
<divclass="column">
1b
<divclass="ui segment">
1b
</div>
</div>
<divclass="column">
2b
<divclass="ui segment">
2b
</div>
</div>
<divclass="column">
3b
<divclass="ui segment">
3b
</div>
</div>
<divclass="column">
4b
<divclass="ui segment">
4b
</div>
</div>
<divclass="column">
5b
<divclass="ui segment">
5b
</div>
</div>
<divclass="column">
6b
<divclass="ui segment">
6b
</div>
</div>
<divclass="column">
7b
<divclass="ui segment">
7b
</div>
</div>
<divclass="column">
8b
<divclass="ui segment">
8b
</div>
</div>
<divclass="column">
9b
<divclass="ui segment">
9b
</div>
</div>
<divclass="column">
10b
<divclass="ui segment">
10b
</div>
</div>
<divclass="column">
11b
<divclass="ui segment">
11b
</div>
</div>
<divclass="column">
12b
<divclass="ui segment">
12b
</div>
</div>
</div>
</div>
</div>
<divclass="example">
<divclass="highlighted example">
<h4>Grid</h4>
<p>A grid will automatically center any columns that do not match a full row width. This is useful for centering content</p>
<divclass="ui grid">
<divclass="column">
1
</div>
<divclass="column">
2
</div>
<divclass="column">
3
<divclass="ui three column grid">
<divclass="row">
<divclass="column">
<divclass="ui segment">
1
</div>
</div>
<divclass="column">
<divclass="ui segment">
2
</div>
</div>
<divclass="column">
<divclass="ui segment">
3
</div>
</div>
</div>
<divclass="column">
4
<divclass="row">
<divclass="column">
<divclass="ui segment">
4
</div>
</div>
</div>
</div>
</div>
@ -310,7 +395,7 @@ type : 'UI Collection'
</div>
</div>
<divclass="example">
<h4>Horizontal Alignment</h4>
<h4>Floating (Horizontal Alignment)</h4>
<p>A column can be aligned, or "floated", to either the left or right of its row.</p>
<p>A vertical menu can have its own sub menus. This example uses three levels of menu depth.</p>
<divclass="ui ignore warning block"><iclass="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 <ahref="grid.html">ui grid</a>.</div>
<divclass="ui ignore warning message"><iclass="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 <ahref="grid.html">ui grid</a>.</div>
<divclass="ui vertical menu">
<divclass="item">
<b>Username</b>
@ -120,7 +120,7 @@ type : 'UI Collection'
<divclass="example">
<h4>Text Item</h4>
<p>A menu may have a simple text item.</p>
<divclass="ui ignore info block">
<divclass="ui ignore info message">
<p><iclass="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>
</div>
<divclass="ui vertical menu">
@ -154,7 +154,7 @@ type : 'UI Collection'
<divclass="example">
<h4>Dropdown Item</h4>
<p>An item may contain a list of dropdowns to chose from. By default it will appear automatically with css.</p>
<divclass="ui ignore warning block">
<divclass="ui ignore warning message">
<p><iclass="icon heart"></i> A dropdown menu will, by default, automatically show when the parent element is hovered.</p>
<p>If you need to programmatically close the dropdown, use the class name <b>dynamic</b> and the javascript state module, which will allow you to manipulate the hover state in javascript.</p>
</div>
@ -203,7 +203,7 @@ type : 'UI Collection'
<divclass="example">
<h4>Hover</h4>
<p>A menu item can be hovered</p>
<divclass="ui ignore warning block"><iclass="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>
<divclass="ui ignore warning message"><iclass="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>
<p>UI modules are interface elements which require a definition of their behavior.</p>
<p>UI modules are interface elements whose behavior is an essential part of their definition.</p>
</div>
</div>
<divclass="main container">
<divclass="peek">
<divclass="ui vertical pointing menu">
<aclass="active item">Definition</a>
<aclass="item">Distinction</a>
<aclass="active item">Types</a>
<aclass="item">Usage</a>
</div>
</div>
<h2>Definition</h2>
<p>zzzz</p>
<h2>Types</h2>
<h2>Distinction</h2>
<h2>Usage</h3>
<h2>Settings</h2>
<p>Settings in UI widgets are any part of a widget definition which is mutable. Most UI widgets have a set of common settings which are useful across all plugins.
<h3>Common Settings</h3>
<tableclass="ui table">
<thead>
<th>Name</th>
<th>Usage</th>
</thead>
<tr>
<td>moduleName</td>
<td>Name used in debug logs to differentiate this widget from other debug statements.</td>
</tr>
<tr>
<td>debug</td>
<td>Provides standard debug output to console.</td>
</tr>
<tr>
<td>performance</td>
<td>Provides performance logging to console of internal method calls.</td>
</tr>
<tr>
<td>verbose</td>
<td>Provides extra debug output to console</td>
</tr>
<tr>
<td>namespace</td>
<td>Namespace used for DOM event and metadata namespacing. Allows module's destroy method to not affect other modules.</td>
</tr>
<tr>
<td>selectors</td>
<td>An object containing all selectors used in the module, these are usually children of the module.</td>
</tr>
<tr>
<td>classNames</td>
<td>An object containing all classnames used in the module.</td>
</tr>
<tr>
<td>errors</td>
<tdcolspan="2">A javascript array of error statements used in the plugin. These may sometimes appear to the user, but most often appear in debug statements.
</td>
</tr>
</tbody>
</table>
<h3>Changing Settings</h3>
<ol>
<li>A settings object can be passed in when initializing the plugin
<br><divclass="code">$('.foo')
.module({
moduleName: 'Godzilla',
verbose: true
})
;</div>
</li>
<li>Default settings for the module can be overridden by modifying $.fn.module.settings.
<li>Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.
<br><divclass="code">$('.foo')
// lets initialize that!
.module()
// oh wait forgot something
.module('setting', 'moduleName', 'Godzilla')
;</div>
</li>
</ol>
<h3>Reading Settings</h3>
<p>Settings can also be read programmatically: <divclass="code">$('.foo').module('setting', 'moduleName');
<li>Settings can be changed after a module is initialized by calling the 'settings' method on the module with either a settings object or a name, value pair.
Jack Lukic
12 years ago