408 lines
14 KiB
HTML
408 lines
14 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<!-- Standard Meta -->
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
||
|
|
|
||
|
|
<!-- Site Properties -->
|
||
|
|
<title>Grid Example - Semantic</title>
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" href="../dist/components/reset.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../dist/components/site.css">
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" href="../dist/components/container.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../dist/components/divider.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../dist/components/grid.css">
|
||
|
|
<link rel="stylesheet" type="text/css" href="../dist/components/header.css">
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
<div class="ui text container">
|
||
|
|
<h1 class="ui dividing header">Using Grids</h1>
|
||
|
|
|
||
|
|
<h3 class="first">Container</h3>
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui container">
|
||
|
|
<div class="ui grid">
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui text container">
|
||
|
|
<h3 class="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>
|
||
|
|
|
||
|
|
<div class="ui text container">
|
||
|
|
<div class="ui one column grid">
|
||
|
|
<div class="column"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="ui text container">
|
||
|
|
|
||
|
|
<h1 class="ui dividing header">Grid Content</h1>
|
||
|
|
|
||
|
|
<h3 class="first">Column Flow</h3>
|
||
|
|
<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>
|
||
|
|
|
||
|
|
<div class="ui grid">
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Clearing Rows</h3>
|
||
|
|
<p>Adding row wrappers allow you to manually specify you want a new row to begin.</p>
|
||
|
|
|
||
|
|
<div class="ui three column grid">
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Specifying Row Width</h3>
|
||
|
|
<p>Specifying a grid column count will divide columns into rows of predetermined column count. Additional columns will automatically flow to the next row.</p>
|
||
|
|
<div class="ui three column grid">
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Specifying Column Width</h3>
|
||
|
|
<p>You can also specify column widths for each column individually</p>
|
||
|
|
<div class="ui three column grid">
|
||
|
|
<div class="four wide column">four wide column</div>
|
||
|
|
<div class="eight wide column">eight wide column</div>
|
||
|
|
<div class="four wide column">four wide column</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Special Variations</h3>
|
||
|
|
<p>Some special variations that format grids like tables require you to specify rows. For example a <code>divided grid</code> or a <code>celled grid</code> requires row wrappers.</p>
|
||
|
|
|
||
|
|
<div class="ui horizontal section divider">Celled Grid</div>
|
||
|
|
<div class="ui celled grid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui horizontal section divider">Internally Celled Grid</div>
|
||
|
|
|
||
|
|
<div class="ui internally celled grid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<div class="ui horizontal section divider">Divided Grid</div>
|
||
|
|
|
||
|
|
<div class="ui divided grid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="ui horizontal section divider">Vertically Divided Grid</div>
|
||
|
|
|
||
|
|
<div class="ui vertically divided grid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
<div class="four wide column"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1 class="ui dividing header">Adjusting Grids</h1>
|
||
|
|
|
||
|
|
|
||
|
|
<h3 class="first">Centering Content</h3>
|
||
|
|
<p>If a row does not take up all sixteen grid columns, you can use a <code>ui centered grid</code>, <code>centered row</code>, or <code>centered column</code> to center the column contents inside the grid.
|
||
|
|
</p>
|
||
|
|
<div class="ui two column centered grid">
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="four column centered row">
|
||
|
|
<div class="column"></div>
|
||
|
|
<div class="column"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Floating Rows</h3>
|
||
|
|
<p>Since Semantic UI's grid is based on flex box, a <code>left floated</code> item should come first, and a <code>right floated</code> item last in its row.</p>
|
||
|
|
|
||
|
|
<div class="ui grid">
|
||
|
|
<div class="left floated six wide column">
|
||
|
|
<div class="ui segment">
|
||
|
|
Left floated
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="right floated six wide column">
|
||
|
|
<div class="ui segment">
|
||
|
|
Right floated
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h3>Text Alignment</h3>
|
||
|
|
<p>You can specify text alignment using alignment variations on a grid, row, or column level.</p>
|
||
|
|
|
||
|
|
<div class="ui grid">
|
||
|
|
<div class="right aligned eight wide column">
|
||
|
|
right aligned column
|
||
|
|
</div>
|
||
|
|
<div class="left aligned eight wide column">
|
||
|
|
left aligned column
|
||
|
|
</div>
|
||
|
|
<div class="center aligned two column row">
|
||
|
|
<div class="column">
|
||
|
|
center aligned row
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
center aligned row
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="sixteen wide right aligned column">
|
||
|
|
right aligned column
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Vertical Alignment</h3>
|
||
|
|
<p>You can specify vertical alignment on a grid, row, or column level.</p>
|
||
|
|
<div class="ui middle aligned four column centered grid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="column">
|
||
|
|
<img class="ui wireframe image" src="assets/images/wireframe/image.png">
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<img class="ui wireframe image" src="assets/images/wireframe/image.png">
|
||
|
|
<img class="ui wireframe image" src="assets/images/wireframe/image.png">
|
||
|
|
</div>
|
||
|
|
<div class="column">
|
||
|
|
<img class="ui wireframe image" src="assets/images/wireframe/image.png">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Equal Width Columns</h3>
|
||
|
|
<p>Specifying an <code>equal width grid</code> will automatically determine column sizes to fit evenly inside one row</p>
|
||
|
|
<div class="ui equal width grid">
|
||
|
|
<div class="row">
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
</div>
|
||
|
|
<div class="row">
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<h1>Responsive Patterns</h1>
|
||
|
|
|
||
|
|
<h3 class="first">Doubling</h3>
|
||
|
|
<p>You can set columns to double in width at each device jump</p>
|
||
|
|
<div class="ui five column doubling grid">
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Stackable</h3>
|
||
|
|
<p>You can set columns to stack on mobile</p>
|
||
|
|
<div class="ui three column stackable grid">
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Responsive Width Adjustments</h3>
|
||
|
|
<p>You can specify columns to appear at different widths on different screens</p>
|
||
|
|
|
||
|
|
<div class="ui grid">
|
||
|
|
<div class="eight wide mobile six wide tablet four wide computer column"></div>
|
||
|
|
<div class="eight wide mobile six wide tablet four wide computer column"></div>
|
||
|
|
<div class="eight wide mobile six wide tablet four wide computer column"></div>
|
||
|
|
<div class="eight wide mobile six wide tablet four wide computer column"></div>
|
||
|
|
<div class="eight wide mobile six wide tablet four wide computer column"></div>
|
||
|
|
</div>
|
||
|
|
<div class="ui grid">
|
||
|
|
<div class="four wide two wide large screen one wide widescreen column"></div>
|
||
|
|
<div class="four wide two wide large screen one wide widescreen column"></div>
|
||
|
|
<div class="four wide two wide large screen one wide widescreen column"></div>
|
||
|
|
<div class="four wide two wide large screen one wide widescreen column"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3>Specifying Device Visibility</h3>
|
||
|
|
<p>You can specify columns to appear only a particular screen</p>
|
||
|
|
<div class="ui grid">
|
||
|
|
<div class="two column computer only row">
|
||
|
|
<div class="ten wide column">ten wide column computer only</div>
|
||
|
|
<div class="six wide column">six wide column computer only</div>
|
||
|
|
</div>
|
||
|
|
<div class="sixteen wide mobile only column">sixteen wide column mobile only</div>
|
||
|
|
<div class="three column computer only row">
|
||
|
|
<div class="column">computer only row</div>
|
||
|
|
<div class="column">computer only row</div>
|
||
|
|
<div class="column">computer only row</div>
|
||
|
|
</div>
|
||
|
|
<div class="two column mobile only row">
|
||
|
|
<div class="column">mobile only column</div>
|
||
|
|
<div class="column">mobile only column</div>
|
||
|
|
</div>
|
||
|
|
<div class="two column row">
|
||
|
|
<div class="column">column</div>
|
||
|
|
<div class="column">column</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
|
||
|
|
/* Some basic formatting */
|
||
|
|
code {
|
||
|
|
background-color: #E0E0E0;
|
||
|
|
padding: 0.25em 0.3em;
|
||
|
|
font-family: 'Lato';
|
||
|
|
font-weight: bold;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
padding: 5em 0em;
|
||
|
|
}
|
||
|
|
.ui.dividing.header,
|
||
|
|
.first {
|
||
|
|
margin-top: 5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.ui.dividing.header:first-child {
|
||
|
|
margin-top: 0em;
|
||
|
|
}
|
||
|
|
|
||
|
|
h1,
|
||
|
|
h3 {
|
||
|
|
margin-top: 10em;
|
||
|
|
}
|
||
|
|
|
||
|
|
img {
|
||
|
|
display: block;
|
||
|
|
max-width: 100%;
|
||
|
|
}
|
||
|
|
img + img {
|
||
|
|
margin-top: 0.5em;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Shows content box (not negative margins) */
|
||
|
|
.grid {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.grid:before {
|
||
|
|
position: absolute;
|
||
|
|
top: 1rem;
|
||
|
|
left: 1rem;
|
||
|
|
background-color: #F0F0F0;
|
||
|
|
content: '';
|
||
|
|
width: calc(100% - 2rem);
|
||
|
|
height: calc(100% - 2rem);
|
||
|
|
box-shadow: 0px 0px 0px 1px #DDDDDD inset;
|
||
|
|
}
|
||
|
|
.ui.divided.grid:before,
|
||
|
|
.celled.grid:before {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.ui.aligned .column:after {
|
||
|
|
display: none !important;
|
||
|
|
}
|
||
|
|
.grid .column:not(.row):not(.grid):after {
|
||
|
|
background-color: rgba(86, 61, 124, .15);
|
||
|
|
box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
|
||
|
|
content: "";
|
||
|
|
display: block;
|
||
|
|
min-height: 50px;
|
||
|
|
}
|
||
|
|
@media only screen and (max-width: 768px) {
|
||
|
|
.stackable.grid:before {
|
||
|
|
width: 100%;
|
||
|
|
left: 0em;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|