Homage page demo working

pull/56/head
Glen Cheney 11 years ago
parent 4c8ff13cce
commit af2fef2e41

@ -11,55 +11,82 @@ items:
- groups: [ photography ]
date: 2010-09-14
title: Baseball
img: img/baseball.png
img: baseball.png
original: baseball.jpg
cols: 3
- groups: [ wallpaper, 3d ]
date: 2011-08-14
title: Tennis
img: img/tennis-ball.png
img: tennis-ball.png
original: tennis-ball.jpg
description: '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.'
cols: 6
- groups: [ wallpaper, 3d ]
date: 2009-05-27
title: iMac
img: img/imac.png
img: imac.png
original: imac.jpg
cols: 3
- groups: [ graphics ]
date: 2012-05-14
title: Master Chief
img: img/master-chief.png
img: master-chief.png
original: Master_Chief_Portrait_by_Eightfold_Studios.jpg
description: '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.'
extras: [ h2 ]
cols: 3
- groups: [ wallpaper, 3d ]
date: 2009-09-14
title: Eightfold
img: img/es-blue.png
img: es-blue.png
original: es-blue.jpg
cols: 3
- groups: [ photography ]
date: 2012-03-14
title: Pumpkin
img: img/pumpkin.png
img: pumpkin.png
original: pumpkin.jpg
description: '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.'
cols: 6
- groups: [ wallpaper, 3d ]
date: 2013-05-19
title: Vestride
img: img/vestride-red.png
img: vestride-red.png
original: vestride-red.jpg
extras: [ h2 ]
cols: 6
- groups: [ graphics ]
date: 2013-02-01
title: Newegg
img: img/newegg.png
img: newegg.png
original: newegg.jpg
description: '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.'
extras: [ h2 ]
cols: 3
- groups: [ wallpaper ]
date: 2000-01-01
title: Arc
img: img/eightfoldarc.png
img: eightfoldarc.png
original: eightfoldarc.jpg
cols: 3
- groups: [ photography ]
date: 2012-07-04
title: Ground
img: img/ground.png
img: ground.png
original: ground!.jpg
cols: 3
- groups: [ wallpaper ]
date: 2011-08-12
title: Grass
img: img/grassy-hills.png
img: grassy-hills.png
original: grassy-hills.tif
description: '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.'
cols: 6
- groups: [ wallpaper, 3d ]
date: 2013-05-19
title: Vestride
img: img/vestride-classy.png
img: vestride-classy.png
original: vestride-classy.jpg
cols: 3

@ -1,8 +1,9 @@
<h2>Changes</h2>
<ul>
<li>11.3.12 - Replaced layout system with <a href="http://masonry.desandro.com/">masonry</a>. Items can now be different sizes! Added addtional examples.</li>
<li>10.24.12 - Better handling of grid item dimensions. Added a minimal markup page.</li>
<li>9.20.12 - Added <code>destroy</code> method</li>
<li>9.18.12 - Added sorting ability and made plugin responsive. Updated to Modernizr 2.6.2</li>
<li>7.21.12 - Rewrote plugin in more object oriented structure. Added custom events. Updated to Modernizr 2.6.1</li>
<li>7.3.12 - Removed dependency on the css file and now apply the css with javascript</li>
<li>11.3.12 - Replaced layout system with <a href="http://masonry.desandro.com/">masonry</a>. Items can now be different sizes! Added addtional examples.</li>
<li>10.24.12 - Better handling of grid item dimensions. Added a minimal markup page.</li>
<li>9.20.12 - Added <code>destroy</code> method</li>
<li>9.18.12 - Added sorting ability and made plugin responsive. Updated to Modernizr 2.6.2</li>
<li>7.21.12 - Rewrote plugin in more object oriented structure. Added custom events. Updated to Modernizr 2.6.1</li>
<li>7.3.12 - Removed dependency on the css file and now apply the css with javascript</li>
</ul>

@ -1,15 +1,16 @@
{% comment %} Ghetto conversion to JSON {% endcomment %}
{% capture groups %}["{{ item.groups | join: "," }}"]{% endcapture %}
{% if extras.length > 0 %}
{% capture groups %}["{{ item.groups | join: '","' }}"]{% endcapture %}
{% if item.extras | size: > 0 %}
{% capture extras %} picture-item--{{ item.extras | join: " picture-item--" }}{% endcapture %}
{% else %}
{% assign extras = "" %}
{% endif %}
<div class="span3 picture-item{{ extras }}" data-groups='{{ groups }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
<img src="{{ item.img }}" alt="" height="145" width="230" />
<div class="picture-item__details">
<span class="picture-item__title">{{ item.title }}</span>
<a href="#">Graphic Design</a>
{% if item.description %}<p>{{ item.description }}</p>{% endif %}
</div>
</div>
{% if item.cols %}{% assign cols = item.cols %}{% else %}{% assign cols = 3 %}{% endif %}
<figure class="span{{ cols }} picture-item{{ extras }}" data-groups='{{ groups }}' data-date-created="{{ item.date }}" data-title="{{ item.title }}">
<img src="{{ site.url }}/img/{{ item.img }}" alt="" height="145" width="230" />
<div class="picture-item__details clearfix">
<figcaption class="picture-item__title pull-left"><a href="{{ site.url }}/img/originals/{{ item.original }}" target="_blank">{{ item.title }}</a></figcaption>
<p class="picture-item__tags pull-right">{{ item.groups | join: ', ' }}</p>
</div>
{% if item.description %}<p class="picture-item__description">{{ item.description }}</p>{% endif %}
</figure>

