jlukic
10 years ago
40 changed files with 1469 additions and 8612 deletions
Unified View
Diff Options
-
0examples/assets/images/avatar/nan.jpg
-
0examples/assets/images/avatar/tom.jpg
-
0examples/assets/images/bg.jpg
-
0examples/assets/images/logo.png
-
0examples/assets/images/wireframe/centered-paragraph.png
-
0examples/assets/images/wireframe/image-square.png
-
0examples/assets/images/wireframe/image-text.png
-
0examples/assets/images/wireframe/image.png
-
0examples/assets/images/wireframe/media-paragraph-alt.png
-
0examples/assets/images/wireframe/media-paragraph.png
-
0examples/assets/images/wireframe/paragraph.png
-
0examples/assets/images/wireframe/short-paragraph.png
-
0examples/assets/images/wireframe/square-image.png
-
0examples/assets/images/wireframe/text-image.png
-
0examples/assets/images/wireframe/white-image.png
-
4examples/assets/library/jquery.min.js
-
15examples/assets/show-examples.js
-
4examples/bootstrap.html
-
199examples/components/button.html
-
312examples/components/card.html
-
155examples/components/input.html
-
179examples/components/menu.html
-
69examples/components/site.html
-
471examples/components/table.html
-
18examples/fixed-menu.html
-
8examples/grid.html
-
4examples/homepage.html
-
2examples/login.html
-
74examples/old/feed.css
-
183examples/old/feed.html
-
23examples/old/feed.js
-
103examples/old/grid.css
-
1439examples/old/grid.html
-
134examples/old/homepage.css
-
315examples/old/homepage.html
-
57examples/old/homepage.js
-
49examples/old/kitchensink.css
-
5454examples/old/kitchensink.html
-
14examples/sticky-menu.html
-
796examples/theming.html
4
examples/assets/library/jquery.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,15 @@ |
|||||
|
$(document) |
||||
|
.ready(function() { |
||||
|
// add popup to show name
|
||||
|
$('.ui:not(.container, .grid)').each(function() { |
||||
|
$(this) |
||||
|
.popup({ |
||||
|
on : 'hover', |
||||
|
variation : 'small inverted', |
||||
|
exclusive : true, |
||||
|
content : $(this).attr('class') |
||||
|
}) |
||||
|
; |
||||
|
}); |
||||
|
}) |
||||
|
; |
||||
@ -0,0 +1,199 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
|
||||
|
<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"> |
||||
|
<title>Theming - Semantic</title> |
||||
|
|
||||
|
<!--- Site CSS --> |
||||
|
<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/grid.css"> |
||||
|
|
||||
|
<!--- Component CSS --> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/icon.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/button.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/segment.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/divider.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/transition.css"> |
||||
|
|
||||
|
<!--- Example Libs --> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/popup.css"> |
||||
|
<script src="../assets/library/jquery.min.js"></script> |
||||
|
<script src="../assets/show-examples.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/popup.js"></script> |
||||
|
|
||||
|
<!--- Component JS --> |
||||
|
<script type="text/javascript" src="../../dist/components/transition.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/dropdown.js"></script> |
||||
|
|
||||
|
<!--- Example CSS --> |
||||
|
<style> |
||||
|
.spaced > .button { |
||||
|
margin-bottom: 1em; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<!--- Example Javascript --> |
||||
|
<script> |
||||
|
$(document) |
||||
|
.ready(function() { |
||||
|
$('.ui.dropdown').dropdown(); |
||||
|
|
||||
|
$('.ui.buttons .dropdown.button').dropdown({ |
||||
|
action: 'combo' |
||||
|
}); |
||||
|
}) |
||||
|
; |
||||
|
</script> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<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> |
||||
|
<div class="column"> |
||||
|
<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 class="ui 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> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,312 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
|
||||
|
<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"> |
||||
|
<title>Theming - Semantic</title> |
||||
|
|
||||
|
<!--- Site CSS --> |
||||
|
<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/grid.css"> |
||||
|
|
||||
|
<!--- Component CSS --> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/icon.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/button.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/card.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/label.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/image.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/reveal.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/dimmer.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/rating.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/transition.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/popup.css"> |
||||
|
|
||||
|
<!--- Component JS --> |
||||
|
<script src="../assets/library/jquery.min.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/popup.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/dimmer.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/rating.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/transition.js"></script> |
||||
|
|
||||
|
<!--- Show Names --> |
||||
|
<script src="../assets/show-examples.js"></script> |
||||
|
|
||||
|
<!--- Example CSS --> |
||||
|
<style> |
||||
|
body { |
||||
|
padding: 1em; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<!--- Example Javascript --> |
||||
|
<script> |
||||
|
$(document) |
||||
|
.ready(function() { |
||||
|
$('.special.card .image').dimmer({ |
||||
|
on: 'hover' |
||||
|
}); |
||||
|
$('.star.rating') |
||||
|
.rating() |
||||
|
; |
||||
|
$('.card .dimmer') |
||||
|
.dimmer({ |
||||
|
on: 'hover' |
||||
|
}) |
||||
|
; |
||||
|
}) |
||||
|
; |
||||
|
</script> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<div class="ui four cards"> |
||||
|
<div class="ui card"> |
||||
|
<div class="image"> |
||||
|
<div class="ui blurring inverted dimmer"> |
||||
|
<div class="content"> |
||||
|
<div class="center"> |
||||
|
<div class="ui teal button">Add Friend</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<img src="../assets/images/wireframe/image.png"> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<div class="header">Title</div> |
||||
|
<div class="meta"> |
||||
|
<a class="group">Meta</a> |
||||
|
</div> |
||||
|
<div class="description">One or two sentence description that may go to several lines</div> |
||||
|
</div> |
||||
|
<div class="extra content"> |
||||
|
<a class="right floated created">Arbitrary</a> |
||||
|
<a class="friends"> |
||||
|
Arbitrary</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="ui card"> |
||||
|
<div class="blurring dimmable image"> |
||||
|
<div class="ui dimmer"> |
||||
|
<div class="content"> |
||||
|
<div class="center"> |
||||
|
<div class="ui inverted button">Call to Action</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<img src="../assets/images/wireframe/image.png"> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<a class="header">Name</a> |
||||
|
<div class="meta"> |
||||
|
<span class="date">Date</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="extra content"> |
||||
|
<a> |
||||
|
<i class="users icon"></i> |
||||
|
Users |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="ui card"> |
||||
|
<div class="ui slide right reveal image"> |
||||
|
<div class="visible content"> |
||||
|
<img class="ui fluid image" src="../assets/images/avatar/nan.jpg"> |
||||
|
</div> |
||||
|
<div class="hidden content"> |
||||
|
<img class="ui fluid image" src="../assets/images/avatar/tom.jpg"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="ui card"> |
||||
|
<div class="ui move reveal image"> |
||||
|
<div class="visible content"> |
||||
|
<img class="ui fluid image" src="../assets/images/avatar/tom.jpg"> |
||||
|
</div> |
||||
|
<div class="hidden content"> |
||||
|
<img class="ui fluid image" src="../assets/images/avatar/nan.jpg"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image"> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="ui four cards"> |
||||
|
<div class="ui card"> |
||||
|
<div class="extra content"> |
||||
|
<span class="left floated like"> |
||||
|
<i class="like icon"></i> |
||||
|
Like |
||||
|
</span> |
||||
|
<span class="right floated star"> |
||||
|
<i class="star icon"></i> |
||||
|
Favorite |
||||
|
</span> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="ui card"> |
||||
|
<div class="content"> |
||||
|
<div class="header"> |
||||
|
<img src="../assets/images/wireframe/square-image.png" class="ui avatar right spaced image"> |
||||
|
Abbreviated Header |
||||
|
</div> |
||||
|
<div class="description"> |
||||
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="ui two bottom attached buttons"> |
||||
|
<div class="ui button"> |
||||
|
Action 1 |
||||
|
</div> |
||||
|
<div class="ui button"> |
||||
|
Action 2 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<a href="#" class="ui card"> |
||||
|
<div class="content"> |
||||
|
<div class="header">Cute Dog</div> |
||||
|
<div class="meta"> |
||||
|
<span class="category">Animals</span> |
||||
|
</div> |
||||
|
<div class="description"> |
||||
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image"> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="extra content"> |
||||
|
<div class="right floated author"> |
||||
|
<img src="../assets/images/wireframe/square-image.png" class="ui avatar image"> Username |
||||
|
</div> |
||||
|
</div> |
||||
|
</a> |
||||
|
<div class="ui card"> |
||||
|
<div class="ui two top attached basic buttons"> |
||||
|
<div class="ui button"> |
||||
|
Action 1 |
||||
|
</div> |
||||
|
<div class="ui button"> |
||||
|
Action 2 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
<img src="../assets/images/wireframe/paragraph.png" class="ui wireframe image"> |
||||
|
</div> |
||||
|
<div class="ui two bottom attached basic buttons"> |
||||
|
<div class="ui button"> |
||||
|
Action 3 |
||||
|
</div> |
||||
|
<div class="ui button"> |
||||
|
Action 4 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<div class="ui four cards"> |
||||
|
<div class="card"> |
||||
|
<div class="content"> |
||||
|
Content 1 |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
Content 2 |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
Content 3 |
||||
|
</div> |
||||
|
<div class="extra content"> |
||||
|
Extra Content |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card"> |
||||
|
<div class="content"> |
||||
|
Content 1 |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
Content 2 |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
Content 3 |
||||
|
</div> |
||||
|
<div class="extra content"> |
||||
|
Extra Content |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card"> |
||||
|
<div class="content"> |
||||
|
Content 1 |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
Content 2 |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
Content 3 |
||||
|
</div> |
||||
|
<div class="extra content"> |
||||
|
Extra Content |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card"> |
||||
|
<div class="content"> |
||||
|
Content 1 |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
Content 2 |
||||
|
</div> |
||||
|
<div class="content"> |
||||
|
Content 3 |
||||
|
</div> |
||||
|
<div class="extra content"> |
||||
|
Extra Content |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="ui four cards"> |
||||
|
<div class="card"> |
||||
|
<div class="image"> |
||||
|
<img src="../assets/images/wireframe/image.png"> |
||||
|
</div> |
||||
|
<div class="extra center aligned"> |
||||
|
<div data-rating="4" class="ui star rating"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card"> |
||||
|
<div class="image"> |
||||
|
<img src="../assets/images/wireframe/image.png"> |
||||
|
</div> |
||||
|
<div class="extra center aligned"> |
||||
|
<div data-rating="2" class="ui star rating"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card"> |
||||
|
<div class="image"> |
||||
|
<img src="../assets/images/wireframe/image.png"> |
||||
|
</div> |
||||
|
<div class="extra center aligned"> |
||||
|
<div data-rating="3" class="ui star rating"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="card"> |
||||
|
<div class="image"> |
||||
|
<img src="../assets/images/wireframe/image.png"> |
||||
|
</div> |
||||
|
<div class="extra center aligned"> |
||||
|
<div data-rating="4" class="ui star rating"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,155 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
|
||||
|
<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"> |
||||
|
<title>Theming - Semantic</title> |
||||
|
|
||||
|
<!--- Site CSS --> |
||||
|
<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/grid.css"> |
||||
|
|
||||
|
<!--- Component CSS --> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/icon.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/input.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/button.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/divider.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/label.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/transition.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/popup.css"> |
||||
|
|
||||
|
<!--- Component JS --> |
||||
|
<script src="../assets/library/jquery.min.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/popup.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/dropdown.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/transition.js"></script> |
||||
|
|
||||
|
<!--- Show Names --> |
||||
|
<script src="../assets/show-examples.js"></script> |
||||
|
|
||||
|
<!--- Example CSS --> |
||||
|
<style> |
||||
|
.ui.input + .ui.input { |
||||
|
margin-left: 1em; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<!--- Example Javascript --> |
||||
|
<script> |
||||
|
$(document) |
||||
|
.ready(function() { |
||||
|
$('.ui.dropdown') |
||||
|
.dropdown({ |
||||
|
on: 'click' |
||||
|
}) |
||||
|
; |
||||
|
}) |
||||
|
; |
||||
|
</script> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<div class="ui two column stackable grid"> |
||||
|
<div class="column"> |
||||
|
|
||||
|
<div class="ui action left icon input"> |
||||
|
<i class="search icon"></i> |
||||
|
<input type="text" placeholder="Search..."> |
||||
|
<div class="ui teal button">Search</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="ui divider"></div> |
||||
|
<div class="ui input error"> |
||||
|
<input placeholder="Search..." type="text"> |
||||
|
</div> |
||||
|
<div class="ui divider"></div> |
||||
|
|
||||
|
<div class="ui right labeled input"> |
||||
|
<input placeholder="Placeholder" type="text"> |
||||
|
<div class="ui dropdown label"> |
||||
|
<div class="text">Dropdown</div> |
||||
|
<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 divider"></div> |
||||
|
|
||||
|
<div class="ui transparent icon input"> |
||||
|
<input placeholder="Search..." type="text"> |
||||
|
<i class="search icon"></i> |
||||
|
</div> |
||||
|
<div class="ui transparent left icon input"> |
||||
|
<input placeholder="Search..." type="text"> |
||||
|
<i class="search icon"></i> |
||||
|
</div> |
||||
|
<div class="ui divider"></div> |
||||
|
<div class="ui left icon input loading"> |
||||
|
<input placeholder="Loading..." type="text"> |
||||
|
<i class="search icon"></i> |
||||
|
</div> |
||||
|
|
||||
|
<div class="ui icon input loading"> |
||||
|
<input placeholder="Loading..." type="text"> |
||||
|
<i class="search icon"></i> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<div class="column"> |
||||
|
<div class="ui right labeled left icon input"> |
||||
|
<i class="tags icon"></i> |
||||
|
<input placeholder="Enter tags" type="text"> |
||||
|
<a class="ui tag label"> |
||||
|
Add Tag |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="ui divider"></div> |
||||
|
<div class="ui labeled input"> |
||||
|
<a class="ui label"> |
||||
|
Label |
||||
|
</a> |
||||
|
<input type="text" placeholder="Placeholder..."> |
||||
|
</div> |
||||
|
<div class="ui divider"></div> |
||||
|
<div class="ui right labeled input"> |
||||
|
<input type="text" placeholder="Placeholder..."> |
||||
|
<a class="ui label"> |
||||
|
Label |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class="ui divider"></div> |
||||
|
<div class="ui labeled icon input"> |
||||
|
<div class="ui label"> |
||||
|
http:// |
||||
|
</div> |
||||
|
<input type="text" placeholder="domain.com"> |
||||
|
<i class="add circle link icon"></i> |
||||
|
</div> |
||||
|
<div class="ui right action input"> |
||||
|
<input type="text" placeholder="domain.com"> |
||||
|
<div class="ui teal button"> |
||||
|
<i class="add icon"></i> |
||||
|
Add |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="ui divider"></div> |
||||
|
<div class="ui corner labeled input"> |
||||
|
<input type="text" placeholder="Required Field"> |
||||
|
<div class="ui corner label"> |
||||
|
<i class="asterisk icon"></i> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,179 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
|
||||
|
<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"> |
||||
|
<title>Theming - Semantic</title> |
||||
|
|
||||
|
<!--- Site CSS --> |
||||
|
<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/grid.css"> |
||||
|
|
||||
|
<!--- Component CSS --> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/menu.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/input.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/dropdown.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/icon.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/button.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/transition.css"> |
||||
|
|
||||
|
<!--- Example Libs --> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/popup.css"> |
||||
|
<script src="../assets/library/jquery.min.js"></script> |
||||
|
<script src="../assets/show-examples.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/popup.js"></script> |
||||
|
|
||||
|
<!--- Component JS --> |
||||
|
<script type="text/javascript" src="../../dist/components/transition.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/dropdown.js"></script> |
||||
|
|
||||
|
<!--- Example CSS --> |
||||
|
<style> |
||||
|
.ui.menu { |
||||
|
margin: 3em 0em; |
||||
|
} |
||||
|
.ui.menu:last-child { |
||||
|
margin-bottom: 110px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<!--- Example Javascript --> |
||||
|
<script> |
||||
|
$(document) |
||||
|
.ready(function() { |
||||
|
$('.ui.menu .ui.dropdown').dropdown({ |
||||
|
on: 'hover' |
||||
|
}); |
||||
|
$('.ui.menu a.item') |
||||
|
.on('click', function() { |
||||
|
$(this) |
||||
|
.addClass('active') |
||||
|
.siblings() |
||||
|
.removeClass('active') |
||||
|
; |
||||
|
}) |
||||
|
; |
||||
|
}) |
||||
|
; |
||||
|
</script> |
||||
|
</head> |
||||
|
<body> |
||||
|
|
||||
|
<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="right item"> |
||||
|
Right Text |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,69 @@ |
|||||
|
<!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>Theming - 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/grid.css"> |
||||
|
|
||||
|
<style> |
||||
|
.color.grid { |
||||
|
margin: -1.5em; |
||||
|
width: 400px; |
||||
|
} |
||||
|
.ui.table { |
||||
|
table-layout: fixed; |
||||
|
} |
||||
|
.color.grid .column { |
||||
|
margin: 0.5em; |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
} |
||||
|
</style> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
<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 three column stackable padded middle aligned centered color grid"> |
||||
|
<div class="red column">Red</div> |
||||
|
<div class="orange column">Orange</div> |
||||
|
<div class="yellow column">Yellow</div> |
||||
|
<div class="olive column">Olive</div> |
||||
|
<div class="green column">Green</div> |
||||
|
<div class="teal column">Teal</div> |
||||
|
<div class="blue column">Blue</div> |
||||
|
<div class="violet column">Violet</div> |
||||
|
<div class="purple column">Purple</div> |
||||
|
<div class="pink column">Pink</div> |
||||
|
<div class="brown column">Brown</div> |
||||
|
<div class="grey column">Grey</div> |
||||
|
<div class="black column">Black</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,471 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html> |
||||
|
<head> |
||||
|
|
||||
|
<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"> |
||||
|
<title>Theming - Semantic</title> |
||||
|
|
||||
|
<!--- Site CSS --> |
||||
|
<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/grid.css"> |
||||
|
|
||||
|
<!--- Component CSS --> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/icon.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/table.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/button.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/transition.css"> |
||||
|
<link rel="stylesheet" type="text/css" href="../../dist/components/popup.css"> |
||||
|
|
||||
|
<!--- Component JS --> |
||||
|
<script src="../assets/library/jquery.min.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/popup.js"></script> |
||||
|
<script type="text/javascript" src="../../dist/components/transition.js"></script> |
||||
|
|
||||
|
<!--- Show Names --> |
||||
|
<script src="../assets/show-examples.js"></script> |
||||
|
|
||||
|
<!--- Example CSS --> |
||||
|
<style> |
||||
|
.ui.table { |
||||
|
table-layout: fixed; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
<!--- Example Javascript --> |
||||
|
<script> |
||||
|
$(document) |
||||
|
.ready(function() { |
||||
|
}) |
||||
|
; |
||||
|
</script> |
||||
|
</head> |
||||
|
|
||||
|
<body> |
||||
|
|
||||
|
<div class="ui two column relaxed 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> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -1,74 +0,0 @@ |
|||||
/******************************* |
|
||||
Global |
|
||||
*******************************/ |
|
||||
|
|
||||
/*------------------- |
|
||||
Sidebar |
|
||||
--------------------*/ |
|
||||
|
|
||||
#feed .sidebar { |
|
||||
overflow: visible; |
|
||||
} |
|
||||
|
|
||||
/*------------------- |
|
||||
Grid |
|
||||
--------------------*/ |
|
||||
|
|
||||
#feed .pusher, |
|
||||
#feed .grid, |
|
||||
#feed .grid > .column { |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
/*------------------- |
|
||||
Inbox |
|
||||
--------------------*/ |
|
||||
|
|
||||
#feed .pusher { |
|
||||
background-color: #FFFFFF; |
|
||||
} |
|
||||
|
|
||||
#feed .tab .item .description { |
|
||||
margin-left: 2em; |
|
||||
} |
|
||||
|
|
||||
#feed .current { |
|
||||
float: right; |
|
||||
margin: 0.5em 0em 0em 1em; |
|
||||
} |
|
||||
|
|
||||
#feed .left.column { |
|
||||
background-color: #F7F7F7; |
|
||||
padding: 1em 2em; |
|
||||
max-width: 600px; |
|
||||
} |
|
||||
#feed .left.column .menu { |
|
||||
margin-top: 5rem; |
|
||||
} |
|
||||
|
|
||||
#feed .right.column { |
|
||||
padding: 1em 2em; |
|
||||
background-color: #FFFFFF; |
|
||||
} |
|
||||
|
|
||||
#feed .right.column { |
|
||||
font-size: 16px; |
|
||||
max-width: 800px; |
|
||||
} |
|
||||
|
|
||||
/******************************* |
|
||||
Responsive |
|
||||
*******************************/ |
|
||||
|
|
||||
@media only screen and (max-width : 1000px) { |
|
||||
#feed .inbox .date { |
|
||||
float: none; |
|
||||
margin-bottom: 0.5em; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media only screen and (max-width : 1250px) { |
|
||||
#feed .left.column > .menu .item { |
|
||||
font-size: 1rem; |
|
||||
} |
|
||||
} |
|
||||
@ -1,183 +0,0 @@ |
|||||
<!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>Feed Example - Semantic</title> |
|
||||
|
|
||||
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700|Open+Sans:300italic,400,300,700' rel='stylesheet' type='text/css'> |
|
||||
<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="http://cdnjs.cloudflare.com/ajax/libs/jquery.address/1.6/jquery.address.js"></script> |
|
||||
<script src="../dist/semantic.js"></script> |
|
||||
|
|
||||
<link rel="stylesheet" type="text/css" href="feed.css"> |
|
||||
<script src="feed.js"></script> |
|
||||
</head> |
|
||||
<body id="feed"> |
|
||||
<div class="ui large inverted vertical sidebar menu"> |
|
||||
<a class="active item"> |
|
||||
Dogs Weekly <span class="ui label">213</span> |
|
||||
</a> |
|
||||
<a class="item"> |
|
||||
Joystiq <span class="ui label">113</span> |
|
||||
</a> |
|
||||
<div class="item"> |
|
||||
<b>Archived Feeds</b> |
|
||||
<div class="menu"> |
|
||||
<a class="item"> |
|
||||
Engadget <span class="ui label">11</span> |
|
||||
</a> |
|
||||
<a class="item"> |
|
||||
NY Times Tech Blog <span class="ui label">21</span> |
|
||||
</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
<a class="item"> |
|
||||
<i class="bookmark icon"></i> Favorites |
|
||||
</a> |
|
||||
<div class="ui dropdown item"> |
|
||||
<i class="add icon"></i> New |
|
||||
<div class="menu"> |
|
||||
<a class="item"><i class="rss icon"></i> Feed</a> |
|
||||
<a class="item"><i class="tag icon"></i> Tag</a> |
|
||||
<a class="item"><i class="folder icon"></i> Group</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="ui divided two column padded grid"> |
|
||||
<div class="left column"> |
|
||||
<div class="ui left floated launch icon button"> |
|
||||
<i class="sidebar icon"></i> |
|
||||
</div> |
|
||||
<div class="ui right floated launch primary button"> |
|
||||
<i class="mail icon"></i> Compose |
|
||||
</div> |
|
||||
<div class="ui secondary pointing filter menu"> |
|
||||
<a class="active red item" data-tab="unread">Unread</a> |
|
||||
<a class="blue item" data-tab="saved">Saved</a> |
|
||||
<a class="green item" data-tab="all">All</a> |
|
||||
</div> |
|
||||
|
|
||||
<div class="ui active tab" data-tab="unread"> |
|
||||
<div class="ui very relaxed divided link list"> |
|
||||
<a class="item"> |
|
||||
<div class="left floated ui star rating"> |
|
||||
<i class="icon"></i> |
|
||||
</div> |
|
||||
<div class="right floated date">Sep 14, 2013</div> |
|
||||
<div class="description">Scientists discover new breed of dog</div> |
|
||||
</a> |
|
||||
<a class="active item"> |
|
||||
<div class="left floated ui star rating"> |
|
||||
<i class="icon"></i> |
|
||||
</div> |
|
||||
<div class="right floated date">Sep 14, 2013</div> |
|
||||
<div class="description">Weekly Webcomic Wrapup fought the law, and the law won</div> |
|
||||
</a> |
|
||||
<a class="item"> |
|
||||
<div class="left floated ui star rating"> |
|
||||
<i class="icon"></i> |
|
||||
</div> |
|
||||
<div class="right floated date">Sep 10, 2013</div> |
|
||||
<div class="description">Dogs colony in Antarctica</div> |
|
||||
</a> |
|
||||
<a class="item"> |
|
||||
<div class="left floated ui star rating"> |
|
||||
<i class="icon"></i> |
|
||||
</div> |
|
||||
<div class="right floated date">Sep 09, 2013</div> |
|
||||
<div class="description">Famous dog whisperer Chakotay dies today at 104</div> |
|
||||
</a> |
|
||||
<a class="item"> |
|
||||
<div class="left floated ui star rating"> |
|
||||
<i class="icon"></i> |
|
||||
</div> |
|
||||
<div class="right floated date">Sep 07, 2013</div> |
|
||||
<div class="description">Top 10 Things to Know about Labradoodles</div> |
|
||||
</a> |
|
||||
<a class="item"> |
|
||||
<div class="left floated ui star rating"> |
|
||||
<i class="icon"></i> |
|
||||
</div> |
|
||||
<div class="right floated date">Sep 05, 2013</div> |
|
||||
<div class="description">Study shows children enjoy the company of animals</div> |
|
||||
</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="ui tab" data-tab="saved"> |
|
||||
<div class="ui very relaxed divided link list"> |
|
||||
<a class="item"> |
|
||||
<div class="left floated ui star rating"> |
|
||||
<i class="icon"></i> |
|
||||
</div> |
|
||||
<div class="right floated date">Sep 14, 2013</div> |
|
||||
<div class="description">Your favorite saved article</div> |
|
||||
</a> |
|
||||
<a class="item"> |
|
||||
<div class="left floated ui star rating"> |
|
||||
<i class="icon"></i> |
|
||||
</div> |
|
||||
<div class="right floated date">Sep 14, 2013</div> |
|
||||
<div class="description">Your favorite saved article</div> |
|
||||
</a> |
|
||||
<a class="item"> |
|
||||
<div class="left floated ui star rating"> |
|
||||
<i class="icon"></i> |
|
||||
</div> |
|
||||
<div class="right floated date">Sep 14, 2013</div> |
|
||||
<div class="description">Your favorite saved article</div> |
|
||||
</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="ui tab" data-tab="all"> |
|
||||
<div class="ui very relaxed divided link list"> |
|
||||
<a class="item"> |
|
||||
<div class="left floated ui star rating"> |
|
||||
<i class="link icon"></i> |
|
||||
</div> |
|
||||
<div class="right floated date">Sep 14, 2013</div> |
|
||||
<div class="description">There turns out there is only one article under all.</div> |
|
||||
</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="ui divider"></div> |
|
||||
|
|
||||
<div class="current">Showing <b>6</b> of 213</div> |
|
||||
|
|
||||
<div class="ui text menu"> |
|
||||
<a class="icon item"><i class="icon left chevron"></i></a> |
|
||||
<a class="active item">1</a> |
|
||||
<div class="disabled item">...</div> |
|
||||
<a class="item">10</a> |
|
||||
<a class="item">11</a> |
|
||||
<a class="item">12</a> |
|
||||
<a class="icon item"><i class="icon right chevron"></i></a> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="right column"> |
|
||||
<h1 class="ui header">Weekly Webcomic Wrapup fought the law, and the law won</h1> |
|
||||
|
|
||||
<a class="ui label">Unread</a> |
|
||||
<a class="ui label">Comics</a> |
|
||||
|
|
||||
<div class="ui divider"></div> |
|
||||
<p>So there's this video game coming out Tuesday called Grand Theft Auto 5. Don't know if you've heard of it. Anyways, it's all about crime and gangs and some roughneck ne'er-do-wells, so I thought this would be the perfect time to talk about times when we've been... well, less than perfect.</p> |
|
||||
<p>When I was a young'un, I was a frequent visitor to the local swimming pool. I was also a frequent lover of AirHeads candy, which the pool happened to sell. Waiting, watching, stalking the counter like a big cat in the savannah, I waited for the perfect opportunity to strike. While the lifeguards were busy, I snuck through the gate, reached up and took both cherry and "mystery white" AirHeads. I quickly ran out to the sidewalk and reveled in my sweet, delicious victory... for all of ten seconds, before I felt guilty enough to sneak back in and return the .20 worth of candy I had stolen.</p> |
|
||||
<p>While you confess your crimes - hopefully minor, and nothing you can be persecuted for - take a moment to enjoy this week's webcomics, and vote for your favorite after the jump.</p> |
|
||||
<div class="ui divider"></div> |
|
||||
<div class="ui basic button">Save</div> |
|
||||
<div class="ui basic button">Delete</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</body> |
|
||||
|
|
||||
</html> |
|
||||
@ -1,23 +0,0 @@ |
|||||
$(document) |
|
||||
.ready(function() { |
|
||||
|
|
||||
$('.filter.menu .item') |
|
||||
.tab() |
|
||||
; |
|
||||
|
|
||||
$('.ui.rating') |
|
||||
.rating({ |
|
||||
clearable: true |
|
||||
}) |
|
||||
; |
|
||||
|
|
||||
$('.ui.sidebar') |
|
||||
.sidebar('attach events', '.launch.button') |
|
||||
; |
|
||||
|
|
||||
$('.ui.dropdown') |
|
||||
.dropdown() |
|
||||
; |
|
||||
|
|
||||
}) |
|
||||
; |
|
||||
@ -1,103 +0,0 @@ |
|||||
#grid { |
|
||||
background-color: #1B1C1D; |
|
||||
padding: 0em 3em; |
|
||||
} |
|
||||
|
|
||||
#grid h2 { |
|
||||
margin: 2em 0em 1.5em; |
|
||||
} |
|
||||
|
|
||||
/* Shaded */ |
|
||||
#grid .shaded.examples .row { |
|
||||
position: relative; |
|
||||
} |
|
||||
#grid .shaded.examples .grid > .column { |
|
||||
position: relative; |
|
||||
z-index: 11; |
|
||||
} |
|
||||
#grid .shaded.examples .grid .column:not(.row):after { |
|
||||
background-color: #FFFFFF; |
|
||||
box-shadow: 0px 0px 0px 1px #DDD inset; |
|
||||
content: ""; |
|
||||
display: block; |
|
||||
min-height: 3em; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
#grid .divided.examples .grid .column:not(.row):after { |
|
||||
background-color: rgba(255, 255, 255, 0.1); |
|
||||
content: ""; |
|
||||
display: block; |
|
||||
min-height: 3em; |
|
||||
} |
|
||||
|
|
||||
#grid .nested.examples .grid .grid { |
|
||||
box-shadow: 0px 0px 0px 1px #AAA inset; |
|
||||
} |
|
||||
#grid .nested.examples .grid .grid .column:after { |
|
||||
background-color: #FFFFFF; |
|
||||
box-shadow: 0px 0px 0px 1px #DDD inset; |
|
||||
content: ""; |
|
||||
display: block; |
|
||||
min-height: 3em; |
|
||||
} |
|
||||
|
|
||||
#grid .simple.examples .grid .column:not(.row):not(.grid):after { |
|
||||
content: ""; |
|
||||
display: block; |
|
||||
min-height: 50px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
|
|
||||
/* Uncomment to animate examples |
|
||||
#grid .examples { |
|
||||
margin: 0 auto; |
|
||||
-webkit-animation: grid 7s ease infinite; |
|
||||
-moz-animation: grid 7s ease infinite; |
|
||||
animation: grid 7s ease infinite; |
|
||||
} |
|
||||
|
|
||||
@-webkit-keyframes grid { |
|
||||
0% { |
|
||||
width: 100%; |
|
||||
} |
|
||||
45% { |
|
||||
width: 85%; |
|
||||
} |
|
||||
55% { |
|
||||
width: 85%; |
|
||||
} |
|
||||
100% { |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
@-moz-keyframes grid { |
|
||||
0% { |
|
||||
width: 100%; |
|
||||
} |
|
||||
45% { |
|
||||
width: 85%; |
|
||||
} |
|
||||
55% { |
|
||||
width: 85%; |
|
||||
} |
|
||||
100% { |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
@keyframes grid { |
|
||||
0% { |
|
||||
width: 100%; |
|
||||
} |
|
||||
45% { |
|
||||
width: 85%; |
|
||||
} |
|
||||
55% { |
|
||||
width: 85%; |
|
||||
} |
|
||||
100% { |
|
||||
width: 100%; |
|
||||
} |
|
||||
} |
|
||||
*/ |
|
||||
1439
examples/old/grid.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,134 +0,0 @@ |
|||||
/******************************* |
|
||||
Global |
|
||||
*******************************/ |
|
||||
|
|
||||
html { |
|
||||
font-size: 14px; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/******************************* |
|
||||
Global |
|
||||
*******************************/ |
|
||||
|
|
||||
#home .menu .right.menu > .mobile.item { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
/*-------------- |
|
||||
Masthead |
|
||||
---------------*/ |
|
||||
|
|
||||
#home .masthead { |
|
||||
background-image: url(images/bg.jpg); |
|
||||
margin: 0em; |
|
||||
padding: 5rem 0rem; |
|
||||
} |
|
||||
#home .masthead .column { |
|
||||
position: relative; |
|
||||
} |
|
||||
#home .masthead .information { |
|
||||
margin: 10em 1em 1em 350px; |
|
||||
} |
|
||||
#home .masthead .information p { |
|
||||
max-width: 600px; |
|
||||
} |
|
||||
#home .masthead .image { |
|
||||
position: absolute; |
|
||||
left: 0%; |
|
||||
bottom: -110px; |
|
||||
} |
|
||||
|
|
||||
/*-------------- |
|
||||
Ribbons |
|
||||
---------------*/ |
|
||||
|
|
||||
#home .segment h1 { |
|
||||
font-size: 3em; |
|
||||
margin-bottom: 1em; |
|
||||
} |
|
||||
|
|
||||
#home .vertical.segment { |
|
||||
padding: 12rem 0rem; |
|
||||
} |
|
||||
|
|
||||
#home .feature.segment { |
|
||||
margin: 0em; |
|
||||
padding: 6rem 0rem; |
|
||||
} |
|
||||
#home .feature.segment p { |
|
||||
min-height: 50px; |
|
||||
} |
|
||||
|
|
||||
#home .selection.list { |
|
||||
margin: 0em -0.5em; |
|
||||
} |
|
||||
|
|
||||
#home .logo.row { |
|
||||
height: 10rem; |
|
||||
} |
|
||||
|
|
||||
/*-------------- |
|
||||
Footer |
|
||||
---------------*/ |
|
||||
|
|
||||
#home .footer.segment { |
|
||||
background-color: #000000; |
|
||||
padding: 3rem 0rem; |
|
||||
} |
|
||||
|
|
||||
|
|
||||
/******************************* |
|
||||
Responsive |
|
||||
*******************************/ |
|
||||
|
|
||||
/* Mobile Only */ |
|
||||
@media only screen and (max-width : 768px) { |
|
||||
|
|
||||
#home .menu .right.menu > .item { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
#home .menu .right.menu > .mobile.item { |
|
||||
display: block; |
|
||||
} |
|
||||
#home .menu .right.menu > .mobile.item .menu { |
|
||||
left: auto; |
|
||||
right: 0em; |
|
||||
} |
|
||||
|
|
||||
#home h1 { |
|
||||
font-size: 1.5em; |
|
||||
} |
|
||||
#home .masthead.segment .information { |
|
||||
margin-left: 170px; |
|
||||
} |
|
||||
|
|
||||
#home .masthead.segment .image { |
|
||||
width: 170px; |
|
||||
} |
|
||||
|
|
||||
#home .masthead.segment .button { |
|
||||
font-size: 1rem; |
|
||||
} |
|
||||
|
|
||||
#home .overview .divided.grid .header .icon { |
|
||||
font-size: 1.5em; |
|
||||
} |
|
||||
|
|
||||
#home .overview .divided.grid .header + p { |
|
||||
min-height: 0px; |
|
||||
} |
|
||||
|
|
||||
#home .masthead.segment .column { |
|
||||
font-size: 0.7rem; |
|
||||
} |
|
||||
|
|
||||
#home .masthead.segment .column p { |
|
||||
display: none; |
|
||||
} |
|
||||
|
|
||||
#home .selection.list .right.floated { |
|
||||
display: none; |
|
||||
} |
|
||||
} |
|
||||
@ -1,315 +0,0 @@ |
|||||
<!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>Homepage Example - Semantic</title> |
|
||||
|
|
||||
<link rel="stylesheet" type="text/css" href="../dist/semantic.css"> |
|
||||
<link rel="stylesheet" type="text/css" href="homepage.css"> |
|
||||
|
|
||||
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.js"></script> |
|
||||
<script src="../dist/semantic.js"></script> |
|
||||
<script src="homepage.js"></script> |
|
||||
|
|
||||
</head> |
|
||||
<body id="home"> |
|
||||
<div class="ui inverted masthead segment"> |
|
||||
<div class="ui page grid"> |
|
||||
<div class="column"> |
|
||||
<div class="ui inverted blue menu"> |
|
||||
<div class="header item">Cat University</div> |
|
||||
<div class="right menu"> |
|
||||
<div class="ui mobile dropdown link item"> |
|
||||
Menu |
|
||||
<i class="dropdown icon"></i> |
|
||||
<div class="menu"> |
|
||||
<a class="item">Classes</a> |
|
||||
<a class="item">Cocktail Hours</a> |
|
||||
<a class="item">Community</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="ui dropdown link item"> |
|
||||
Courses |
|
||||
<i class="dropdown icon"></i> |
|
||||
<div class="menu"> |
|
||||
<a class="item">Petting</a> |
|
||||
<a class="item">Feeding</a> |
|
||||
<a class="item">Mind Reading</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
<a class="item">Library</a> |
|
||||
<a class="item">Community</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
<img src="images/cat.png" class="ui medium image"> |
|
||||
<div class="ui hidden transition information"> |
|
||||
<h1 class="ui inverted header"> |
|
||||
An Old Cat Can Learn New Tricks |
|
||||
</h1> |
|
||||
<p>At least he won't reach his highest potential unless you enroll him in Cat University's 2013 class.</p> |
|
||||
<div class="large basic inverted animated fade ui button"> |
|
||||
<div class="visible content">Come to ICU 2013</div> |
|
||||
<div class="hidden content">Register Now</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="ui vertical feature segment"> |
|
||||
<div class="ui centered page grid"> |
|
||||
<div class="fourteen wide column"> |
|
||||
<div class="ui three column center aligned stackable divided grid"> |
|
||||
<div class="column"> |
|
||||
<div class="ui icon header"> |
|
||||
<i class="student icon"></i> |
|
||||
Courses |
|
||||
</div> |
|
||||
<p>Take your kitty to a cat-ducation course and learn how to treat her well.</p> |
|
||||
<p> |
|
||||
<a class="ui button" href="#"> |
|
||||
Learn |
|
||||
</a> |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="column"> |
|
||||
<div class="ui icon header"> |
|
||||
<i class="code icon"></i> |
|
||||
Library |
|
||||
</div> |
|
||||
<p>Dig through our cat library to found out amazing things you can do with your kitty.</p> |
|
||||
<p> |
|
||||
<a class="ui blue right labeled icon button" href="#"> |
|
||||
Research |
|
||||
<i class="right chevron icon"></i> |
|
||||
</a> |
|
||||
</p> |
|
||||
</div> |
|
||||
<div class="column"> |
|
||||
<div class="ui icon header"> |
|
||||
<i class="user icon"></i> |
|
||||
Community |
|
||||
</div> |
|
||||
<p>Get feedback on your cat from a community of loving pet owners on our online bulletin board system.</p> |
|
||||
<p> |
|
||||
<a class="ui button" href="#"> |
|
||||
Share |
|
||||
</a> |
|
||||
</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="ui inverted vertical segment"> |
|
||||
<div class="ui very relaxed stackable page grid"> |
|
||||
<div class="row"> |
|
||||
<div class="column"> |
|
||||
<h1 class="center aligned ui inverted header"> |
|
||||
The Best Cat Articles |
|
||||
</h1> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="row"> |
|
||||
<div class="ten wide column"> |
|
||||
<h3 class="ui inverted header">How to Win Your Cats Attention</h3> |
|
||||
<p>Getting your cat to notice you is a large part of being a pet owner. Although I have a lot of patience for writing things about cats, perhaps this might be enough body copy to make this section of text look filled out.</p> |
|
||||
<p>This and other tips can be found in our newsletter, amazing right?</p> |
|
||||
<div class="ui basic inverted animated button button"> |
|
||||
<div class="visible content">Read More</div> |
|
||||
<div class="hidden content"><i class="right arrow icon"></i></div> |
|
||||
</div> |
|
||||
<div class="ui inverted section divider"></div> |
|
||||
<h3 class="ui inverted header">More articles</h3> |
|
||||
<div class="ui inverted animated selection list"> |
|
||||
<div class="item"> |
|
||||
How to win in a fight with a cat |
|
||||
<div class="right floated">Jan 20, 2023</div> |
|
||||
</div> |
|
||||
<div class="item"> |
|
||||
A Supposedly Fun Cat Toy I will Never Buy Again |
|
||||
<div class="right floated">Jan 1, 2023</div> |
|
||||
</div> |
|
||||
<div class="item"> |
|
||||
Much ado about yarn |
|
||||
<div class="right floated">Dec 20, 2022</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="six wide column"> |
|
||||
<div class="ui form segment"> |
|
||||
<h3 class="ui header">Bi-Daily Newsletter</h3> |
|
||||
<p>Sign up and get spammed with cats every day. We have no unsubscribe button!</p> |
|
||||
<div class="field"> |
|
||||
<div class="ui left icon action input"> |
|
||||
<i class="user icon"></i> |
|
||||
<input name="email" type="text" placeholder="name@email.com"> |
|
||||
<div class="ui black submit button">Sign up</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="ui error message"></div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="ui vertical segment"> |
|
||||
<div class="ui stackable center aligned page grid"> |
|
||||
<div class="row"> |
|
||||
<div class="column"> |
|
||||
<h1 class="ui header"> |
|
||||
Many Companies Rely on Our Cat Knowledge |
|
||||
</h1> |
|
||||
<div class="ui horizontal divider"><i class="heart icon"></i></div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="four column logo row"> |
|
||||
<div class="column"> |
|
||||
<div class="ui shape"> |
|
||||
<div class="sides"> |
|
||||
<div class="active side"> |
|
||||
<i class="huge github icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge facebook icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge maxcdn icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge pinterest icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge weibo icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge flickr icon"></i> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="column"> |
|
||||
<div class="ui shape"> |
|
||||
<div class="sides"> |
|
||||
<div class="side"> |
|
||||
<i class="huge github icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge facebook icon"></i> |
|
||||
</div> |
|
||||
<div class="active side"> |
|
||||
<i class="huge maxcdn icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge pinterest icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge weibo icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge flickr icon"></i> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="column"> |
|
||||
<div class="ui shape"> |
|
||||
<div class="sides"> |
|
||||
<div class="side"> |
|
||||
<i class="huge github icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge facebook icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge maxcdn icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge pinterest icon"></i> |
|
||||
</div> |
|
||||
<div class="active side"> |
|
||||
<i class="huge weibo icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge flickr icon"></i> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="column"> |
|
||||
<div class="ui shape"> |
|
||||
<div class="sides"> |
|
||||
<div class="side"> |
|
||||
<i class="huge github icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge facebook icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge maxcdn icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge pinterest icon"></i> |
|
||||
</div> |
|
||||
<div class="side"> |
|
||||
<i class="huge weibo icon"></i> |
|
||||
</div> |
|
||||
<div class="active side"> |
|
||||
<i class="huge flickr icon"></i> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<div class="ui inverted footer vertical segment"> |
|
||||
<div class="ui stackable center aligned page grid"> |
|
||||
<div class="ten wide column"> |
|
||||
<div class="ui three column center aligned stackable grid"> |
|
||||
<div class="column"> |
|
||||
<h5 class="ui inverted header">Courses</h5> |
|
||||
<div class="ui inverted link list"> |
|
||||
<a class="item">Registration</a> |
|
||||
<a class="item">Course Calendar</a> |
|
||||
<a class="item">Professors</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="column"> |
|
||||
<h5 class="ui inverted header">Library</h5> |
|
||||
<div class="ui inverted link list"> |
|
||||
<a class="item">A-Z</a> |
|
||||
<a class="item">Most Popular</a> |
|
||||
<a class="item">Recently Changed</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="column"> |
|
||||
<h5 class="ui inverted header">Community</h5> |
|
||||
<div class="ui inverted link list"> |
|
||||
<a class="item">BBS</a> |
|
||||
<a class="item">Careers</a> |
|
||||
<a class="item">Privacy Policy</a> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div class="six wide column"> |
|
||||
<h5 class="ui inverted header">Contact Us</h5> |
|
||||
<addr> |
|
||||
237 Catberry Road <br> |
|
||||
Milton Keynes, London <br> |
|
||||
</addr> |
|
||||
<p>(404) 867-5309</p> |
|
||||
</div> |
|
||||
</div> |
|
||||
</div> |
|
||||
</body> |
|
||||
|
|
||||
</html> |
|
||||
@ -1,57 +0,0 @@ |
|||||
$(document) |
|
||||
.ready(function() { |
|
||||
|
|
||||
var |
|
||||
changeSides = function() { |
|
||||
$('.ui.shape') |
|
||||
.eq(0) |
|
||||
.shape('flip over') |
|
||||
.end() |
|
||||
.eq(1) |
|
||||
.shape('flip over') |
|
||||
.end() |
|
||||
.eq(2) |
|
||||
.shape('flip back') |
|
||||
.end() |
|
||||
.eq(3) |
|
||||
.shape('flip back') |
|
||||
.end() |
|
||||
; |
|
||||
}, |
|
||||
validationRules = { |
|
||||
firstName: { |
|
||||
identifier : 'email', |
|
||||
rules: [ |
|
||||
{ |
|
||||
type : 'empty', |
|
||||
prompt : 'Please enter an e-mail' |
|
||||
}, |
|
||||
{ |
|
||||
type : 'email', |
|
||||
prompt : 'Please enter a valid e-mail' |
|
||||
} |
|
||||
] |
|
||||
} |
|
||||
} |
|
||||
; |
|
||||
|
|
||||
$('.ui.dropdown') |
|
||||
.dropdown({ |
|
||||
on: 'hover' |
|
||||
}) |
|
||||
; |
|
||||
|
|
||||
$('.ui.form') |
|
||||
.form(validationRules, { |
|
||||
on: 'blur' |
|
||||
}) |
|
||||
; |
|
||||
|
|
||||
$('.masthead .information') |
|
||||
.transition('scale in', 1000) |
|
||||
; |
|
||||
|
|
||||
setInterval(changeSides, 3000); |
|
||||
|
|
||||
}) |
|
||||
; |
|
||||
@ -1,49 +0,0 @@ |
|||||
/******************************* |
|
||||
Global |
|
||||
*******************************/ |
|
||||
|
|
||||
/*-------------- |
|
||||
Demo |
|
||||
---------------*/ |
|
||||
|
|
||||
#sink { |
|
||||
background-color: #FFFFFF; |
|
||||
} |
|
||||
|
|
||||
#sink .demo.container { |
|
||||
width: 700px; |
|
||||
margin: 0px auto; |
|
||||
} |
|
||||
|
|
||||
#sink .demo.container .example { |
|
||||
padding: 2em 0em; |
|
||||
margin: 2em 0em; |
|
||||
border-top: 1px solid #DDD; |
|
||||
} |
|
||||
|
|
||||
#sink .demo h4:first-child { |
|
||||
font-size: 1.5em; |
|
||||
margin: 2em 0em 1em; |
|
||||
} |
|
||||
#sink .demo.container .button.demo > .buttons, |
|
||||
#sink .demo.container .button.demo > .button, |
|
||||
#sink .demo.container .button.demo > .segment > .button { |
|
||||
margin-bottom: 0.5em; |
|
||||
} |
|
||||
#sink .demo.container h4:first-child { |
|
||||
font-weight: bold !important; |
|
||||
margin: 0em 0em 1em !important; |
|
||||
} |
|
||||
#sink .demo.container .example:first-child { |
|
||||
margin-top: 0; |
|
||||
padding-top: 0; |
|
||||
} |
|
||||
#sink .demo.container .segment.example { |
|
||||
z-index: 1; |
|
||||
} |
|
||||
#sink .demo.container .ui.label:not(.empty) { |
|
||||
margin-bottom: 1em; |
|
||||
} |
|
||||
#sink .demo.container .segment .ui.label { |
|
||||
margin-bottom: 0em; |
|
||||
} |
|
||||
5454
examples/old/kitchensink.html
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save