- **Container** - Containers are fixed width containers meant for holding page contents, and are a simpler alternative to `ui page grid`, view more [examples in docs](http://www.semantic-ui.com/elements/container.html#examples)
- **Multiselect** - New dropdown component has been added for multi-select
- **Grid** - `equal height` and `equal width` grids, which use `flexbox` are now recommended for usage. Works correctly with or without `row` wrapper, and support vertical alignment including `stretch` alignment for matching child element heights.
- **Grid** - Grids are now based on `flexbox`, columns are now `equal height` by default. Flexbox alignment has been added for easier vertical alignment.
- **Headers** - Added new header type `sub header`, useful for displaying small headers alongside text content. See examples [in the header docs](http://www.semantic-ui.com/elements/header.html#sub-headers)
<p>A container is a fixed width element that wraps your site's content. It remains a constant size and uses <b>margin</b> to center. Containers are the simplest way to center page content inside a grid.</code>
<p>A <code>ui page grid</code> uses <code>padding</code> to maintain fluid page gutters. Each columns width will continuously adjust as your browser width changes to maintain the same percentage of overall browser width</p>
<p>Page grids work best for wide multi-column pages like homepages.</p>
<h3>Page Grid</h3>
<p>A <code>page grid</code> uses <code>padding</code> to create fluid page gutters. Each columns width will continuously adjust as your browser width changes to maintain the same percentage of overall browser width.</p>
<p>A page grid adjusts its gutters as a percentage of total page width for each device. This causes it to snap to a new width on each breakpoint.</p>
</div>
<divclass="ui page grid">
@ -117,42 +75,22 @@
</div>
<divclass="ui text container">
<h3class="first">Container</h3>
<p>A container is a fixed width element that wraps your site's content. It is not fluid in size and uses <b>margin</b> to center. Containers work best for centered content that is placed inside a containing box like a <code>ui segment</code>
</p>
<h3class="first">Text Container</h3>
<p>Sometimes you just need to put a single column of centered text on a page. A <code>text container</code> is a special type of container optimized for a single flowing column of text, like this instructions on this page.
</p>
<p>Text containers <b>do not need to use grids</b> and help simplify basic page layouts.</p>
</div>
<divclass="ui container">
<divclass="ui grid">
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="column"></div>
<divclass="ui text container">
<divclass="ui one column grid">
<divclass="column"></div>
</div>
</div>
<divclass="ui text container">
<h3class="first">Text Container</h3>
<p>Sometimes you just need to put a single column of centered text on a page. A <code>ui text container</code> is a special type of container designed to optimize for a single flowing column of text, like this instructions on this page.
</p>
<p>Text containers <b>do not need to use grids</b> and help simplify basic page layouts.</p.
</div>
<divclass="ui text container">
<h1class="ui inverted block header">Setting Up Grids</h1>
<p>A grid does not necessarily need to specify rows. If you include <code>columns</code> as direct child of <code>ui grid</code> content will automatically flow to the next row when all the grid columns are taken in the current row</b>.</p>
@ -169,19 +107,15 @@
</div>
<h3>Clearing Rows</h3>
<p>Adding row wrappers allow you to manually specify you want a new row to begin. This can be useful when centering content with a <code>ui centered grid</code>.</p>
<p>Adding row wrappers allow you to manually specify you want a new row to begin.</p>
<p>You can set columns to double in width at each device jump</p>
<divclass="ui five column doubling grid">
<divclass="column">column</div>
<divclass="column">column</div>
<divclass="column">column</div>
<divclass="column">column</div>
<divclass="column">column</div>
</div>
<h3>Stackable</h3>
<p>You can set columns to stack on mobile</p>
<divclass="ui three column stackable grid">
<divclass="column">column</div>
<divclass="column">column</div>
<divclass="column">column</div>
</div>
<h3>Responsive Width Adjustments</h3>
<p>You can specify columns to appear at different widths on different screens</p>
<divclass="ui grid">
<divclass="eight wide mobile six wide tablet four wide computer column"></div>
<divclass="eight wide mobile six wide tablet four wide computer column"></div>
<divclass="eight wide mobile six wide tablet four wide computer column"></div>
<divclass="eight wide mobile six wide tablet four wide computer column"></div>
<divclass="eight wide mobile six wide tablet four wide computer column"></div>
</div>
<divclass="ui grid">
<divclass="four wide two wide large screen one wide widescreen column"></div>
<divclass="four wide two wide large screen one wide widescreen column"></div>
<divclass="four wide two wide large screen one wide widescreen column"></div>
<divclass="four wide two wide large screen one wide widescreen column"></div>
</div>
<h3>Specifying Device Visibility</h3>
<p>The Semantic grid system has three tiers of classes: mobile (phones), tablet (tablets), computer (desktops and larger desktops) You can use nearly any combination of these classes to create more dynamic and flexible layouts</p>
<p>Breakpoints are 768px and below for mobile, 768-992px for tablet and 992px+ for computer</p>
<p>In these cases below, we'd like to recommend you to change size of your viewport or use right devices for responsiveness experience</p>
<p>You can specify columns to appear only a particular screen</p>
jlukic
9 years ago