Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
883 lines (883 sloc) 22.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>Unsemantic CSS Framework</title>
<!--[if lt IE 9]>
<script src="./assets/javascripts/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="./assets/stylesheets/demo.css" />
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-base.css" />
<noscript>
<link rel="stylesheet" href="./assets/stylesheets/unsemantic-grid-mobile.css" />
</noscript>
<script>
var ADAPT_CONFIG = {
path: './assets/stylesheets/',
dynamic: true,
range: [
'0 to 767px = unsemantic-grid-mobile.css',
'767px = unsemantic-grid-desktop.css'
]
};
</script>
<script src="./assets/javascripts/adapt.min.js"></script>
</head>
<body>
<div class="grid-container">
<div class="grid-100 mobile-grid-100">
<h1 class="grid-100">
<a href="http://unsemantic.com/">Unsemantic</a>
<br />
Adapt.js Demo
</h1>
<hr />
</div>
<div class="grid-100 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
100%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-95 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
95%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-5 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
5%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-90 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
90%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-85 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
85%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-15 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
15%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-80 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
80%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-20 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
20%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-75 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
75%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-25 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-70 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
70%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-30 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
30%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-65 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
65%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-35 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
35%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-60 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
60%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-40 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
40%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-55 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
55%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-45 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
45%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-50 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
50%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-50 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
50%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-33 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
33%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-33 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
33%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-33 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
33%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-66 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
66%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-33 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
33%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<hr />
<div class="grid-100 align-center">
<h3>
Prefix &amp; Suffix
</h3>
</div>
<div class="grid-10 suffix-90 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 prefix-10 suffix-80 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 prefix-20 suffix-70 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 prefix-30 suffix-60 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 prefix-40 suffix-50 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 prefix-50 suffix-40 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 prefix-60 suffix-30 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 prefix-70 suffix-20 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 prefix-80 suffix-10 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 prefix-90 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<hr />
<div class="grid-100 align-center">
<h3>
Push &amp; Pull (for SEO)
</h3>
<p>
Green = push. Pink = pull.
</p>
</div>
<div class="grid-10 push-90 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 push-30 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 pull-30 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-10 pull-90 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
10%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-20 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
20%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-20 push-60 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
20%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-20 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
20%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-20 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
20%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-20 pull-60 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
20%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-25 push-50 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-25 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-25 pull-50 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-25 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-66 push-33 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
66%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-33 pull-66 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
33%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-33 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
33%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-33 push-33 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
33%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-33 pull-33 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
33%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<hr />
<div class="grid-100 align-center">
<h3>
Nested Columns
</h3>
</div>
<div class="grid-50 grid-parent">
<p class="grid-100 align-center">
<b>
Parent Column
</b>
</p>
<div class="grid-50 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
50%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-50 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
50%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
</div>
<div class="grid-50 grid-parent">
<p class="grid-100 align-center">
<b>
Parent Column
</b>
</p>
<div class="grid-50 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
50%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-50 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
50%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
</div>
<div class="grid-50 grid-parent">
<p class="grid-100 align-center">
<b>
Parent Column
</b>
</p>
<div class="grid-25 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-25 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-25 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-25 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
</div>
<div class="grid-50 grid-parent">
<p class="grid-100 align-center">
<b>
Parent Column
</b>
</p>
<div class="grid-25 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-25 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-25 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
<div class="grid-25 mobile-grid-50">
<section class="example-block">
<b class="hide-on-mobile">
25%
</b>
<b class="hide-on-desktop">
50%
</b>
<span class="dynamic-px-width"></span>
</section>
</div>
</div>
</div>
<script src="./assets/javascripts/jquery.js"></script>
<script src="./assets/javascripts/demo.js"></script>
</body>
</html>