@ -1,42 +1,49 @@
<h2>Usage</h2>
<h3>The HTML Structure</h3>
<p>The only real important thing here is the <code class="language-markup token attr-name">data-groups</code> attribute. It has to be a <a href="http://jsonlint.com/">valid JSON</a> array of strings.</p>
<pre rel="HTML"><code class="language-markup">
&lt;div id="grid"&gt;
&lt;div class="item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball"&gt;
&lt;img src="img/baseball.png" /&gt;
&lt;div class="item-details"&gt;
&lt;a href="#"&gt;Photography&lt;/a&gt;
&lt;/div&gt;
<h3>The HTML Structure</h3>
<p>The only real important thing here is the <code class="language-markup token attr-name">data-groups</code> attribute. It has to be a <a href="http://jsonlint.com/">valid JSON</a> array of strings. Optionally, it can be a string delimeted by a value you provide. See <code>delimeter</code> in the <a href="#options">options</a>.</p>
<p>In this example, shuffle is using the fluid grid from the <a href="http://twitter.github.io/bootstrap/">Twitter Bootstrap</a>. It's also making use of the <a href="http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/"><abbr title="Block-Element-Modifier">BEM</abbr></a>.</p>
<pre rel="HTML"><code class="language-markup">&lt;div id="grid" class="row-fluid"&gt;
&lt;figure class="span3 picture-item" data-groups='["photography"]'&gt;
&lt;img src="/img/baseball.png" height="145" width="230" /&gt;
&lt;div class="picture-item__details"&gt;
&lt;figcaption class="picture-item__title"&gt;Baseball&lt;/figcaption&gt;
&lt;p class="picture-item__tags"&gt;photography&lt;/p&gt;
&lt;/div&gt;
&lt;div class="item" data-groups='["wallpaper", "3d"]' data-date-created="2011-08-14" data-title="Tennis"&gt;
&lt;img src="img/tennis-ball.png" /&gt;
&lt;div class="item-details"&gt;
&lt;a href="#"&gt;3D Render, Wallpaper&lt;/a&gt;
&lt;/div&gt;
&lt;/figure&gt;
&lt;figure class="span6 picture-item" data-groups='["wallpaper","3d"]'&gt;
&lt;img src="/img/tennis-ball.png" height="145" width="230" /&gt;
&lt;div class="picture-item__details"&gt;
&lt;figcaption class="picture-item__title"&gt;Tennis&lt;/figcaption&gt;
&lt;p class="picture-item__tags"&gt;wallpaper, 3d&lt;/p&gt;
&lt;/div&gt;
&lt;div class="item" data-groups='["3d", "wallpaper"]' data-date-created="2009-05-27" data-title="iMac"&gt;
&lt;img src="img/imac.png" /&gt;
&lt;div class="item-details"&gt;
&lt;a href="#"&gt;3D Render, Wallpaper&lt;/a&gt;
&lt;/div&gt;
&lt;p class="picture-item__description"&gt;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.&lt;/p&gt;
&lt;/figure&gt;
&lt;figure class="span3 picture-item" data-groups='["wallpaper","3d"]'&gt;
&lt;img src="/img/imac.png" height="145" width="230" /&gt;
&lt;div class="picture-item__details"&gt;
&lt;figcaption class="picture-item__title"&gt;iMac&lt;/figcaption&gt;
&lt;p class="picture-item__tags"&gt;wallpaper, 3d&lt;/p&gt;
&lt;/div&gt;
&lt;div class="item" data-groups='["graphics"]' data-date-created="2012-05-14" data-title="Master Chief"&gt;
&lt;img src="img/master-chief.png" /&gt;
&lt;div class="item-details"&gt;
&lt;a href="#"&gt;Graphic Design&lt;/a&gt;
&lt;/div&gt;
&lt;/figure&gt;
&lt;figure class="span3 picture-item picture-item--h2" data-groups='["graphics"]'&gt;
&lt;img src="/img/master-chief.png" height="145" width="230" /&gt;
&lt;div class="picture-item__details"&gt;
&lt;figcaption class="picture-item__title"&gt;Master Chief&lt;/figcaption&gt;
&lt;p class="picture-item__tags"&gt;graphics&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
&lt;p class="picture-item__description"&gt;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.&lt;/p&gt;
&lt;/figure&gt;
&lt;/div&gt;</code></pre>
<h3>How column widths work</h3>
<p>The <code>columnWidth</code> option is used to calculate the column width. This option <strong>can be a function</strong> for responsive layouts. If it's not a function, it uses jQuery's <code class="language-javascript">outerWidth(true)</code> to calculate the column width (this includes margins). If the <code>columnWidth</code> option isn't specified, the width will be the width of the first item.</p>
<h3 id="columns">How column widths work</h3>
<p>The <code>columnWidth</code> option is used to calculate the column width. This option <strong>can be a function</strong> for responsive layouts. If it's not a function, it uses jQuery's <code class="language-javascript">outerWidth(true)</code> to calculate the column width (this includes margins). If the <code>columnWidth</code> option isn't specified, the width will be the width of the first item.</p>
<h3>A basic setup example</h3>
<p>Sets up the button clicks and runs shuffle</p>
<pre rel="jQuery"><code class="language-javascript">
<h3>A basic setup example</h3>
<p>Sets up the button clicks and runs shuffle</p>
<pre rel="jQuery"><code class="language-javascript">
$(document).ready(function(){
// Set up button clicks
@ -54,5 +61,4 @@ $(document).ready(function(){
// instantiate the plugin
$('#grid').shuffle();
});
</code></pre>
});</code></pre>

