library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2025-01-13 02:04:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add responsive grid manual test

Browse Source
This commit is contained in:
Tilo Mitra 2014-02-28 12:57:27 -05:00
parent cf34ac3ed6
commit 3bbbf47ccd
1 changed files with 69 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/grids/tests/manual/responsive.html
View File

@ -6,6 +6,7 @@
<link rel="stylesheet" href="../../../../build/base.css"> <link rel="stylesheet" href="../../../../build/base.css">
<link rel="stylesheet" href="../../../../build/grids.css"> <link rel="stylesheet" href="../../../../build/grids.css">
<link rel="stylesheet" href="../../../../build/grids-responsive.css">
<style> <style>
.content { .content {
@ -370,5 +371,73 @@
<div class="content">Wrapping 1/3</div> <div class="content">Wrapping 1/3</div>
</div> </div>
</div> </div>
<h2>Responsive Grids</h2>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
<div class="content">1 -> 1/2 -> 1/4</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
<div class="content">1 -> 1/2 -> 1/4</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
<div class="content">1 -> 1/2 -> 1/4</div>
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
<div class="content">1 -> 1/2 -> 1/4</div>
</div>
</div>
<h2>Nested Responsive Grids</h2>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-2">
<div class="content">
<div class="pure-g">
<div class="pure-u-1 pure-u-lg-1-2">
<div class="content">1 -> 1/2</div>
</div>
<div class="pure-u-1 pure-u-lg-1-2">
<div class="content">1 -> 1/2</div>
</div>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-2">
<div class="content">
<div class="pure-g">
<div class="pure-u-1-4 pure-u-lg-1-8">
<div class="content">1/4 -> 1/8</div>
</div>
<div class="pure-u-1-4 pure-u-lg-1-8">
<div class="content">1/4 -> 1/8</div>
</div>
<div class="pure-u-1-4 pure-u-lg-3-8">
<div class="content">1/4 -> 3/8</div>
</div>
<div class="pure-u-1-4 pure-u-lg-3-8">
<div class="content">1/4 -> 3/8</div>
</div>
</div>
</div>
</div>
</div>
<h2><code>.pure-img</code> Images</h2>
<div class="pure-g">
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
<img class="pure-img" src="http://placehold.it/350x200">
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
<img class="pure-img" src="http://placehold.it/350x200">
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
<img class="pure-img" src="http://placehold.it/350x200">
</div>
<div class="pure-u-1 pure-u-sm-1-2 pure-u-lg-1-4">
<img class="pure-img" src="http://placehold.it/350x200">
</div>
</div>
</body> </body>
</html> </html>