richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Add back in examples

pull/1191/head
jlukic 10 years ago
parent
74fa4e6cdd
commit
77e0f83481
12 changed files with 42832 additions and 2183 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27568
      dist/semantic.css
  2. 16640
      dist/semantic.js
  3. 2
      dist/semantic.min.css
  4. 8
      dist/semantic.min.js
  5. 100
      examples/feed.css
  6. 174
      examples/feed.html
  7. 23
      examples/feed.js
  8. 128
      examples/homepage.css
  9. 315
      examples/homepage.html
  10. 57
      examples/homepage.js
  11. BIN
      examples/images/bg.jpg
  12. BIN
      examples/images/cat.png

27568
dist/semantic.css
File diff suppressed because it is too large
View File

16640
dist/semantic.js
File diff suppressed because it is too large
View File

2
dist/semantic.min.css
File diff suppressed because it is too large
View File

8
dist/semantic.min.js
File diff suppressed because it is too large
View File

100
examples/feed.css
View File

@ -0,0 +1,100 @@
/*******************************
Global
*******************************/
html,
body {
font-size: 15px;
height: 100%;
}
body {
font-family: "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
background: #FFFFFF;
margin: 0px;
padding: 0px;
color: #555555;
text-rendering: optimizeLegibility;
min-width: 320px;
}
.ui.header {
font-family: 'Source Sans Pro', "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
/*******************************
Global
*******************************/
/*-------------------
Sidebar
--------------------*/
#feed .sidebar {
overflow: visible;
}
/*-------------------
Grid
--------------------*/
#feed .grid {
height: 100%;
}
#feed > .grid > .column {
height: 100%;
}
/*-------------------
Inbox
--------------------*/
#feed .page {
background-color: #FFFFFF;
padding: 2em 0em;
}
#feed .inbox.tab .item .rating {
margin-top: 0.2rem;
}
#feed .inbox.tab .item .description {
margin-left: 2em;
}
#feed .current {
float: right;
margin: 0.5em 0em 0em 1em;
}
#feed .middle.column {
padding: 1em 2em;
}
#feed .middle.column h2 {
margin-top: 0em;
}
#feed .right.column {
padding: 1em 2em;
background-color: #FFFFFF;
}
/*******************************
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;
}
}

174
examples/feed.html
View File

@ -0,0 +1,174 @@
<!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 grid">
<div class="seven wide middle column">
<div class="ui right floated black launch button">
<i class="list layout icon"></i> Menu
</div>
<h2 class="ui header">
<i class="inbox icon"></i>
Inbox
</h2>
<div class="ui tabular filter menu">
<a class="active item" data-tab="unread">Unread</a>
<a class="item" data-tab="saved">Saved</a>
<a class="item" data-tab="all">All</a>
</div>
<div class="ui divided inbox selection list active tab" data-tab="unread">
<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 14, 2013</div>
<div class="description">Scientists discover new breed of dog</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 class="ui divided inbox selection list tab" data-tab="saved">
<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 class="ui divided inbox selection list tab" data-tab="all">
<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 class="ui divider"></div>
<div class="current">Showing <b>6</b> of 213</div>
<div class="ui pagination menu">
<a class="icon item"><i class="icon left arrow"></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 arrow"></i></a>
</div>
</div>
<div class="nine wide 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>

23
examples/feed.js
View File

@ -0,0 +1,23 @@
$(document)
.ready(function() {
$('.filter.menu .item')
.tab()
;
$('.ui.rating')
.rating({
clearable: true
})
;
$('.ui.sidebar')
.sidebar('attach events', '.launch.button')
;
$('.ui.dropdown')
.dropdown()
;
})
;

128
examples/homepage.css
View File

@ -0,0 +1,128 @@
/*******************************
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 .vertical.segment {
padding: 6rem 0rem;
}
#home .feature.segment {
padding: 2rem 0rem;
}
#home .feature.segment p {
min-height: 50px;
}
#home .selection.list {
margin: 0em -0.5em;
}
#home .logo.row {
height: 10rem;
}
/*--------------
Footer
---------------*/
#home .footer {
background-color: #000000;
}
/*******************************
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 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;
}
}
@media only screen and (max-width : 1000px) {
}

315
examples/homepage.html
View File

@ -0,0 +1,315 @@
<!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="../packaged/definitions/javascript/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">Get Our Amazing Newsletter Bi-Daily</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 page grid">
<div class="ten wide column">
<div class="ui three column 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>

57
examples/homepage.js
View File

@ -0,0 +1,57 @@
$(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);
})
;

BIN
examples/images/bg.jpg
View File

Before After
Width: 2248  |  Height: 1420  |  Size: 46 KiB

BIN
examples/images/cat.png
View File

Before After
Width: 500  |  Height: 574  |  Size: 107 KiB
Write Preview
Loading…
Cancel
Save