@ -14,6 +14,11 @@ pre {
margin-left: 0;
}
ul ul {
padding-left: 1.25em;
margin: 0;
list-style-type: circle;
}
nav > a {

@ -1,29 +1,44 @@
@import "variables";
/*=============================================*\
Some styles to show off masonry layout
\*=============================================*/
$pictureGutter: 24px;
$itemHeight: 220px;
.picture-item {
height: 210px;
height: 220px;
margin-top: $pictureGutter;
overflow: hidden;
background: $clouds;
&.shuffle-item {
margin-left: 0; /* shuffle items shouldn't have a left margin*/
}
&.picture-item--h2 {
height: 420px;
height: ($itemHeight * 2) + $pictureGutter; /* 2x the height + 1 gutter */
}
img {
display: block;
width: 100%;
height: auto;
}
.picture-item__details {
.picture-item__details,
.picture-item__description {
padding: 1em;
}
.picture-item__description {
margin: 0;
padding-top: 0;
padding-right: 2em;
}
.picture-item__tags {
margin: 0;
}
.picture-item__title {
}

@ -1,10 +1,10 @@
@import "variables";
@import "normalize.scss";
@import "normalize";
// @import "csswizardry-grids";
@import "bootstrap.scss";
@import "type.scss";
@import "main.scss";
@import "buttons.scss";
@import "helpers.scss";
@import "bootstrap";
@import "type";
@import "main";
@import "buttons";
@import "helpers";

@ -2,17 +2,29 @@
Some styles to show off masonry layout
\*=============================================*/
.picture-item {
height: 210px;
height: 220px;
margin-top: 24px;
overflow: hidden; }
overflow: hidden;
background: #ecf0f1; }
.picture-item.shuffle-item {
margin-left: 0;
/* shuffle items shouldn't have a left margin*/ }
.picture-item.picture-item--h2 {
height: 420px; }
height: 464px;
/* 2x the height + 1 gutter */ }
.picture-item img {
display: block;
width: 100%;
height: auto; }
.picture-item .picture-item__details,
.picture-item .picture-item__description {
padding: 1em; }
.picture-item .picture-item__description {
margin: 0;
padding-top: 0;
padding-right: 2em; }
.picture-item .picture-item__tags {
margin: 0; }
.shuffle--fluid .shuffle__sizer {
position: absolute;

@ -1523,6 +1523,11 @@ pre {
.row.row--full {
margin-left: 0; }
ul ul {
padding-left: 1.25em;
margin: 0;
list-style-type: circle; }
nav > a {
display: block;
margin: 5px 0; }

@ -13,7 +13,7 @@ extraJS: [ "homepage.js" ]
</div>
</header>
<section>
<section id="downloads">
<div class="container-fluid">
<h2>Downloads</h2>
<nav role="secondary">
@ -24,7 +24,7 @@ extraJS: [ "homepage.js" ]
</section>
<section>
<section id="demo">
<div class="container-fluid">
<h2>Example</h2>
</div>
@ -60,107 +60,11 @@ extraJS: [ "homepage.js" ]
{% include picture-item.html %}
{% endfor %}
<div class="span3 shuffle__sizer"></div>
<!-- <div class="item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball">
<img src="img/baseball.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Baseball</span>
<a href="img/originals/baseball.jpg">Photography</a>
</div>
</div>
<div class="item w2" data-groups='["wallpaper", "3d"]' data-date-created="2011-08-14" data-title="Tennis">
<p class="rfloat">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>
<img src="img/tennis-ball.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Tennis</span>
<a href="#">3D Render, Wallpaper</a>
</div>
</div>
<div class="item" data-groups='["3d", "wallpaper"]' data-date-created="2009-05-27" data-title="iMac">
<img src="img/imac.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">iMac</span>
<a href="#">3D Render, Wallpaper</a>
</div>
</div>
<div class="item h2" data-groups='["graphics"]' data-date-created="2012-05-14" data-title="Master Chief">
<img src="img/master-chief.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Master Chief</span>
<a href="#">Graphic Design</a>
<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.</p>
</div>
</div>
<div class="item" data-groups='["3d", "wallpaper"]' data-date-created="2012-09-14" data-title="Eightfold">
<img src="img/es-blue.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Eightfold</span>
<a href="#">3D Render, Wallpaper</a>
</div>
</div>
<div class="item w2" data-groups='["photography"]' data-date-created="2012-03-14" data-title="Pumpkin">
<p class="rfloat">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>
<img src="img/pumpkin.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Pumpkin</span>
<a href="#">Photography</a>
</div>
</div>
<div class="item w2 h2" data-groups='["3d", "wallpaper"]' data-date-created="2012-09-14" data-title="Vestride">
<img src="img/vestride-red.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Vestride</span>
<a href="#">3D Render, Wallpaper</a>
</div>
</div>
<div class="item h2" data-groups='["graphics"]' data-date-created="2012-01-12" data-title="Newegg">
<img src="img/newegg.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Newegg</span>
<a href="#">Motion Graphics</a>
<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.</p>
</div>
</div>
<div class="item" data-groups='["wallpaper"]' data-date-created="2012-01-14" data-title="Arc">
<img src="img/eightfoldarc.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Arc</span>
<a href="#">Wallpaper</a>
</div>
</div>
<div class="item" data-groups='["photography"]' data-date-created="2011-01-14" data-title="Ground">
<img src="img/ground.png" alt="" height="145" width="230"/>
<div class="item-details">
<span class="title">Ground</span>
<a href="img/originals/baseball.jpg">Photography</a>
</div>
</div>
<div class="item w2" data-groups='["wallpaper"]' data-date-created="2011-12-14" data-title="Grass">
<p class="rfloat">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>
<img src="img/grassy-hills.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Grass</span>
<a href="#">Wallpaper</a>
</div>
</div>
<div class="item" data-groups='["3d", "wallpaper"]' data-date-created="2012-04-14" data-title="Vestride">
<img src="img/vestride-classy.png" alt="" height="145" width="230" />
<div class="item-details">
<span class="title">Vestride</span>
<a href="#">3D Render, Wallpaper</a>
</div>
</div> -->
</div>
</div>
</section>
<section>
<section id="demos">
<div class="container-fluid">
<h2>Other Examples</h2>
<nav role="primary">
@ -171,43 +75,43 @@ extraJS: [ "homepage.js" ]
</div>
</section>
<section>
<section id="features">
<div class="container-fluid">
{% include features.html %}
</div>
</section>
<section>
<section id="options">
<div class="container-fluid">
{% include options.html %}
</div>
</section>
<section>
<section id="usage">
<div class="container-fluid">
{% include usage.html %}
</div>
</section>
<section>
<section id="events">
<div class="container-fluid">
{% include events.html %}
</div>
</section>
<section>
<section id="sorting">
<div class="container-fluid">
{% include sorting.html %}
</div>
</section>
<section>
<section id="advanced-filters">
<div class="container-fluid">
{% include advanced-filters.html %}
</div>
</section>
<section>
<section id="dependencies">
<div class="container-fluid">
<h2>Dependencies</h2>
@ -225,7 +129,7 @@ extraJS: [ "homepage.js" ]
</section>
<section>
<section id="browsers">
<div class="container-fluid">
<h2>Supported Browsers</h2>
@ -243,7 +147,7 @@ extraJS: [ "homepage.js" ]
</div>
</section>
<section>
<section id="links">
<div class="container-fluid">
<h2>Links</h2>
@ -256,9 +160,8 @@ extraJS: [ "homepage.js" ]
</section>
<section>
<section id="changelog">
<div class="container-fluid">
<h2>Changes</h2>
{% include changelog.html %}
</div>
</section>

@ -5,4 +5,6 @@ This is a large improvement to shuffle. Most notably, the ability for [masonry](
## Todos
* Refactor `init()` function
* Remove _beforeResize and _after Resize (possibly expose events instead?)
* Make demos
* Make demos
* Solve margin top issue
* init with a sort
Loading…
Cancel
Save