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

#2467 - Add examples for many responsive element patterns

flex-list
jlukic 10 years ago
parent
8f3adb47bf
commit
07026da5dc
1 changed files with 686 additions and 0 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 686
      examples/responsive.html

686
examples/responsive.html
View File

@ -0,0 +1,686 @@
<!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>Responsive Elements - Semantic</title>
<link rel="stylesheet" type="text/css" href="../dist/semantic.css">
<script src="assets/library/jquery.min.js"></script>
<script src="../dist/semantic.js"></script>
</head>
<body>
<h1 class="ui center aligned header">Responsive UI Examples</h1>
<h2 class="ui center aligned header">Basic Responsive</h2>
<h3 class="ui center aligned header">Container</h3>
<div class="ui container">
<div class="ui segments">
<div class="ui segment">Content</div>
<div class="ui segment">Content</div>
<div class="ui segment">Content</div>
<div class="ui segment">Content</div>
</div>
</div>
<h3 class="ui center aligned header">Text Container</h3>
<div class="ui text container">
<div class="ui segments">
<div class="ui segment">Content</div>
<div class="ui segment">Content</div>
<div class="ui segment">Content</div>
<div class="ui segment">Content</div>
</div>
</div>
<h3 class="ui center aligned header">Stackable Grid</h3>
<div class="ui two column stackable grid">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<h3 class="ui center aligned header">Doubling Grid</h3>
<div class="ui three column doubling grid">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<h3 class="ui center aligned header">Doubling Stackable Grid</h3>
<div class="ui three column doubling stackable grid">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<h3 class="ui center aligned header">Nested Stackable Grid</h3>
<div class="ui two column grid">
<div class="column">
<div class="ui stackable doubling two column grid">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
</div>
<div class="column">
<div class="ui stackable doubling three column grid">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
</div>
</div>
<h3 class="ui center aligned header">Stackable Grid Container</h3>
<div class="ui two column stackable grid container">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<h3 class="ui center aligned header">Doubling Grid Container</h3>
<div class="ui three column doubling grid container">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<h3 class="ui center aligned header">Doubling Stackable Grid Container</h3>
<div class="ui three column doubling stackable grid container">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<h2 class="ui center aligned header">Device Adjustment</h2>
<h3 class="ui center aligned header">Device Column Width</h3>
<div class="ui grid">
<div class="three wide computer nine wide tablet six wide mobile column">
<div class="ui segment">Content</div>
</div>
<div class="four wide column">
<div class="ui segment">Content</div>
</div>
<div class="nine wide computer three wide tablet six wide mobile column">
<div class="ui segment">Content</div>
</div>
<div class="nine wide computer three wide tablet six wide mobile column">
<div class="ui segment">Content</div>
</div>
<div class="four wide column">
<div class="ui segment">Content</div>
</div>
<div class="three wide computer nine wide tablet six wide mobile column">
<div class="ui segment">Content</div>
</div>
</div>
<h3 class="ui center aligned header">Device Visibility</h3>
<div class="ui four column grid">
<div class="widescreen only ten wide column">
<div class="ui segment">Widescreen</div>
</div>
<div class="widescreen only six wide column">
<div class="ui segment">Widescreen</div>
</div>
<div class="large screen only six wide column">
<div class="ui segment">Large Screen</div>
</div>
<div class="large screen only ten wide column">
<div class="ui segment">Large Screen</div>
</div>
<div class="tablet only mobile only eight wide column">
<div class="ui segment">Tablet and Mobile</div>
</div>
<div class="tablet only mobile only eight wide column">
<div class="ui segment">Tablet and Mobile</div>
</div>
<div class="mobile only sixteen wide column">
<div class="ui segment">Mobile</div>
</div>
<div class="computer only two column row">
<div class="column">
<div class="ui segment">Computer and Up</div>
</div>
<div class="column">
<div class="ui segment">Computer and Up</div>
</div>
</div>
<div class="tablet only column">
<div class="ui segment">Tablet Only Content</div>
</div>
<div class="tablet only column">
<div class="ui segment">Tablet Only Content</div>
</div>
<div class="tablet only column">
<div class="ui segment">Tablet Only Content</div>
</div>
<div class="tablet only column">
<div class="ui segment">Tablet Only Content</div>
</div>
</div>
<h2 class="ui center aligned header">Responsive Grid with Variations</h2>
<h3 class="ui center aligned header">Stackable Divided Grid</h3>
<div class="ui stackable two column divided grid container">
<div class="row">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
</div>
<h3 class="ui center aligned header">Stackable Vertically Divided Grid</h3>
<div class="ui stackable two column vertically divided grid container">
<div class="row">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
</div>
<h3 class="ui center aligned header">Celled Doubling Stackable Grid</h3>
<div class="doubling stackable celled ui grid container">
<div class="two column row">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<div class="three column row">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<div class="two column row">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
</div>
<h3 class="ui center aligned header">Consecutive Doubling Stackable Grid</h3>
<div class="doubling stackable three column ui grid container">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<div class="doubling stackable three column ui grid container">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<h3 class="ui center aligned header">Grid Container</h3>
<div class="ui three column grid container">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<h1 class="ui center aligned header">Responsive Elements</h1>
<h3 class="ui center aligned header">Responsive Vertical Divider</h3>
<div class="ui stackable two column very relaxed grid container" style="position:relative;">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="ui vertical divider">
Or
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<h3 class="ui center aligned header">Responsive Table</h3>
<div class="ui container">
<table class="ui celled table">
<thead>
<th>Employee</th>
<th>Correct Guesses</th>
</thead>
<tbody>
<tr>
<td>
<h4 class="ui image header">
<img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
<div class="content">
Lena
<div class="sub header">Human Resources
</div>
</div>
</td>
<td>
22
</td>
</tr>
<tr>
<td>
<h4 class="ui image header">
<img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
<div class="content">
Matthew
<div class="sub header">Fabric Design
</div>
</div>
</td>
<td>
15
</td>
</tr>
<tr>
<td>
<h4 class="ui image header">
<img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
<div class="content">
Lindsay
<div class="sub header">Entertainment
</div>
</div>
</td>
<td>
12
</td>
</tr>
<tr>
<td>
<h4 class="ui image header">
<img src="assets/images/wireframe/square-image.png" class="ui mini rounded image">
<div class="content">
Mark
<div class="sub header">Executive
</div>
</div>
</td>
<td>
11
</td>
</tr>
</tbody>
</table>
</div>
<h3 class="ui center aligned header">Responsive Menu</h3>
<div class="ui stackable container menu">
<div class="item">
<img src="assets/images/logo.png">
</div>
<a class="item">Features</a>
<a class="item">Testimonials</a>
<a class="item">Sign-in</a>
</div>
<h3 class="ui center aligned header">Responsive Item</h3>
<div class="ui container">
<div class="ui relaxed divided items">
<div class="item">
<div class="ui small image">
<img src="assets/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Content Header</a>
<div class="meta">
<a>Date</a>
<a>Category</a>
</div>
<div class="description">
A description which may flow for several lines and give context to the content.
</div>
<div class="extra">
<img src="assets/images/wireframe/square-image.png" class="ui circular avatar image"> Username
</div>
</div>
</div>
<div class="item">
<div class="ui small image">
<img src="assets/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Content Header</a>
<div class="meta">
<a>Date</a>
<a>Category</a>
</div>
<div class="description">
A description which may flow for several lines and give context to the content.
</div>
<div class="extra">
<div class="ui right floated primary button">
Primary
<i class="right chevron icon"></i>
</div>
<div class="ui label">Limited</div>
</div>
</div>
</div>
<div class="item">
<div class="ui small image">
<img src="assets/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Content Header</a>
<div class="meta">
<a>Date</a>
<a>Category</a>
</div>
<div class="description">
A description which may flow for several lines and give context to the content.
</div>
<div class="extra">
<div class="ui right floated primary button">
Primary
<i class="right chevron icon"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 class="ui center aligned header">Responsive Steps</h3>
<div class="ui last container">
<div class="ui steps">
<div class="step">
<i class="truck icon"></i>
<div class="content">
<div class="title">Shipping</div>
<div class="description">Choose your shipping options</div>
</div>
</div>
<div class="active step">
<i class="payment icon"></i>
<div class="content">
<div class="title">Billing</div>
<div class="description">Enter billing information</div>
</div>
</div>
<div class="disabled step">
<i class="info icon"></i>
<div class="content">
<div class="title">Confirm Order</div>
</div>
</div>
</div>
</div>
<!-- Content JS HERE !-->
<style>
.last.container {
margin-bottom: 300px !important;
}
h1.ui.center.header {
margin-top: 3em;
}
h2.ui.center.header {
margin: 4em 0em 2em;
}
h3.ui.center.header {
margin-top: 2em;
padding: 2em 0em;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
var
$headers = $('body > h3'),
$header = $headers.first(),
ignoreScroll = false,
timer
;
// Preserve example in viewport when resizing browser
$(window)
.on('resize', function() {
// ignore callbacks from scroll change
clearTimeout(timer);
$headers.visibility('disable callbacks');
// preserve position
$(document).scrollTop( $header.offset().top );
// allow callbacks in 500ms
timer = setTimeout(function() {
$headers.visibility('enable callbacks');
}, 500);
})
;
$headers
.visibility({
// fire once each time passed
once: false,
// dont refresh position on resize
checkOnRefresh: true,
// lock to this element on resize
onTopPassed: function() {
$header = $(this);
},
onTopPassedReverse: function() {
$header = $(this);
}
})
;
});
</script>
</body>
</htmL.
Write Preview
Loading…
Cancel
Save