From 391481ea4f15dada7958ee577f287707d6b0ede7 Mon Sep 17 00:00:00 2001 From: Glen Cheney Date: Mon, 18 Apr 2016 17:38:11 -0700 Subject: [PATCH] Update docs --- .npmignore | 1 - .travis.yml | 2 - CONTRIBUTING.md | 9 +- LICENSE | 2 +- _config.yml | 2 +- _config_dev.yml | 1 + _posts/2013-05-02-compound-filters.html | 19 ++- _posts/2014-04-09-requirejs.html | 2 +- .../{gallery.scss => _compound-filters.scss} | 61 ++++------ _scss/_type.scss | 3 +- _scss/style.scss | 1 + bower.json | 5 +- css/gallery.css | 109 ----------------- css/style.css | 113 +++++++++++++++++- gulp/tasks/css.js | 1 - index.html | 5 +- js/page.js | 16 +-- package.json | 1 + 18 files changed, 170 insertions(+), 183 deletions(-) rename _scss/{gallery.scss => _compound-filters.scss} (76%) delete mode 100644 css/gallery.css diff --git a/.npmignore b/.npmignore index 16767d5..0bb1232 100644 --- a/.npmignore +++ b/.npmignore @@ -14,7 +14,6 @@ temp css img js -Gruntfile.js gulpfile.js favicon.png index.html diff --git a/.travis.yml b/.travis.yml index c435569..24a8ab9 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,5 +1,3 @@ language: node_js node_js: - "5" -before_install: - - npm install -g gulp diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a0b9b49..a505fe4 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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. diff --git a/LICENSE b/LICENSE index a1f8cba..27cf78c 100644 --- a/LICENSE +++ b/LICENSE @@ -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 diff --git a/_config.yml b/_config.yml index cd9f6fd..78123ca 100644 --- a/_config.yml +++ b/_config.yml @@ -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 diff --git a/_config_dev.yml b/_config_dev.yml index 835171b..ca2ba51 100644 --- a/_config_dev.yml +++ b/_config_dev.yml @@ -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: "" diff --git a/_posts/2013-05-02-compound-filters.html b/_posts/2013-05-02-compound-filters.html index 1f57f1c..7a03be4 100644 --- a/_posts/2013-05-02-compound-filters.html +++ b/_posts/2013-05-02-compound-filters.html @@ -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 -
+
-
+
-
-
Colors
+
+
Colors
@@ -29,8 +28,8 @@ prism: true
-
-
Shapes
+
+
Shapes
@@ -49,11 +48,11 @@ prism: true
-
+
{% for shape in site.shapes %} -
+
-
+
diff --git a/_posts/2014-04-09-requirejs.html b/_posts/2014-04-09-requirejs.html index 9922987..4f6a977 100644 --- a/_posts/2014-04-09-requirejs.html +++ b/_posts/2014-04-09-requirejs.html @@ -15,7 +15,7 @@ pagejs: false

RequireJS!

- Shuffle uses a UMD wrapper, so it is compatible with AMD loaders like RequireJS. The UMD wrapper also allows Shuffle to work with CommonJS modules. You can take a peek at the config file used on this page. + Shuffle uses a UMD wrapper, so it is compatible with AMD loaders like RequireJS. The UMD wrapper also allows Shuffle to work with CommonJS modules. You can take a peek at the config file used on this page.

diff --git a/_scss/gallery.scss b/_scss/_compound-filters.scss similarity index 76% rename from _scss/gallery.scss rename to _scss/_compound-filters.scss index 62035c0..f9ffa04 100644 --- a/_scss/gallery.scss +++ b/_scss/_compound-filters.scss @@ -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); } } - diff --git a/_scss/_type.scss b/_scss/_type.scss index afbb5a2..15a66aa 100644 --- a/_scss/_type.scss +++ b/_scss/_type.scss @@ -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); } } diff --git a/_scss/style.scss b/_scss/style.scss index 9a4c148..10837aa 100644 --- a/_scss/style.scss +++ b/_scss/style.scss @@ -9,3 +9,4 @@ @import "faq"; @import "buttons"; @import "helpers"; +@import "compound-filters"; diff --git a/bower.json b/bower.json index 1f7f9a3..b64efee 100644 --- a/bower.json +++ b/bower.json @@ -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": {} + ] } diff --git a/css/gallery.css b/css/gallery.css deleted file mode 100644 index 4ab0d63..0000000 --- a/css/gallery.css +++ /dev/null @@ -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; } } diff --git a/css/style.css b/css/style.css index c80221a..4220299 100644 --- a/css/style.css +++ b/css/style.css @@ -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; } } diff --git a/gulp/tasks/css.js b/gulp/tasks/css.js index 90dfa09..92e5a4b 100644 --- a/gulp/tasks/css.js +++ b/gulp/tasks/css.js @@ -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', ]) diff --git a/index.html b/index.html index 5aa02aa..6e0c212 100644 --- a/index.html +++ b/index.html @@ -215,11 +215,12 @@ prism: true
  • Chrome
  • Firefox
    • -
  • IE 11+
    • +
  • Edge
    • +
  • IE 11
  • Safari
-

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 v3 of Shuffle.

+

Support for other browsers may be added with polyfills for ES5 features. If you require broader browser support, use the most recent v3 release of Shuffle.

diff --git a/js/page.js b/js/page.js index 78e43f8..3724c04 100644 --- a/js/page.js +++ b/js/page.js @@ -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 () { diff --git a/package.json b/package.json index 156e198..849198b 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "compile": "gulp scripts", "css": "gulp css", "watch": "gulp watch", + "serve": "gulp jekyll", "test": "gulp test" }, "repository": {