Update docs

pull/111/head
Glen Cheney 8 years ago
parent 99ed4e37fe
commit 391481ea4f
No known key found for this signature in database
GPG Key ID: 28736C2C260C298E

@ -14,7 +14,6 @@ temp
css css
img img
js js
Gruntfile.js
gulpfile.js gulpfile.js
favicon.png favicon.png
index.html index.html

@ -1,5 +1,3 @@
language: node_js language: node_js
node_js: node_js:
- "5" - "5"
before_install:
- npm install -g gulp

@ -1,12 +1,11 @@
## Running locally ## Running locally
This project uses [Jekyll](http://jekyllrb.com/). This project uses [Jekyll](https://jekyllrb.com/).
* Head over to [their quickstart guide](http://jekyllrb.com/docs/quickstart/) to setup jekyll. * Head over to [their quickstart guide](https://jekyllrb.com/docs/quickstart/) to setup jekyll.
* Install npm dependencies `npm install`. * Install npm dependencies `npm install`.
* Run `grunt serve` to tell Jekyll to watch for changes. * Run `npm run watch` to rebuild, start the jekyll server, and watch for changes.
* To watch for and compile changes to scss and shuffle src js files, run `grunt watch` in a separate tab.
* go to `http://localhost:4000` to see it. * go to `http://localhost:4000` to see it.
## Submitting Issues ## Submitting Issues
All bug reports and issues **require** a [reduced test case](http://css-tricks.com/reduced-test-cases/). Take a look at the GitHub [contributing guide](https://guides.github.com/activities/contributing-to-open-source/index.html). For demo links, please use things like [CodePen](http://codepen.io/), [JSFiddle](http://jsfiddle.net/), or [JS Bin](http://jsbin.com/) to create reduced test cases. For more best practices when contributing, check out [html5boilerplate's guide](https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md). All bug reports and issues **require** a [reduced test case](https://css-tricks.com/reduced-test-cases/). Take a look at the GitHub [contributing guide](https://guides.github.com/activities/contributing-to-open-source/index.html). For demo links, please use things like [CodePen](http://codepen.io/), [JSFiddle](https://jsfiddle.net/), or [JS Bin](https://jsbin.com/) to create reduced test cases. For more best practices when contributing, check out [html5boilerplate's guide](https://github.com/h5bp/html5-boilerplate/blob/master/CONTRIBUTING.md).
Without a reduced test case, your issue may be closed. Without a reduced test case, your issue may be closed.

@ -1,6 +1,6 @@
The MIT License (MIT) The MIT License (MIT)
Copyright (c) 2014 Glen Cheney Copyright (c) 2014-2016 Glen Cheney
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

@ -24,7 +24,7 @@ permalink: /:title
environment: production environment: production
# Open graph and twitter cards require absolute urls # Open graph and twitter cards require absolute urls
url: http://vestride.github.io url: https://vestride.github.io
# jekyll serve --watch --config _config.yml,_config_dev.yml # jekyll serve --watch --config _config.yml,_config_dev.yml
baseurl: /Shuffle baseurl: /Shuffle

@ -1,6 +1,7 @@
# Options in this file override ones set in _config.yml # Options in this file override ones set in _config.yml
host: 0.0.0.0
environment: "development" environment: "development"
url: http://localhost:4000 url: http://localhost:4000
baseurl: "" baseurl: ""

@ -4,7 +4,6 @@ title: Shuffle Compound Filters Demo
description: A demo with compound filtering description: A demo with compound filtering
image: /demos/adaptive.jpg image: /demos/adaptive.jpg
extraJS: [ "demos/compound-filters.js" ] extraJS: [ "demos/compound-filters.js" ]
extraCSS: [ "/css/gallery.css" ]
prism: true prism: true
--- ---
@ -14,13 +13,13 @@ prism: true
</div> </div>
</section> </section>
<section class="gallery container"> <section class="container">
<div class="filter-options row"> <div class="filter-options filter-options--compound row">
<div class="col-6@sm"> <div class="col-6@sm">
<div class="filter-group filter--colors js-colors"> <div class="filter-group filter-group--compound js-colors">
<h5 class="filter__label">Colors</h5> <h5 class="filter-group__label filter-group__label--compound">Colors</h5>
<button class="btn btn--go" data-value="green"><span class="visuallyhidden">Green</span></button> <button class="btn btn--go" data-value="green"><span class="visuallyhidden">Green</span></button>
<button class="btn btn--primary" data-value="blue"><span class="visuallyhidden">Blue</span></button> <button class="btn btn--primary" data-value="blue"><span class="visuallyhidden">Blue</span></button>
<button class="btn btn--danger" data-value="red"><span class="visuallyhidden">Red</span></button> <button class="btn btn--danger" data-value="red"><span class="visuallyhidden">Red</span></button>
@ -29,8 +28,8 @@ prism: true
</div> </div>
<div class="col-6@sm"> <div class="col-6@sm">
<div class="filter-group filter--shapes js-shapes"> <div class="filter-group filter-group--compound js-shapes">
<h5 class="filter-group__label">Shapes</h5> <h5 class="filter-group__label filter-group__label--compound">Shapes</h5>
<span class="ib"> <span class="ib">
<input type="checkbox" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label> <input type="checkbox" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
</span> </span>
@ -49,11 +48,11 @@ prism: true
</div> </div>
<div class="row"> <div class="row">
<div class="shape-up js-shuffle"> <div class="shape-shuffle-container js-shuffle">
{% for shape in site.shapes %} {% for shape in site.shapes %}
<div class="col-3@sm shape shape--{{ shape.shape }} shape--{{ shape.color }}" data-shape="{{ shape.shape }}" data-color="{{ shape.color }}"> <div class="col-3@xs col-3@sm shape shape--{{ shape.shape }} shape--{{ shape.color }}" data-shape="{{ shape.shape }}" data-color="{{ shape.color }}">
<div class="aspect"> <div class="aspect">
<div class="shape__inner"> <div class="aspect__inner">
<div class="shape__space"></div> <div class="shape__space"></div>
</div> </div>
</div> </div>

@ -15,7 +15,7 @@ pagejs: false
<div class="col-12@sm"> <div class="col-12@sm">
<h2>RequireJS!</h2> <h2>RequireJS!</h2>
<p> <p>
Shuffle uses a UMD wrapper, so it is compatible with AMD loaders like <a href="http://requirejs.org">RequireJS</a>. The UMD wrapper also allows Shuffle to work with CommonJS modules. You can take a peek at the <a href="{{ site.baseurl }}/js/require-main.js">config file</a> used on this page. Shuffle uses a UMD wrapper, so it is compatible with AMD loaders like <a href="https://requirejs.org">RequireJS</a>. The UMD wrapper also allows Shuffle to work with CommonJS modules. You can take a peek at the <a href="{{ site.baseurl }}/js/require-main.js">config file</a> used on this page.
</p> </p>
</div> </div>
</div> </div>

@ -1,16 +1,12 @@
@import "variables"; @import "variables";
.filter-options { .compound-filter-options {
margin-top: 20px; margin-top: 20px;
margin-bottom: 40px; margin-bottom: 40px;
} }
.filter-group { .filter-group--compound {
.filter-group__label {
margin: 0 0 5px;
}
button { button {
width: 40px; width: 40px;
@ -21,9 +17,17 @@
label { label {
cursor: pointer; cursor: pointer;
} }
.ib + .ib {
margin-left: 8px;
}
}
.filter-group__label--compound {
margin: 0 0 5px;
} }
.shape-up { .shape-shuffle-container {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
} }
@ -33,14 +37,6 @@
margin-left: 0; margin-left: 0;
margin-top: 10px; margin-top: 10px;
.shape__inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.shape__space { .shape__space {
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -98,50 +94,43 @@
} }
.shape--triangle .shape__space { .shape--triangle .shape__space {
@include equilateralTriangle(220px); @include equilateralTriangle(132px);
background-color: transparent; background-color: transparent;
margin: auto;
} }
@media (min-width: 1200px) { @media (min-width: 425px) {
.shape--triangle .shape__space { .shape--triangle .shape__space {
@include equilateralTriangle(270px); @include equilateralTriangle(180px);
} }
} }
@media (min-width: 1392px) { @media (min-width: 600px) {
.shape--triangle .shape__space { .shape--triangle .shape__space {
@include equilateralTriangle(284px); @include equilateralTriangle(262px);
} }
} }
@media (min-width: 768px) and (max-width: 979px) { @media (min-width: 768px) {
.shape--triangle .shape__space { .shape--triangle .shape__space {
@include equilateralTriangle(166px); @include equilateralTriangle(148px);
} }
} }
@media (max-width: 767px) { @media (min-width: 1024px) {
.shape--triangle .shape__space { .shape--triangle .shape__space {
@include equilateralTriangle(600px); @include equilateralTriangle(204px);
margin: auto;
} }
} }
@media (max-width: 600px) { @media (min-width: 1200px) {
.shape--triangle .shape__space { .shape--triangle .shape__space {
@include equilateralTriangle(480px); @include equilateralTriangle(270px);
} }
} }
@media (max-width: 480px) { @media (min-width: 1392px) {
.shape--triangle .shape__space { .shape--triangle .shape__space {
@include equilateralTriangle(320px); @include equilateralTriangle(284px);
} }
} }

@ -48,12 +48,13 @@ h2 {
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 4px; bottom: 0.1em;
left: 0; left: 0;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: $emerald; background-color: $emerald;
transform: translateZ(0);
} }
} }

@ -9,3 +9,4 @@
@import "faq"; @import "faq";
@import "buttons"; @import "buttons";
@import "helpers"; @import "helpers";
@import "compound-filters";

@ -31,7 +31,6 @@
"js", "js",
"node_modules", "node_modules",
"bower_components", "bower_components",
"Gruntfile.js",
"gulp", "gulp",
"gulpfile.js", "gulpfile.js",
"favicon.png", "favicon.png",
@ -41,7 +40,5 @@
"tests", "tests",
"webpack.config.js", "webpack.config.js",
"webpack.config.min.js" "webpack.config.min.js"
], ]
"dependencies": {},
"devDependencies": {}
} }

