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
img
js
Gruntfile.js
gulpfile.js
favicon.png
index.html

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

@ -1,12 +1,11 @@
## Running locally
This project uses [Jekyll](http://jekyllrb.com/).
* Head over to [their quickstart guide](http://jekyllrb.com/docs/quickstart/) to setup jekyll.
This project uses [Jekyll](https://jekyllrb.com/).
* Head over to [their quickstart guide](https://jekyllrb.com/docs/quickstart/) to setup jekyll.
* Install npm dependencies `npm install`.
* Run `grunt serve` to tell Jekyll to watch for changes.
* To watch for and compile changes to scss and shuffle src js files, run `grunt watch` in a separate tab.
* Run `npm run watch` to rebuild, start the jekyll server, and watch for changes.
* go to `http://localhost:4000` to see it.
## 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.

@ -1,6 +1,6 @@
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
of this software and associated documentation files (the "Software"), to deal

@ -24,7 +24,7 @@ permalink: /:title
environment: production
# 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
baseurl: /Shuffle

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

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

@ -15,7 +15,7 @@ pagejs: false
<div class="col-12@sm">
<h2>RequireJS!</h2>
<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>
</div>
</div>

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

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

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

@ -31,7 +31,6 @@
"js",
"node_modules",
"bower_components",
"Gruntfile.js",
"gulp",
"gulpfile.js",
"favicon.png",
@ -41,7 +40,5 @@
"tests",
"webpack.config.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 {
content: '';
position: absolute;
bottom: 4px;
bottom: 0.1em;
left: 0;
z-index: -1;
width: 100%;
height: 2px;
background-color: #2ECC71; }
background-color: #2ECC71;
-webkit-transform: translateZ(0);
transform: translateZ(0); }
h3 {
margin: .6667em 0 0.5em;
@ -1367,3 +1369,110 @@ button {
.table-center {
display: table-cell;
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() {
return gulp.src([
'./_scss/gallery.scss',
'./_scss/shuffle-styles.scss',
'./_scss/style.scss',
])

@ -215,11 +215,12 @@ prism: true
<ul>
<li>Chrome</li>
<li>Firefox</li>
<li>IE 11+</li>
<li>Edge</li>
<li>IE 11</li>
<li>Safari</li>
</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>

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

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

Loading…
Cancel
Save