jlukic
10 years ago
3 changed files with 1244 additions and 1 deletions
Split View
Diff Options
@ -0,0 +1,442 @@ |
|||
<!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 Properities --> |
|||
<title>Bootstrap - Semantic</title> |
|||
<link rel="stylesheet" type="text/css" href="../dist/semantic.css"> |
|||
|
|||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script> |
|||
<script src="../dist/semantic.js"></script> |
|||
|
|||
<script> |
|||
$(document) |
|||
.ready(function() { |
|||
$('.ui.selection.dropdown').dropdown(); |
|||
$('.ui.menu .ui.dropdown').dropdown({ |
|||
on: 'hover' |
|||
}); |
|||
}) |
|||
; |
|||
</script> |
|||
</head> |
|||
<body> |
|||
|
|||
<div class="ui grid container"> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<h1 class="ui header">Bootstrap Migration</h1> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<div class="ui message"> |
|||
<h1 class="ui header">Hello, world!</h1> |
|||
<p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p> |
|||
<a class="ui blue button">Learn more »</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<h1 class="ui header">Buttons</h1> |
|||
<a class="ui button" tabindex="0"> |
|||
Default |
|||
</a> |
|||
<a class="ui primary button" tabindex="0"> |
|||
Primary |
|||
</a> |
|||
<a class="ui basic button" tabindex="0"> |
|||
Basic |
|||
</a> |
|||
<a class="ui positive button" tabindex="0"> |
|||
Success |
|||
</a> |
|||
<a class="ui negative button" tabindex="0"> |
|||
Error |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<h1 class="ui header">Thumbnails</h1> |
|||
<div class="ui divider"></div> |
|||
<img class="ui small image" src="images/wireframe/image.png"> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<h1 class="ui header">Dropdown</h1> |
|||
<div class="ui divider"></div> |
|||
<div class="ui selection dropdown"> |
|||
<input type="hidden" name="selection"> |
|||
<i class="dropdown icon"></i> |
|||
<div class="default text">Select</div> |
|||
<div class="menu"> |
|||
<div class="item" data-value="male">Male</div> |
|||
<div class="item" data-value="female">Female</div> |
|||
</div> |
|||
</div> |
|||
<div class="ui vertical menu"> |
|||
<a class="active item"> |
|||
Friends |
|||
</a> |
|||
<a class="item"> |
|||
Messages |
|||
</a> |
|||
<div class="ui dropdown item"> |
|||
<i class="dropdown icon"></i> |
|||
More |
|||
<div class="menu"> |
|||
<a class="item">Edit Profile</a> |
|||
<a class="item">Choose Language</a> |
|||
<a class="item">Account Settings</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="ui dropdown"> |
|||
<div class="visible menu"> |
|||
<div class="header">Categories</div> |
|||
<div class="item"> |
|||
<i class="dropdown icon"></i> |
|||
<span class="text">Clothing</span> |
|||
<div class="menu"> |
|||
<div class="header">Mens</div> |
|||
<div class="item">Shirts</div> |
|||
<div class="item">Pants</div> |
|||
<div class="item">Jeans</div> |
|||
<div class="item">Shoes</div> |
|||
<div class="divider"></div> |
|||
<div class="header">Womens</div> |
|||
<div class="item">Dresses</div> |
|||
<div class="item">Shoes</div> |
|||
<div class="item">Bags</div> |
|||
</div> |
|||
</div> |
|||
<div class="item">Home Goods</div> |
|||
<div class="item">Bedroom</div> |
|||
<div class="divider"></div> |
|||
<div class="header">Order</div> |
|||
<div class="item">Status</div> |
|||
<div class="item">Cancellations</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<h1 class="ui header">Badges</h1> |
|||
<div class="ui divider"></div> |
|||
<div class="ui vertical menu"> |
|||
<div class="item"> |
|||
One <span class="ui label">2</span> |
|||
</div> |
|||
<div class="item"> |
|||
Two <span class="ui label">2</span> |
|||
</div> |
|||
<div class="item"> |
|||
Three <span class="ui label">2</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="column"> |
|||
<h1 class="ui header">Tables</h1> |
|||
<div class="ui two column grid"> |
|||
<div class="column"> |
|||
<table class="ui table"> |
|||
<thead> |
|||
<tr> |
|||
<th>Name</th> |
|||
<th>Premium Plan</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>No</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Yes</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Yes</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="column"> |
|||
<table class="ui basic table"> |
|||
<thead> |
|||
<tr> |
|||
<th>Name</th> |
|||
<th>Premium Plan</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>No</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Yes</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Yes</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="column"> |
|||
<table class="ui definition table"> |
|||
<thead> |
|||
<tr> |
|||
<th>Name</th> |
|||
<th>Premium Plan</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>No</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Yes</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Yes</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="column"> |
|||
<table class="ui very basic table"> |
|||
<thead> |
|||
<tr> |
|||
<th>Name</th> |
|||
<th>Premium Plan</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>John</td> |
|||
<td>No</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jamie</td> |
|||
<td>Yes</td> |
|||
</tr> |
|||
<tr> |
|||
<td>Jill</td> |
|||
<td>Yes</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="sixteen wide column"> |
|||
<table class="ui celled structured table"> |
|||
<thead> |
|||
<tr> |
|||
<th rowspan="2">Name</th> |
|||
<th rowspan="2">Type</th> |
|||
<th rowspan="2">Files</th> |
|||
<th colspan="3">Languages</th> |
|||
</tr> |
|||
<tr> |
|||
<th>Ruby</th> |
|||
<th>JavaScript</th> |
|||
<th>Python</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>Alpha Team</td> |
|||
<td>Project 1</td> |
|||
<td>2</td> |
|||
<td> |
|||
<i class="large green checkmark icon"></i> |
|||
</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td rowspan="3">Beta Team</td> |
|||
<td>Project 1</td> |
|||
<td>52</td> |
|||
<td> |
|||
<i class="large green checkmark icon"></i> |
|||
</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Project 2</td> |
|||
<td>12</td> |
|||
<td></td> |
|||
<td> |
|||
<i class="large green checkmark icon"></i> |
|||
</td> |
|||
<td></td> |
|||
</tr> |
|||
<tr> |
|||
<td>Project 3</td> |
|||
<td>21</td> |
|||
<td> |
|||
<i class="large green checkmark icon"></i> |
|||
</td> |
|||
<td></td> |
|||
<td></td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<h1 class="ui header">Alerts</h1> |
|||
<div class="ui divider"></div> |
|||
<div class="ui positive message">Well done! You successfully read this important alert message.</div> |
|||
<div class="ui info message">Heads up! This alert needs your attention, but it's not super important.</div> |
|||
<div class="ui warning message">Warning! Best check yo self, you're not looking too good.</div> |
|||
<div class="ui error message">Oh snap! Change a few things up and try submitting again.</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<h1 class="ui header">List groups</h1> |
|||
<div class="ui divider"></div> |
|||
<div class="ui three column grid"> |
|||
<div class="column"> |
|||
<div class="ui segments"> |
|||
<div class="ui segment"> |
|||
<p>Cras justo odio</p> |
|||
</div> |
|||
<div class="ui segment"> |
|||
<p>Dapibus ac facilisis in</p> |
|||
</div> |
|||
<div class="ui segment"> |
|||
<p>Morbi leo risus</p> |
|||
</div> |
|||
<div class="ui segment"> |
|||
<p>Porta ac consectetur ac</p> |
|||
</div> |
|||
<div class="ui segment"> |
|||
<p>Vestibulum at eros</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui fluid vertical menu"> |
|||
<a class="item"> |
|||
<p>Cras justo odio</p> |
|||
</a> |
|||
<a class="item"> |
|||
<p>Vestibulum at eros</p> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui fluid vertical menu"> |
|||
<a class="item"> |
|||
<h1 class="ui medium header">List group item heading</h1> |
|||
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
|||
</a> |
|||
<a class="item"> |
|||
<h1 class="ui medium header">List group item heading</h1> |
|||
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
|||
</a> |
|||
<a class="item"> |
|||
<h1 class="ui medium header">List group item heading</h1> |
|||
<p>Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<h1 class="ui header">Panels</h1> |
|||
<div class="ui divider"></div> |
|||
<div class="ui three column grid"> |
|||
<div class="column"> |
|||
<div class="ui segments"> |
|||
<div class="ui top attached error message">Error</div> |
|||
<div class="ui segment">Panel content</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segments"> |
|||
<div class="ui top attached info message">Info</div> |
|||
<div class="ui segment">Panel content</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segments"> |
|||
<div class="ui top attached success message">Success</div> |
|||
<div class="ui segment">Panel content</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<h4 class="ui top attached inverted header">Header</h4> |
|||
<div class="ui buttom attached segment">Panel content</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segments"> |
|||
<h4 class="ui top attached block header">Header</h4> |
|||
<div class="ui buttom attached segment">Panel content</div> |
|||
</div> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui segments"> |
|||
<h4 class="ui top attached header">Header</h4> |
|||
<div class="ui buttom attached segment">Panel content</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="column"> |
|||
<h1 class="ui header">Wells</h1> |
|||
<div class="ui divider"></div> |
|||
<div class="ui segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p> |
|||
</div> |
|||
<div class="ui secondary segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p> |
|||
</div> |
|||
<div class="ui tertiary segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p> |
|||
</div> |
|||
<div class="ui inverted segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p> |
|||
</div> |
|||
<div class="ui secondary inverted segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p> |
|||
</div> |
|||
<div class="ui tertiary inverted segment"> |
|||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,801 @@ |
|||
<!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 Properities --> |
|||
<title>Bootstrap - Semantic</title> |
|||
<link rel="stylesheet" type="text/css" href="../dist/semantic.css"> |
|||
|
|||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script> |
|||
<script src="../dist/semantic.js"></script> |
|||
|
|||
<style type="text/css"> |
|||
body > .ui.container { |
|||
margin-top: 3em; |
|||
} |
|||
.color.grid { |
|||
margin: -1.5em; |
|||
width: 400px; |
|||
} |
|||
.ui.table { |
|||
table-layout: fixed; |
|||
} |
|||
.color.grid .column { |
|||
margin: 1em; |
|||
width: 100px; |
|||
height: 100px; |
|||
} |
|||
.spaced > .button { |
|||
margin-bottom: 1em; |
|||
} |
|||
.container > h2 { |
|||
margin: 5em 0em 1em; |
|||
} |
|||
.ui.menu { |
|||
margin: 3em 0em; |
|||
} |
|||
</style> |
|||
<script> |
|||
$(document) |
|||
.ready(function() { |
|||
$('.ui.dropdown').dropdown(); |
|||
$('.ui.buttons .dropdown.button').dropdown({ |
|||
action: 'combo' |
|||
}); |
|||
$('.ui.menu .ui.dropdown').dropdown({ |
|||
on: 'hover' |
|||
}); |
|||
}) |
|||
; |
|||
</script> |
|||
</head> |
|||
<body> |
|||
|
|||
<div class="ui container"> |
|||
|
|||
<h1 class="center aligned ui block header">Theming Examples</h1> |
|||
|
|||
|
|||
<!--- Site !--> |
|||
<h2>Site</h2> |
|||
<div class="ui three column stackable grid"> |
|||
<div class="column"> |
|||
<h1>Heading 1</h1> |
|||
<h2>Heading 2</h2> |
|||
<h3>Heading 3</h3> |
|||
<h4>Heading 4</h4> |
|||
<h5>Heading 5</h5> |
|||
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> |
|||
</div> |
|||
<div class="column"> |
|||
<h2>Example body text</h2> |
|||
<p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p> |
|||
<p><small>This line of text is meant to be treated as fine print.</small></p> |
|||
<p>The following snippet of text is <strong>rendered as bold text</strong>.</p> |
|||
<p>The following snippet of text is <em>rendered as italicized text</em>.</p> |
|||
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p> |
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui four column stackable middle aligned centered color grid"> |
|||
<div class="black column">Black</div> |
|||
<div class="orange column">Orange</div> |
|||
<div class="green column">Green</div> |
|||
<div class="teal column">Teal</div> |
|||
<div class="blue column">Blue</div> |
|||
<div class="purple column">Purple</div> |
|||
<div class="pink column">Pink</div> |
|||
<div class="red column">Red</div> |
|||
<div class="yellow column">Yellow</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--- Menu !--> |
|||
<h2>Menu</h2> |
|||
|
|||
<div class="ui menu"> |
|||
<div class="header item">Brand</div> |
|||
<a class="active item">Link</a> |
|||
<a class="item">Link</a> |
|||
<div class="ui dropdown item"> |
|||
Dropdown |
|||
<i class="dropdown icon"></i> |
|||
<div class="menu"> |
|||
<div class="item">Action</div> |
|||
<div class="item">Another Action</div> |
|||
<div class="item">Something else here</div> |
|||
<div class="divider"></div> |
|||
<div class="item">Separated Link</div> |
|||
<div class="divider"></div> |
|||
<div class="item">One more separated link</div> |
|||
</div> |
|||
</div> |
|||
<div class="right menu"> |
|||
<div class="item"> |
|||
<div class="ui action left icon input"> |
|||
<i class="search icon"></i> |
|||
<input type="text" placeholder="Search"> |
|||
<button class="ui button">Submit</button> |
|||
</div> |
|||
</div> |
|||
<a class="item">Link</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="ui inverted menu"> |
|||
<div class="header item">Brand</div> |
|||
<div class="active item">Link</div> |
|||
<a class="item">Link</a> |
|||
<div class="ui dropdown item"> |
|||
Dropdown |
|||
<i class="dropdown icon"></i> |
|||
<div class="menu"> |
|||
<div class="item">Action</div> |
|||
<div class="item">Another Action</div> |
|||
<div class="item">Something else here</div> |
|||
<div class="divider"></div> |
|||
<div class="item">Separated Link</div> |
|||
<div class="divider"></div> |
|||
<div class="item">One more separated link</div> |
|||
</div> |
|||
</div> |
|||
<div class="right menu"> |
|||
<div class="item"> |
|||
<div class="ui transparent inverted icon input"> |
|||
<i class="search icon"></i> |
|||
<input type="text" placeholder="Search"> |
|||
</div> |
|||
</div> |
|||
<a class="item">Link</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="ui secondary menu"> |
|||
<div class="active item">Link</div> |
|||
<a class="item">Link</a> |
|||
<div class="ui dropdown item"> |
|||
Dropdown |
|||
<i class="dropdown icon"></i> |
|||
<div class="menu"> |
|||
<div class="item">Action</div> |
|||
<div class="item">Another Action</div> |
|||
<div class="item">Something else here</div> |
|||
<div class="divider"></div> |
|||
<div class="item">Separated Link</div> |
|||
<div class="divider"></div> |
|||
<div class="item">One more separated link</div> |
|||
</div> |
|||
</div> |
|||
<div class="right menu"> |
|||
<div class="item"> |
|||
<div class="ui action left icon input"> |
|||
<i class="search icon"></i> |
|||
<input type="text" placeholder="Search"> |
|||
<button class="ui button">Submit</button> |
|||
</div> |
|||
</div> |
|||
<a class="item">Link</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="ui three column doubling grid"> |
|||
<div class="column"> |
|||
<div class="ui secondary pointing menu"> |
|||
<div class="active item">Link</div> |
|||
<a class="item">Link</a> |
|||
<a class="item">Link</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="column"> |
|||
<div class="ui tabular menu"> |
|||
<div class="active item">Link</div> |
|||
<a class="item">Link</a> |
|||
<a class="item">Link</a> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="column"> |
|||
<div class="ui pointing menu"> |
|||
<div class="active item">Link</div> |
|||
<a class="item">Link</a> |
|||
<div class="ui right dropdown item"> |
|||
Dropdown |
|||
<i class="dropdown icon"></i> |
|||
<div class="menu"> |
|||
<div class="item">Action</div> |
|||
<div class="item">Another Action</div> |
|||
<div class="item">Something else here</div> |
|||
<div class="divider"></div> |
|||
<div class="item">Separated Link</div> |
|||
<div class="divider"></div> |
|||
<div class="item">One more separated link</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!--- Button !--> |
|||
<h2>Buttons</h2> |
|||
|
|||
<div class="ui stackable equal width grid"> |
|||
<div class="column"> |
|||
<button class="ui button">Default</button> |
|||
<button class="ui primary button">Primary</button> |
|||
<button class="ui secondary button">Secondary</button> |
|||
<button class="ui basic button">Basic</button> |
|||
<button class="ui compact button"> |
|||
Compact |
|||
</button> |
|||
|
|||
<div class="ui divider"></div> |
|||
<button class="ui icon button"> |
|||
<i class="heart icon"></i> |
|||
</button> |
|||
<button class="ui labeled icon button"> |
|||
<i class="heart icon"></i> |
|||
Labeled |
|||
</button> |
|||
<button class="ui right labeled icon button"> |
|||
<i class="heart icon"></i> |
|||
Labeled |
|||
</button> |
|||
|
|||
<div class="ui divider"></div> |
|||
|
|||
<div class="ui buttons"> |
|||
<button class="ui button">Combo</button> |
|||
<div class="ui floating dropdown icon button"> |
|||
<i class="dropdown icon"></i> |
|||
<div class="menu"> |
|||
<div class="item">Choice 1</div> |
|||
<div class="item">Choice 2</div> |
|||
<div class="item">Choice 3</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="ui floating search dropdown button"> |
|||
<span class="text">Search Dropdown</span> |
|||
<div class="menu"> |
|||
<div class="item">Arabic</div> |
|||
<div class="item">Chinese</div> |
|||
<div class="item">Danish</div> |
|||
<div class="item">Dutch</div> |
|||
<div class="item">English</div> |
|||
<div class="item">French</div> |
|||
<div class="item">German</div> |
|||
<div class="item">Greek</div> |
|||
<div class="item">Hungarian</div> |
|||
<div class="item">Italian</div> |
|||
<div class="item">Japanese</div> |
|||
<div class="item">Korean</div> |
|||
<div class="item">Lithuanian</div> |
|||
<div class="item">Persian</div> |
|||
<div class="item">Polish</div> |
|||
<div class="item">Portuguese</div> |
|||
<div class="item">Russian</div> |
|||
<div class="item">Spanish</div> |
|||
<div class="item">Swedish</div> |
|||
<div class="item">Turkish</div> |
|||
<div class="item">Vietnamese</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="ui divider"></div> |
|||
|
|||
<div class="ui animated button" tabindex="0"> |
|||
<div class="visible content">Horizontal</div> |
|||
<div class="hidden content"> |
|||
Hidden |
|||
</div> |
|||
</div> |
|||
<div class="ui vertical animated button" tabindex="0"> |
|||
<div class="visible content">Vertical</div> |
|||
<div class="hidden content"> |
|||
Hidden |
|||
</div> |
|||
</div> |
|||
<div class="ui animated fade button" tabindex="0"> |
|||
<div class="visible content">Fade In</div> |
|||
<div class="hidden content"> |
|||
Hidden |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="ui divider"></div> |
|||
<button class="ui disabled button">Disabled</button> |
|||
<button class="ui loading button">Loading</button> |
|||
|
|||
<div class="ui divider"></div> |
|||
|
|||
<div class="ui buttons"> |
|||
<button class="ui button">1</button> |
|||
<button class="ui button">2</button> |
|||
<button class="ui button">3</button> |
|||
</div> |
|||
|
|||
<div class="ui icon buttons"> |
|||
<button class="ui button"><i class="align left icon"></i></button> |
|||
<button class="ui button"><i class="align center icon"></i></button> |
|||
<button class="ui button"><i class="align right icon"></i></button> |
|||
<button class="ui button"><i class="align justify icon"></i></button> |
|||
</div> |
|||
|
|||
<div class="ui buttons"> |
|||
<button class="ui button">1</button> |
|||
<div class="or"></div> |
|||
<button class="ui button">2</button> |
|||
</div> |
|||
|
|||
<div class="ui divider"></div> |
|||
<button class="ui mini button">Mini</button> |
|||
<button class="ui tiny button">Tiny</button> |
|||
<button class="ui small button">Small</button> |
|||
<button class="ui large button">Large</button> |
|||
<button class="ui big button">Big</button> |
|||
<button class="ui huge button">Huge</button> |
|||
<button class="ui massive button">Massive</button> |
|||
|
|||
</div> |
|||
<div class="column"> |
|||
<div class="ui hidden divider"></div> |
|||
|
|||
<div class="spaced"> |
|||
<button class="yellow ui button">Yellow</button> |
|||
<button class="orange ui button">Orange</button> |
|||
<button class="green ui button">Green</button> |
|||
<button class="teal ui button">Teal</button> |
|||
<button class="blue ui button">Blue</button> |
|||
<button class="purple ui button">Purple</button> |
|||
<button class="pink ui button">Pink</button> |
|||
<button class="red ui button">Red</button> |
|||
<button class="black ui button">Black</button> |
|||
</div> |
|||
|
|||
<div class="ui inverted segment"> |
|||
<button class="ui inverted button">Inverted</button> |
|||
<button class="ui inverted basic button">Basic</button> |
|||
<button class="ui inverted blue button">Colored</button> |
|||
<button class="ui inverted blue basic button">Basic Colored</button> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
<!--- Tables !--> |
|||
<h2>Tables</h2> |
|||
|
|||
<div class="ui two column grid"> |
|||
<div class="column"> |
|||
<table class="ui right aligned table"> |
|||
<thead> |
|||
<th class="left aligned">Person</th> |
|||
<th>Calories</th> |
|||
<th>Fat</th> |
|||
<th>Protein</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="left aligned">Delmar</td> |
|||
<td>36</td> |
|||
<td>36g</td> |
|||
<td>2g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Louise</td> |
|||
<td>24</td> |
|||
<td>24g</td> |
|||
<td>29g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Terrell</td> |
|||
<td>22</td> |
|||
<td>11g</td> |
|||
<td>9g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Marion</td> |
|||
<td>7</td> |
|||
<td>35g</td> |
|||
<td>3g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Clayton</td> |
|||
<td>7</td> |
|||
<td>38g</td> |
|||
<td>20g</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="column"> |
|||
<table class="ui right aligned celled table"> |
|||
<thead> |
|||
<th class="left aligned">Person</th> |
|||
<th>Calories</th> |
|||
<th>Fat</th> |
|||
<th>Protein</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="left aligned">Drema</td> |
|||
<td class="positive">15</td> |
|||
<td class="negative">26g</td> |
|||
<td class="warning">8g</td> |
|||
</tr> |
|||
<tr class="positive"> |
|||
<td class="left aligned">Nona</td> |
|||
<td>11</td> |
|||
<td>21g</td> |
|||
<td>16g</td> |
|||
</tr> |
|||
<tr class="negative"> |
|||
<td class="left aligned">Isidra</td> |
|||
<td>34</td> |
|||
<td>43g</td> |
|||
<td>11g</td> |
|||
</tr> |
|||
<tr class="warning"> |
|||
<td class="left aligned">Bart</td> |
|||
<td>41</td> |
|||
<td>40g</td> |
|||
<td>30g</td> |
|||
</tr> |
|||
<tr class="selected"> |
|||
<td class="left aligned">Nguyet</td> |
|||
<td>41</td> |
|||
<td>44g</td> |
|||
<td>28g</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="column"> |
|||
<table class="ui basic right aligned table"> |
|||
<thead> |
|||
<th class="left aligned">Person</th> |
|||
<th>Calories</th> |
|||
<th>Fat</th> |
|||
<th>Protein</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="left aligned">Mirna</td> |
|||
<td>1</td> |
|||
<td>28g</td> |
|||
<td>29g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Fernando</td> |
|||
<td>38</td> |
|||
<td>2g</td> |
|||
<td>48g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Lisette</td> |
|||
<td>18</td> |
|||
<td>9g</td> |
|||
<td>23g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Ahmad</td> |
|||
<td>42</td> |
|||
<td>26g</td> |
|||
<td>49g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Laquanda</td> |
|||
<td>27</td> |
|||
<td>27g</td> |
|||
<td>49g</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="column"> |
|||
<table class="ui very basic right aligned table"> |
|||
<thead> |
|||
<th class="left aligned">Person</th> |
|||
<th>Calories</th> |
|||
<th>Fat</th> |
|||
<th>Protein</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="left aligned">Drema</td> |
|||
<td>15</td> |
|||
<td>26g</td> |
|||
<td>8g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Nona</td> |
|||
<td>11</td> |
|||
<td>21g</td> |
|||
<td>16g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Isidra</td> |
|||
<td>34</td> |
|||
<td>43g</td> |
|||
<td>11g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Bart</td> |
|||
<td>41</td> |
|||
<td>40g</td> |
|||
<td>30g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Nguyet</td> |
|||
<td>41</td> |
|||
<td>44g</td> |
|||
<td>28g</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="column"> |
|||
<table class="ui celled selectable right aligned table"> |
|||
<thead> |
|||
<th class="left aligned">Person</th> |
|||
<th>Calories</th> |
|||
<th>Fat</th> |
|||
<th>Protein</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="left aligned">Tasia</td> |
|||
<td>12</td> |
|||
<td>7g</td> |
|||
<td>21g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Ronnie</td> |
|||
<td>38</td> |
|||
<td>37g</td> |
|||
<td>38g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Gabriel</td> |
|||
<td>30</td> |
|||
<td>46g</td> |
|||
<td>46g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Logan</td> |
|||
<td>12</td> |
|||
<td>21g</td> |
|||
<td>39g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Clare</td> |
|||
<td>39</td> |
|||
<td>41g</td> |
|||
<td>2g</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="column"> |
|||
<table class="ui striped right aligned table"> |
|||
<thead> |
|||
<th class="left aligned">Person</th> |
|||
<th>Calories</th> |
|||
<th>Fat</th> |
|||
<th>Protein</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="left aligned">Rosaline</td> |
|||
<td>5</td> |
|||
<td>35g</td> |
|||
<td>6g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Barrie</td> |
|||
<td>27</td> |
|||
<td>23g</td> |
|||
<td>28g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Trinidad</td> |
|||
<td>14</td> |
|||
<td>50g</td> |
|||
<td>7g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Jaqueline</td> |
|||
<td>31</td> |
|||
<td>30g</td> |
|||
<td>50g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Tamala</td> |
|||
<td>18</td> |
|||
<td>6g</td> |
|||
<td>13g</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="column"> |
|||
<table class="ui padded celled right aligned table"> |
|||
<thead> |
|||
<th class="left aligned">Person</th> |
|||
<th>Calories</th> |
|||
<th>Fat</th> |
|||
<th>Protein</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="left aligned">Lianne</td> |
|||
<td>23</td> |
|||
<td>32g</td> |
|||
<td>43g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Joette</td> |
|||
<td>21</td> |
|||
<td>13g</td> |
|||
<td>31g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Le</td> |
|||
<td>28</td> |
|||
<td>39g</td> |
|||
<td>23g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Sacha</td> |
|||
<td>46</td> |
|||
<td>43g</td> |
|||
<td>13g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Bruna</td> |
|||
<td>9</td> |
|||
<td>47g</td> |
|||
<td>12g</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="column"> |
|||
<table class="ui definition celled right aligned table"> |
|||
<thead> |
|||
<th></th> |
|||
<th>Calories</th> |
|||
<th>Fat</th> |
|||
<th>Protein</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="left aligned">Lianne</td> |
|||
<td>23</td> |
|||
<td>32g</td> |
|||
<td>43g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Joette</td> |
|||
<td>21</td> |
|||
<td>13g</td> |
|||
<td>31g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Le</td> |
|||
<td>28</td> |
|||
<td>39g</td> |
|||
<td>23g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Sacha</td> |
|||
<td>46</td> |
|||
<td>43g</td> |
|||
<td>13g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Bruna</td> |
|||
<td>9</td> |
|||
<td>47g</td> |
|||
<td>12g</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="column"> |
|||
<table class="ui inverted right aligned table"> |
|||
<thead> |
|||
<th class="left aligned">Person</th> |
|||
<th>Calories</th> |
|||
<th>Fat</th> |
|||
<th>Protein</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="left aligned">Lianne</td> |
|||
<td>23</td> |
|||
<td>32g</td> |
|||
<td>43g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Joette</td> |
|||
<td>21</td> |
|||
<td>13g</td> |
|||
<td>31g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Le</td> |
|||
<td>28</td> |
|||
<td>39g</td> |
|||
<td>23g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Sacha</td> |
|||
<td>46</td> |
|||
<td>43g</td> |
|||
<td>13g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Bruna</td> |
|||
<td>9</td> |
|||
<td>47g</td> |
|||
<td>12g</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
<div class="column"> |
|||
<table class="ui inverted blue selectable celled right aligned table"> |
|||
<thead> |
|||
<th class="left aligned">Person</th> |
|||
<th>Calories</th> |
|||
<th>Fat</th> |
|||
<th>Protein</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="left aligned">Lianne</td> |
|||
<td>23</td> |
|||
<td>32g</td> |
|||
<td>43g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Joette</td> |
|||
<td>21</td> |
|||
<td>13g</td> |
|||
<td>31g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Le</td> |
|||
<td>28</td> |
|||
<td>39g</td> |
|||
<td>23g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Sacha</td> |
|||
<td>46</td> |
|||
<td>43g</td> |
|||
<td>13g</td> |
|||
</tr> |
|||
<tr> |
|||
<td class="left aligned">Bruna</td> |
|||
<td>9</td> |
|||
<td>47g</td> |
|||
<td>12g</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save