@ -1,109 +0,0 @@
.filter-options {
margin-top: 20px;
margin-bottom: 40px; }
.filter-group .filter-group__label {
margin: 0 0 5px; }
.filter-group button {
width: 40px;
height: 40px;
padding: 0; }
.filter-group label {
cursor: pointer; }
.shape-up {
position: relative;
overflow: hidden; }
.shape {
position: relative;
margin-left: 0;
margin-top: 10px; }
.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; }
.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 {
padding-top: 14.5px;
height: 0;
width: 0;
border-width: 0 110px 191px 110px;
background-color: transparent; }
@media (min-width: 1200px) {
.shape--triangle .shape__space {
padding-top: 18px;
height: 0;
width: 0;
border-width: 0 135px 234px 135px; } }
@media (min-width: 1392px) {
.shape--triangle .shape__space {
padding-top: 19px;
height: 0;
width: 0;
border-width: 0 142px 246px 142px; } }
@media (min-width: 768px) and (max-width: 979px) {
.shape--triangle .shape__space {
padding-top: 11px;
height: 0;
width: 0;
border-width: 0 83px 144px 83px; } }
@media (max-width: 767px) {
.shape--triangle .shape__space {
padding-top: 40px;
height: 0;
width: 0;
border-width: 0 300px 520px 300px;
margin: auto; } }
@media (max-width: 600px) {
.shape--triangle .shape__space {
padding-top: 32px;
height: 0;
width: 0;
border-width: 0 240px 416px 240px; } }
@media (max-width: 480px) {
.shape--triangle .shape__space {
padding-top: 21.5px;
height: 0;
width: 0;
border-width: 0 160px 277px 160px; } }

