Mirrors
/
Vestride_Shuffle
mirror of https://github.com/Vestride/Shuffle.git
2
0
Fork 0
Code Issues Releases Wiki Activity

Adding shapes demo

Browse Source
pull/56/head
Glen Cheney 11 years ago
parent 7a962634d0
commit c1da3b374d
8 changed files with 285 additions and 716 deletions
Show Stats Download Patch File Download Diff File

18
_config.yml
Unescape Escape View File

@ -25,6 +25,24 @@ demos:
label: Responsive?
screenshot: responsive.webp
shapes:
- shape: circle
color: blue
- shape: diamond
color: red
- shape: triangle
color: green
- shape: triangle
color: orange
- shape: square
color: red
- shape: diamond
color: green
- shape: circle
color: red
- shape: square
color: green
items:
- groups: [ photography ]
date: 2010-09-14

438
_posts/demos/2013-05-02-adaptive.html
Unescape Escape View File

@ -1,404 +1,72 @@
---
layout: default
title: Shuffle Adaptive Demo
bodyClass: masonry
bodyClass: null
extraJS: [ "gallery.js" ]
extraCSS: [ "http://twitter.github.io/bootstrap/assets/css/bootstrap.css", "http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css", "/css/gallery.css" ]
extraCSS: [ "/css/gallery.css" ]
---
<section class="gallery container">
<div class="hero">
<img src="http://placekitten.com/1170/400" alt="">
<div class="ghost-center-wrap full">
<div class="hero-text ghost-center">
<div>Example</div>
<h1>Responsive bootstrap</h1>
<h2>With compounded filters</h2>
</div>
</div>
</div>
<h2>Filters</h2>
<div class="product-filter">
<div class="filter-options row">
<section class="container">
<div class="row">
<h2 class="span12">Adaptive Layout with Compound Filters</h2>
</div>
</section>
<ul class="span6 unstyled megapixels">
<li data-megapixels="14-16" class="btn">14-16MP</li>
<li data-megapixels="16-18" class="btn">16-18MP</li>
<li data-megapixels="18-20" class="btn">18-20MP</li>
<li data-megapixels="20+" class="btn">20MP+</li>
</ul>
<section class="gallery container">
<ul class="span6 unstyled features">
<li>
<label><input type="checkbox" value="lcd"> LCD</label>
</li>
<li>
<label><input type="checkbox" value="touchscreen"> Touchscreen LCD</label>
</li>
<li>
<label><input type="checkbox" value="panorama"> Intelligent Sweep Panorama</label>
</li>
<li>
<label><input type="checkbox" value="lightweight"> Lightweight</label>
</li>
</ul>
<div class="filter-options row">
</div>
<div class="span6">
<div class="filter-group filter--colors js-colors">
<button data-filter-value="green"><span class="visuallyhidden">Green</span></button>
<button data-filter-value="blue"><span class="visuallyhidden">Blue</span></button>
<button data-filter-value="red"><span class="visuallyhidden">Red</span></button>
<button data-filter-value="orange"><span class="visuallyhidden">Orange</span></button>
</div>
</div>
<div class="products">
<div class="span6 h2 product box" data-groups='["lcd", "lightweight"]' data-megapixels="20+" data-price="649">
<div class="product-img">
<img src="/img/baseball.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (41)</div>
<div class="product-meta">
<ul>
<li>20.2 <span class="product-meta-name">megapixels</span></li>
<li>3" <span class="product-meta-name">lcd</span></li>
<li>Explore <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$649.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span6 product link box" data-groups='["lcd", "touchscreen", "panorama", "lightweight"]' data-megapixels="16-18" data-price="1199">
<p>Massive Sensor Loruem Ipsum</p>
<a href="#" class="btn">Explore Sensor</a>
</div>
<div class="span3 product box" data-groups='["panorama", "lightweight"]' data-megapixels="16-18" data-price="329">
<div class="product-img">
<img src="/img/pumpkin.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$329.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "lightweight"]' data-megapixels="18-20" data-price="369">
<div class="product-img">
<img src="/img/tennis-ball.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (41)</div>
<div class="product-meta">
<ul>
<li>20.2 <span class="product-meta-name">megapixels</span></li>
<li>3" <span class="product-meta-name">lcd</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$649.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="18-20" data-price="269">
<div class="product-img">
<img src="/img/imac.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (6)</div>
<div class="product-meta">
<ul>
<li>16.1 <span class="product-meta-name">megapixels</span></li>
<li>5x <span class="product-meta-name">optical zoom</span></li>
<li>720p <span class="product-meta-name">hd video</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$1199.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "panorama"]' data-megapixels="14-16" data-price="109">
<div class="product-img">
<img src="/img/master-chief.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$329.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span6 h2 product box" data-groups='["lcd", "panorama", "lightweight"]' data-megapixels="18-20" data-price="479">
<div class="product-img">
<img src="/img/es-blue.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (41)</div>
<div class="product-meta">
<ul>
<li>20.2 <span class="product-meta-name">megapixels</span></li>
<li>3" <span class="product-meta-name">lcd</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$649.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen", "lightweight"]' data-megapixels="18-20" data-price="209">
<div class="product-img">
<img src="/img/vestride-red.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (6)</div>
<div class="product-meta">
<ul>
<li>16.1 <span class="product-meta-name">megapixels</span></li>
<li>5x <span class="product-meta-name">optical zoom</span></li>
<li>720p <span class="product-meta-name">hd video</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$1199.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["touchscreen", "panorama", "lightweight"]' data-megapixels="20+" data-price="2799">
<div class="product-img">
<img src="/img/newegg.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$329.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span6 link product box" data-groups='["panorama", "lightweight"]' data-megapixels="20+" data-price="329">
<p>Great Summer Travel Loruem Ipsum</p>
<a href="#" class="btn">Products for Summer Vacation</a>
</div>
<div class="span3 product box" data-groups='["lightweight"]' data-megapixels="14-16" data-price="199">
<div class="product-img">
<img src="/img/eightfoldarc.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (6)</div>
<div class="product-meta">
<ul>
<li>16.1 <span class="product-meta-name">megapixels</span></li>
<li>5x <span class="product-meta-name">optical zoom</span></li>
<li>720p <span class="product-meta-name">hd video</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$1199.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["panorama"]' data-megapixels="14-16" data-price="149">
<div class="product-img">
<img src="/img/ground.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$149.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd"]' data-megapixels="16-18" data-price="789">
<div class="product-img">
<img src="/img/grassy-hills.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$789.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="16-18" data-price="529">
<div class="product-img">
<img src="/img/tennis-ball.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$529.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
<div class="span6">
<ul class="filter-group unstyled filter--shapes js-shapes">
<li>
<input type="checkbox" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
</li>
<li>
<input type="checkbox" value="diamond" id="cb-diamond"> <label for="cb-diamond">Diamond</label>
</li>
<li>
<input type="checkbox" value="square" id="cb-square"> <label for="cb-square">Square</label>
</li>
<li>
<input type="checkbox" value="triangle" id="cb-triangle"> <label for="cb-triangle">Triangle</label>
</li>
</ul>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="18-20" data-price="999">
<div class="product-img">
<img src="/img/pumpkin.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$529.99</b> <span class="muted">MSRP</span>
</div>
</div>
</div>
</div>
<div class="span3 product box" data-groups='["lcd", "touchscreen"]' data-megapixels="20+" data-price="1599">
<div class="product-img">
<img src="/img/imac.png" alt="" />
</div>
<div class="product-content">
<div class="product-model">ASDF-1</div>
<div class="product-name">Camera JKLP</div>
<div class="product-rating">***** (10)</div>
<div class="product-meta">
<ul>
<li>16.2 <span class="product-meta-name">megapixels</span></li>
<li>Waterproof <span class="product-meta-name">body</span></li>
<li>Cool <span class="product-meta-name">sensor</span></li>
</ul>
</div>
<div class="product-price">
<span class="muted">Starting at</span>
<br>
<b>$529.99</b> <span class="muted">MSRP</span>
</div>
</div>
<div class="shape-up js-shuffle">
{% for shape in site.shapes %}
<div class="span3 shape shape--{{ shape.shape }} shape--{{ shape.color }}" data-shape="{{ shape.shape }}" data-color="{{ shape.color }}">
<div class="keep-ratio">
<div class="shape__inner">
<div class="shape__space">
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</section>
<section>
<div class="container">
<h1>Another section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="container">
<h2>Another section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>

