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.
|
|
<!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> </h4> </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> </h4> </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> </h4> </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> </h4> </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>
|