@ -441,12 +441,14 @@ h2 {
h2::after { h2::after {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 4px; bottom: 0.1em;
left: 0; left: 0;
z-index: -1; z-index: -1;
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: #2ECC71; } background-color: #2ECC71;
-webkit-transform: translateZ(0);
transform: translateZ(0); }
h3 { h3 {
margin: .6667em 0 0.5em; margin: .6667em 0 0.5em;
@ -1367,3 +1369,110 @@ button {
.table-center { .table-center {
display: table-cell; display: table-cell;
vertical-align: middle; } vertical-align: middle; }
.compound-filter-options {
margin-top: 20px;
margin-bottom: 40px; }
.filter-group--compound button {
width: 40px;
height: 40px;
padding: 0; }
.filter-group--compound label {
cursor: pointer; }
.filter-group--compound .ib + .ib {
margin-left: 8px; }
.filter-group__label--compound {
margin: 0 0 5px; }
.shape-shuffle-container {
position: relative;
overflow: hidden; }
.shape {
position: relative;
margin-left: 0;
margin-top: 10px; }
.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; }
.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 {
padding-top: 9px;
height: 0;
width: 0;
border-width: 0 66px 114px 66px;
background-color: transparent;
margin: auto; }
@media (min-width: 425px) {
.shape--triangle .shape__space {
padding-top: 12px;
height: 0;
width: 0;
border-width: 0 90px 156px 90px; } }
@media (min-width: 600px) {
.shape--triangle .shape__space {
padding-top: 17.5px;
height: 0;
width: 0;
border-width: 0 131px 227px 131px; } }
@media (min-width: 768px) {
.shape--triangle .shape__space {
padding-top: 10px;
height: 0;
width: 0;
border-width: 0 74px 128px 74px; } }
@media (min-width: 1024px) {
.shape--triangle .shape__space {
padding-top: 13.5px;
height: 0;
width: 0;
border-width: 0 102px 177px 102px; } }
@media (min-width: 1200px) {
.shape--triangle .shape__space {
padding-top: 18px;
height: 0;
width: 0;
border-width: 0 135px 234px 135px; } }
@media (min-width: 1392px) {
.shape--triangle .shape__space {
padding-top: 19px;
height: 0;
width: 0;
border-width: 0 142px 246px 142px; } }

@ -7,7 +7,6 @@ const autoprefixer = require('autoprefixer');
module.exports = function css() { module.exports = function css() {
return gulp.src([ return gulp.src([
'./_scss/gallery.scss',
'./_scss/shuffle-styles.scss', './_scss/shuffle-styles.scss',
'./_scss/style.scss', './_scss/style.scss',
]) ])

@ -215,11 +215,12 @@ prism: true
<ul> <ul>
<li>Chrome</li> <li>Chrome</li>
<li>Firefox</li> <li>Firefox</li>
<li>IE 11+</li> <li>Edge</li>
<li>IE 11</li>
<li>Safari</li> <li>Safari</li>
</ul> </ul>
<p>Many other browsers will likely work as well and support for others may be added with polyfills for ES5 features. If you require broader browser support, use the most recent <code>v3</code> of Shuffle.</p> <p>Support for other browsers may be added with polyfills for ES5 features. If you require broader browser support, use the most recent <code>v3</code> release of Shuffle.</p>
</div> </div>
</div> </div>
</div> </div>

@ -39,13 +39,15 @@ Modules.NavTray = (function () {
}; };
NavTray.prototype.onResize = function () { NavTray.prototype.onResize = function () {
this.tray.style.height = ''; setTimeout(function () {
this.setEvenHeights(); this.tray.style.height = '';
this.saveHeight(); this.setEvenHeights();
this.saveHeight();
if (this.isOpen) {
this.tray.style.height = this.collapseHeight + 'px'; if (this.isOpen) {
} this.tray.style.height = this.collapseHeight + 'px';
}
}.bind(this), 100);
}; };
NavTray.prototype.toggle = function () { NavTray.prototype.toggle = function () {

@ -19,6 +19,7 @@
"compile": "gulp scripts", "compile": "gulp scripts",
"css": "gulp css", "css": "gulp css",
"watch": "gulp watch", "watch": "gulp watch",
"serve": "gulp jekyll",
"test": "gulp test" "test": "gulp test"
}, },
"repository": { "repository": {

Loading…
Cancel
Save