16
_scss/_main.scss
Unescape Escape View File

@ -83,7 +83,23 @@ nav > a {
// Hide from both screenreaders and browsers: h5bp.com/u
.hidden {
display: none !important;
visibility: hidden;
}
// Hide only visually, but have it available for screenreaders: h5bp.com/v
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

8
_scss/_type.scss
Unescape Escape View File

@ -66,3 +66,11 @@ h4 {
}
.unstyled {
list-style-type: none;
padding: 0;
margin: 0;
}

229
_scss/gallery.scss
Unescape Escape View File

@ -1,207 +1,124 @@
*,
::before,
::after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
@import "variables";
body { background: #EEE; color: #333; }
body::before {
content: 'Default - 940px';
position: fixed;
z-index: 5;
top: 0;
left: 0;
width: 100%;
height: 25px;
background-color: hsla(110, 50%, 60%, .6);
-webkit-transition: background .2s ease;
-o-transition: background .2s ease;
transition: background .2s ease;
}
.shape {
@media (min-width: 1200px) {
body::before {
content: 'Large Desktop - 1200px+';
background-color: hsla(10, 50%, 60%, .6);
.shape__inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@media (min-width: 768px) and (max-width: 979px) {
body::before {
content: 'Portrait tablet to landscape and desktop - > 768px && < 979px';
background-color: hsla(50, 50%, 60%, .6);
.shape__space {
width: 100%;
height: 100%;
background-color: black;
border-style: solid;
border-width: 0;
border-color: transparent;
}
}
@media (max-width: 767px) {
body::before {
content: 'Phones to Tablets - < 767px';
background-color: hsla(210, 50%, 60%, .6);
}
.shape--blue .shape__space {
background-color: $river;
border-bottom-color: $river;
}
@media (max-width: 480px) {
body::before {
content: 'Phones - < 480px';
background-color: hsla(300, 50%, 60%, .6);
}
.shape--red .shape__space {
background-color: $alizarin;
border-bottom-color: $alizarin;
}
/*Hero image*/
.hero {
position: relative;
overflow: hidden;
.shape--orange .shape__space {
background-color: $orange;
border-bottom-color: $orange;
}
.hero img {
display: block;
width: 100%;
.shape--green .shape__space {
background-color: $emerald;
border-bottom-color: $emerald;
}
.hero-text {
color: #fff;
.shape--circle .shape__space {
border-radius: 50%;
}
/* Gallery */
.product {
margin: 20px 0 0;
height: 200px;
overflow: hidden;
.shape--square .shape__space {
// Nothing to see here
}
.product.w2 {
/*width: ;*/
// 166 / sqrt(166^2 + 166^2) = scale
.shape--diamond .shape__space {
-webkit-transform: rotate(45deg) scale(0.707106781);
transform: rotate(45deg) scale(0.707106781);
}
.product.link {
padding: 70px 20px 0;
background-color: hsl(110, 50%, 60%);
}
.product.h2 {
height: 420px;
$triangleSize: 166px;
.shape--triangle .shape__space {
height: 0;
width: 0;
border-width: 0 ($triangleSize / 2) $triangleSize ($triangleSize / 2);
background-color: transparent;
}
@media (min-width: 1200px) {
.product {
margin-top: 30px;
}
.product.h2 {
height: 430px;
}
}
@media (min-width: 768px) and (max-width: 979px) {
/*.product {
margin-top: 20px;
}
.product.h2 {
height: 420px;
}*/
}
@media (max-width: 767px) {
.product {
margin-top: 10px;
}
.product.h2 {
height: 410px;
}
}
/* Show what the data-* attributes are */
.product:before {
content: attr(data-groups);
position: absolute;
top: 0;
left: 0;
color: white;
text-shadow: -1px 0 0 black, 0 -1px 0 black, 1px 0 0 black, 0 1px 0 black;
font-family: Menlo;
}
/* Show what the data-* attributes are */
.product:after {
content: attr(data-megapixels) 'MP :: $' attr(data-price);
position: absolute;
top: 40px;
left: 0;
color: white;
text-shadow: -1px 0 0 black, 0 -1px 0 black, 1px 0 0 black, 0 1px 0 black;
font-family: Menlo;
}
.product-content {
padding: 10px;
}
.product-img {
text-align: center;
}
.product-meta-name {
text-transform: uppercase;
font-family: sans-serif;
font-size: 12px;
}
/* Helpers */
.box {
background: #444;
color: #f2f2f2;
box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.full {
position: absolute;
body::before {
content: 'Default - 940px';
position: fixed;
z-index: 5;
top: 0;
left: 0;
z-index: 5;
width: 100%;
height: 100%;
}
.ghost-center-wrap:before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
height: 25px;
background-color: hsla(110, 50%, 60%, .6);
-webkit-transition: background .2s ease;
-o-transition: background .2s ease;
transition: background .2s ease;
}
.ghost-center {
display: inline-block;
vertical-align: middle;
margin: 0;
@media (min-width: 1200px) {
body::before {
content: 'Large Desktop - 1200px+';
background-color: hsla(10, 50%, 60%, .6);
}
}
/* filters */
.filter-options {
margin: 20px 0;
@media (min-width: 768px) and (max-width: 979px) {
body::before {
content: 'Portrait tablet to landscape and desktop - > 768px && < 979px';
background-color: hsla(50, 50%, 60%, .6);
}
}
@media (max-width: 767px) {
.product {
display: table;
}
.product-img {
display: table-cell;
width: 33.33%;
vertical-align: middle;
body::before {
content: 'Phones to Tablets - < 767px';
background-color: hsla(210, 50%, 60%, .6);
}
}
.product-content {
display: table-cell;
width: 66.66%;
@media (max-width: 480px) {
body::before {
content: 'Phones - < 480px';
background-color: hsla(300, 50%, 60%, .6);
}
}
}

170
css/gallery.css
Unescape Escape View File

@ -1,12 +1,45 @@
*,
::before,
::after {
-moz-box-sizing: border-box;
box-sizing: border-box; }
.shape .shape__inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.shape .shape__space {
width: 100%;
height: 100%;
background-color: black;
border-style: solid;
border-width: 0;
border-color: transparent; }
.shape--blue .shape__space {
background-color: #3498db;
border-bottom-color: #3498db; }
.shape--red .shape__space {
background-color: #e74c3c;
border-bottom-color: #e74c3c; }
.shape--orange .shape__space {
background-color: #f39c12;
border-bottom-color: #f39c12; }
body {
background: #EEE;
color: #333; }
.shape--green .shape__space {
background-color: #2ecc71;
border-bottom-color: #2ecc71; }
.shape--circle .shape__space {
border-radius: 50%; }
.shape--diamond .shape__space {
-webkit-transform: rotate(45deg) scale(0.70711);
transform: rotate(45deg) scale(0.70711); }
.shape--triangle .shape__space {
height: 0;
width: 0;
border-width: 0 83px 166px 83px;
background-color: transparent; }
body::before {
content: 'Default - 940px';
@ -37,124 +70,3 @@ body::before {
body::before {
content: 'Phones - < 480px';
background-color: rgba(204, 102, 204, 0.6); } }
/*Hero image*/
.hero {
position: relative;
overflow: hidden; }
.hero img {
display: block;
width: 100%; }
.hero-text {
color: #fff; }
/* Gallery */
.product {
margin: 20px 0 0;
height: 200px;
overflow: hidden; }
.product.w2 {
/*width: ;*/ }
.product.link {
padding: 70px 20px 0;
background-color: #77cc66; }
.product.h2 {
height: 420px; }
@media (min-width: 1200px) {
.product {
margin-top: 30px; }
.product.h2 {
height: 430px; } }
@media (min-width: 768px) and (max-width: 979px) {
/*.product {
margin-top: 20px;
}
.product.h2 {
height: 420px;
}*/ }
@media (max-width: 767px) {
.product {
margin-top: 10px; }
.product.h2 {
height: 410px; } }
/* Show what the data-* attributes are */
.product:before {
content: attr(data-groups);
position: absolute;
top: 0;
left: 0;
color: white;
text-shadow: -1px 0 0 black, 0 -1px 0 black, 1px 0 0 black, 0 1px 0 black;
font-family: Menlo; }
/* Show what the data-* attributes are */
.product:after {
content: attr(data-megapixels) "MP :: $" attr(data-price);
position: absolute;
top: 40px;
left: 0;
color: white;
text-shadow: -1px 0 0 black, 0 -1px 0 black, 1px 0 0 black, 0 1px 0 black;
font-family: Menlo; }
.product-content {
padding: 10px; }
.product-img {
text-align: center; }
.product-meta-name {
text-transform: uppercase;
font-family: sans-serif;
font-size: 12px; }
/* Helpers */
.box {
background: #444;
color: #f2f2f2;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
.full {
position: absolute;
top: 0;
left: 0;
z-index: 5;
width: 100%;
height: 100%; }
.ghost-center-wrap:before {
content: '';
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%; }
.ghost-center {
display: inline-block;
vertical-align: middle;
margin: 0; }
/* filters */
.filter-options {
margin: 20px 0; }
@media (max-width: 767px) {
.product {
display: table; }
.product-img {
display: table-cell;
width: 33.33%;
vertical-align: middle; }
.product-content {
display: table-cell;
width: 66.66%; } }

19
css/style.css
Unescape Escape View File

@ -1510,6 +1510,11 @@ h3 {
h4 {
font-size: 1.25em; }
.unstyled {
list-style-type: none;
padding: 0;
margin: 0; }
pre {
max-height: 30em; }
@ -1564,6 +1569,20 @@ nav > a {
.keep-ratio.four-three {
padding-bottom: 75%; }
.hidden {
display: none !important;
visibility: hidden; }
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.btn-group:before, .btn-group:after {
content: " ";
display: table; }

103
js/demos/gallery.js
Unescape Escape View File

@ -14,12 +14,51 @@ Exports.Modules.Gallery = (function($, undefined) {
940: 60,
724: 42
},
gutterWidths = {
1170: 30,
940: 20,
724: 20
},
init = function() {
setVars();
initFilters();
initShuffle();
},
_init = function() {
setVars = function() {
$grid = $('.products');
$features = $('.filter-options .features');
$megapixels = $('.filter-options .megapixels');
},
initShuffle = function() {
// instantiate the plugin
$grid.shuffle({
speed : 250,
easing : 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', // easeOutQuart
columnWidth: function( containerWidth ) {
var colW = columnWidths[ containerWidth ];
// Default to container width
if ( colW === undefined ) {
colW = containerWidth;
}
return colW;
},
gutterWidth: function( containerWidth ) {
var gutter = gutterWidths[ containerWidth ];
// Default to zero
if ( gutter === undefined ) {
gutter = 0;
}
return gutter;
}
});
},
initFilters = function() {
// Features
$features.find('input').on('change', function() {
var $checked = $features.find('input:checked'),
@ -34,7 +73,7 @@ Exports.Modules.Gallery = (function($, undefined) {
}
features = groups;
_filter();
filter();
});
// Megapixels
@ -52,74 +91,44 @@ Exports.Modules.Gallery = (function($, undefined) {
}
megapixels = groups;
_filter();
});
// instantiate the plugin
$grid.shuffle({
group : 'all',
speed : 400,
easing : 'cubic-bezier(0.165, 0.840, 0.440, 1.000)', // easeOutQuart
columnWidth: function( containerWidth ) {
var colW = columnWidths[ containerWidth ];
if ( colW === undefined ) {
colW = containerWidth;
}
return colW;
},
gutterWidth: function( containerWidth ) {
var gutter = 0;
switch ( containerWidth ) {
case 1170:
gutter = 30;
break;
case 940: // Falls through
case 724:
gutter = 20;
break;
default:
gutter = 0;
}
return gutter;
}
filter();
});
},
_filter = function() {
if ( _hasActiveFilters() ) {
$grid.shuffle(function($el) {
return _itemPassesFilters( $el.data() );
filter = function() {
if ( hasActiveFilters() ) {
$grid.shuffle('shuffle', function($el) {
return itemPassesFilters( $el.data() );
});
} else {
$grid.shuffle('all');
$grid.shuffle( 'shuffle', 'all' );
}
},
_itemPassesFilters = function(data) {
itemPassesFilters = function(data) {
// If a features filter is active
if ( features.length > 0 && !_arrayContainsArray(data.groups, features) ) {
if ( features.length > 0 && !arrayContainsArray(data.groups, features) ) {
return false;
}
// If a megapixels filter is active
if ( megapixels.length > 0 && !_valueInArray(data.megapixels, megapixels) ) {
if ( megapixels.length > 0 && !valueInArray(data.megapixels, megapixels) ) {
return false;
}
return true;
},
_hasActiveFilters = function() {
hasActiveFilters = function() {
return megapixels.length > 0 || features.length > 0;
},
_valueInArray = function(value, arr) {
valueInArray = function(value, arr) {
return $.inArray(value, arr) !== -1;
},
_arrayContainsArray = function(arrToTest, requiredArr) {
arrayContainsArray = function(arrToTest, requiredArr) {
var i = 0,
dictionary = {},
j;
@ -128,7 +137,7 @@ Exports.Modules.Gallery = (function($, undefined) {
for (j = 0; j < arrToTest.length; j++) {
dictionary[ arrToTest[j] ] = true;
}
// Loop through selected features, if that feature is not in this elements groups, return false
for (; i < requiredArr.length; i++) {
if ( dictionary[ requiredArr[i] ] === undefined ) {
@ -139,10 +148,12 @@ Exports.Modules.Gallery = (function($, undefined) {
};
return {
init: _init
init: init
};
}(jQuery));
$(document).ready(function() {
Exports.Modules.Gallery.init();
});
Write Preview
Loading…
Cancel
Save