You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
689 lines
18 KiB
689 lines
18 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Standard Meta -->
|
|
<meta charset="utf-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
|
|
<!-- Site Properties -->
|
|
<title>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="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="ten wide column">
|
|
<div class="ui segment">Content</div>
|
|
</div>
|
|
<div class="six wide 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 Stackable Grid</h3>
|
|
<div class="ui stackable celled 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 three steps">
|
|
<div class="step">
|
|
<div class="content">
|
|
<div class="title">Shipping</div>
|
|
<div class="description">Choose your shipping options</div>
|
|
</div>
|
|
</div>
|
|
<div class="active step">
|
|
<div class="content">
|
|
<div class="title">Billing</div>
|
|
<div class="description">Enter billing information</div>
|
|
</div>
|
|
</div>
|
|
<div class="disabled step">
|
|
<div class="content">
|
|
<div class="title">Confirm Order</div>
|
|
<div class="description">Review your order details</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,
|
|
|
|
// don't refresh position on resize
|
|
checkOnRefresh: true,
|
|
|
|
// lock to this element on resize
|
|
onTopPassed: function() {
|
|
$header = $(this);
|
|
},
|
|
onTopPassedReverse: function() {
|
|
$header = $(this);
|
|
}
|
|
})
|
|
;
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|