Update type styles. Change homepage <select> to radio buttons.

pull/160/head
Glen Cheney 7 years ago
parent 746d03aab4
commit 14a416c121

@ -1,4 +1,5 @@
<h2>Changes<a href="#changelog"></a></h2>
<p>For more detailed changes, visit <a href="https://github.com/Vestride/Shuffle/releases">the latest releases</a> on GitHub.</p>
<ul>
<li><code>v5.0.0</code> x/x/17 - Change global export from <code>shuffle</code> to <code>Shuffle</code>. Remove bower support. Expect ES6 environment. Make Shuffle instances Event Emitters instead of dispatching <code>CustomEvent</code>.</li>
<li><code>v4.2.0</code> 5/10/17 - Replace <code>webpack</code> build with <code>rollup</code>. Replace <code>jshint</code> and <code>jscs</code> with <code>eslint</code>. Add <code>filterMode</code> option.</li>

@ -1,5 +1,5 @@
<h2>Events<a href="#events"></a></h2>
<p>Shuffle is a subclass of <a href="https://www.npmjs.com/package/tiny-emitter">TinyEmitter</a>. It emits an event when a layout happens and when elements are removed. The event names are <code class="language-javascript">Shuffle.EventType.LAYOUT</code> and <code class="language-javascript">Shuffle.EventType.REMOVED</code>.</p>
<p>Shuffle is a subclass of <a href="https://www.npmjs.com/package/tiny-emitter">TinyEmitter</a>. It emits an event when a layout happens and when elements are removed. The event names are <code>Shuffle.EventType.LAYOUT</code> and <code>Shuffle.EventType.REMOVED</code>.</p>
<h3>Get notified when a layout happens</h3>
<div class="code-block">

@ -1,18 +1,14 @@
<div class="row">
<div class="col-12@sm">
<h2>Install<a href="#install"></a></h2>
</div>
<div class="col-12@sm">
<div class="code-block">
<pre><code class="language">npm install shufflejs</code></pre>
</div>
</div>
<div class="col-6@sm">
<nav>
<a href="http://codepen.io/pen?template=qrjOpX" target="_blank" rel="noopener">Start a CodePen with a Shuffle template</a>
<a href="https://github.com/Vestride/Shuffle/releases">See the latest releases</a>
</nav>
<div class="col-12@sm">
<h2>Install<a href="#install"></a></h2>
</div>
<div class="col-12@sm">
<div class="code-block">
<pre><code class="language-bash">npm install shufflejs</code></pre>
</div>
</div>
<div class="row">
<div class="col-6@sm">
<nav>
<a href="http://codepen.io/pen?template=qrjOpX" target="_blank" rel="noopener">Start a CodePen with a Shuffle template</a>
<a href="https://github.com/Vestride/Shuffle/releases">See the latest releases</a>
</nav>
</div>

@ -46,12 +46,12 @@ Demo.prototype._handleSortChange = function (evt) {
};</code>
</div>
<p>The <code class="language-javascript">options</code> object can contain three properties:</p>
<p>The <code>options</code> object can contain three properties:</p>
<ul>
<li><code class="language-javascript">reverse</code>: a boolean which will reverse the resulting order.</li>
<li><code class="language-javascript">by</code>: a function with an element as the parameter. Above, we&rsquo;re returning the value of the <code class="language-markup">data-date-created</code> or <code class="language-markup">data-title</code> attribute.</li>
<li><code class="language-javascript">randomize</code>: Make the order random.</li>
<li><code>reverse</code>: a boolean which will reverse the resulting order.</li>
<li><code>by</code>: a function with an element as the parameter. Above, we&rsquo;re returning the value of the <code>data-date-created</code> or <code>data-title</code> attribute.</li>
<li><code>randomize</code>: Make the order random.</li>
</ul>
<p>Returning <code class="language-javascript">undefined</code> from the <code class="language-javascript">by</code> function will reset the order to DOM order.</p>
<p>Returning <code>undefined</code> from the <code>by</code> function will reset the order to DOM order.</p>
<p>Calling sort with an empty object will reset the elements to DOM order.</p>
<p class="demo-link-container">Check out the <a href="#demo">demo</a>.</p>

@ -10,7 +10,7 @@
</div>
</header>
{% endif %}
<main role="main" id="main" class="language-markup">
<main role="main" id="main">
{{ content }}
</main>
{% include scripts.html %}

@ -19,7 +19,7 @@ prism: true
<div class="col-6@sm">
<div class="filter-group filter-group--compound js-colors">
<h5 class="filter-group__label filter-group__label--compound">Colors</h5>
<p class="filter-label">Colors</p>
<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,7 +29,7 @@ prism: true
<div class="col-6@sm">
<div class="filter-group filter-group--compound js-shapes">
<h5 class="filter-group__label filter-group__label--compound">Shapes</h5>
<p class="filter-label">Shapes</p>
<span class="ib">
<input type="checkbox" value="circle" id="cb-circle"> <label for="cb-circle">Circle</label>
</span>

@ -83,9 +83,9 @@ prism: true
<div class="row">
<div class="col-12@sm">
<div id="sorter">
<p class="filter__label">Sort</p>
<div class="btn-group">
<div>
<p class="filter-label">Sort</p>
<div class="btn-group" id="sorter">
<label class="btn active">
<input type="radio" name="sort-value" value="dom" /> DOM Order
</label>
@ -100,7 +100,7 @@ prism: true
<div>
<br>
<p class="filter__label">Actions</p>
<p class="filter-label">Actions</p>
<div class="btn-group">
<button class="btn" id="prepend">Prepend 5 Boxes</button>
<button class="btn" id="append">Append 5 Boxes</button>

@ -15,7 +15,7 @@ extraJS: [ "faq.js" ]
<section class="container search-section">
<div class="row">
<div class="col-6@sm">
<input type="search" placeholder="Search..." aria-label="Search frequently asked questions" class="textfield" id="search" />
<input type="search" placeholder="Search..." aria-label="Search frequently asked questions" class="textfield textfield--large" id="search" />
</div>
</div>
</section>

@ -49,7 +49,7 @@ extraJS: [ "demos/padding-grid.js" ]
<div class="col-xs-12">
<h2>Bootstrap 3 Grid</h2>
<p>
On this page, I have added the minified bootstrap css file from the <a href="https://www.bootstrapcdn.com/">Bootstrap CDN</a> (which is also why some of the site-styles are being overriden).
On this page, I have added the minified bootstrap css file from the <a href="https://www.bootstrapcdn.com/">Bootstrap CDN</a> (which is also why some of the site-styles are being overridden).
<br>
The <a href="http://getbootstrap.com/css/#grid">Bootstrap 3 grid</a> system uses padding for gutters instead of margins. This page demonstrates one way to use Shuffle with these types of grids, as well as showing you don't have to use the full width of the page with Shuffle.
</p>

@ -28,14 +28,15 @@
.btn {
display: inline-block;
padding: .75em .8em;
-webkit-appearance: none;
text-align: center;
border-radius: 3px;
border: 1px solid $gray20;
color: $gray20;
font-size: 1rem;
background-color: rgba($gray20, 0);
transition: .2s ease-out;
cursor: pointer;
-webkit-appearance: none;
&:hover {
color: white;

@ -37,6 +37,7 @@
}
.demo-list .figure-wrap figcaption {
height: 2em;
margin-top: .5em;
margin-bottom: 1em;
}

@ -1,6 +1,7 @@
.site-nav {
padding: 10px 0;
border-bottom: 1px solid $gray90;
margin-bottom: 28px;
background: $gray95;
}

@ -32,8 +32,8 @@ $black: #000;
$gray10: $midnightBlue;
$gray20: $wet-asphalt;
$gray30: #5D6D77;
$gray40: $concrete;
$gray50: $asbestos;
$gray60: $concrete;
$gray80: $silver;
$gray90: #E1E5E6;
$gray95: $clouds;

@ -2,20 +2,20 @@
-webkit-appearance: searchfield;
box-sizing: border-box;
width: 100%;
border: 2px solid $gray40;
border: 2px solid $gray60;
border-radius: 4px;
padding: 0.5em;
font-size: 1.125em;
color: $gray40;
font-size: 1rem;
color: $gray20;
transition: .15s;
&::placeholder {
color: $gray40;
color: $gray60;
transition: .15s;
}
&:hover {
outline: 0;
outline-width: 0;
color: $gray30;
border-color: $gray30;
@ -25,12 +25,16 @@
}
&:focus {
outline: 0;
color: $nephritis;
border-color: $nephritis;
outline-width: 0;
// color: $gray20;
border-color: $gray20;
&::placeholder {
color: $nephritis;
color: $gray20;
}
}
}
.textfield--large {
font-size: 1.125em;
}

@ -36,17 +36,15 @@ li {
line-height: 1.4;
}
li + li {
margin-top: 4px;
}
nav > a {
display: block;
margin: 5px 0;
}
.breathable-list li {
line-height: 1.7;
}
#be-social {
h2 {
margin-bottom: 32px;
}
#demos {
margin-top: 1em;
}

@ -81,8 +81,10 @@
.code-block {
position: relative;
overflow: visible;
margin-left: calc(-3.5vw - #{($grid-gutter-width / 2)});
margin-top: 0.5em;
margin-right: calc(-3.5vw - #{($grid-gutter-width / 2)});
margin-bottom: 0.5em;
margin-left: calc(-3.5vw - #{($grid-gutter-width / 2)});
pre {
position: relative;
@ -92,7 +94,7 @@
padding-bottom: 1em;
padding-left: calc(3.5vw + #{($grid-gutter-width / 2)});
padding-right: calc(3.5vw + #{($grid-gutter-width / 2)});
margin: .5em 0;
margin: 0;
}
}

@ -31,77 +31,76 @@ h6 {
font-weight: 400;
}
// Headers
h1 {
margin: 0.5em 0 0.25em;
margin: 3vw 0;
font-size: 10vw;
font-weight: 300;
font-size: 3.5em;
line-height: 1;
}
h2 {
position: relative;
font-size: 2.5em;
margin-bottom: 18px;
// Bottom border BEHIND the descenders!
&::after {
content: '';
position: absolute;
bottom: 0.1em;
left: 0;
z-index: -1;
width: 100%;
height: 2px;
background-color: $emerald;
transform: translateZ(0);
}
font-size: 7vw;
margin: 3vw 0;
}
h3 {
margin: .6667em 0 0.5em;
font-size: 1.5em;
font-size: 6vw;
margin: 2vw 0;
}
h4 {
font-size: 1.25em;
}
@include breakpoint(sm, true) {
p {
margin: 1em 0;
line-height: 1.4;
}
.intro-text {
margin: 0.7em 0;
font-size: 1.125em;
}
@include breakpoint(sm) {
h1 {
font-size: 8vw;
margin: 3vw 0;
margin: 0.5em 0 0.25em;
font-size: 3.5em;
}
h2 {
font-size: 6vw;
margin: 2vw 0;
margin: 0.45em 0;
font-size: 2.5em;
}
}
h1 > a,
h2 > a,
h3 > a {
display: none;
}
h3 {
margin: 0.8em 0 0.5em;
font-size: 1.5em;
}
h1:hover > a,
h2:hover > a,
h3:hover > a {
position: absolute;
display: block;
top: 0;
left: -40px;
height: 50px;
width: 50px;
background: url('../img/link.svg') no-repeat;
overflow: hidden;
text-indent: -999em;
}
h1 > a,
h2 > a,
h3 > a {
display: none;
}
.intro-text {
margin: 0.7em 0;
font-size: 1.25em;
h1:hover > a,
h2:hover > a,
h3:hover > a {
position: absolute;
display: inline-block;
top: 0;
height: 50px;
width: 50px;
background: url('../img/link.svg') no-repeat;
overflow: hidden;
text-indent: -999em;
}
.intro-text {
font-size: 1.25em;
}
}
.unstyled {
@ -110,19 +109,20 @@ h3:hover > a {
margin: 0;
}
:not(pre) > code {
code:not([class*="language"]) {
padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
color: get-color(black);
background-color: rgba(0,0,0,0.04);
color: $gray10;
background-color: rgba(27,31,35,0.05);
border-radius: 3px;
font-family: Menlo, Consolas, "Liberation Mono", Courier, monospace;
}
&::before,
&::after {
letter-spacing: -0.2em;
content: "\00a0";
}
code:not([class*="language"])::before,
code:not([class*="language"])::after {
content: "\00a0";
letter-spacing: -.2em;
}

@ -24,10 +24,6 @@
}
}
.filter-group__label--compound {
margin: 0 0 5px;
}
.shape-shuffle-container {
position: relative;
overflow: hidden;

@ -1,15 +1,12 @@
// Filters
.filter__label {
color: $gray80;
margin: 0 0 3px;
.filter-label {
display: block;
margin-top: 0;
margin-bottom: 4px;
color: $gray60;
}
.filter__search {
margin: 5px 0;
}
.sort-options {
margin-top: 10px;
.filters-group {
margin-bottom: 4px;
}

@ -1,2 +1,3 @@
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}
/* search cancel styles removed */
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

File diff suppressed because one or more lines are too long

@ -23,31 +23,40 @@ prism: true
</div>
</div>
<div class="container filter">
<div class="container">
<div class="row">
<div class="col-12@sm">
<input class="textfield filter__search js-shuffle-search" type="search" placeholder="Search..." />
<div class="col-4@sm col-3@md filters-group">
<label for="filters-search-input" class="filter-label">Search</label>
<input class="textfield filter__search js-shuffle-search" type="search" id="filters-search-input" />
</div>
</div>
<div class="row">
<div class="col-9@sm">
<p class="filter__label">Filter</p>
<div class="filter-options btn-group">
<button class="btn btn--warning" data-group="wallpaper">Wallpapers</button>
<button class="btn btn--warning" data-group="graphics">Graphic Design</button>
<button class="btn btn--warning" data-group="photography">Photos</button>
<button class="btn btn--warning" data-group="3d">3D Renders</button>
<div class="col-12@sm col-9@md filters-group">
<p class="filter-label">Filter</p>
<div class="btn-group filter-options">
<button class="btn btn--primary" data-group="wallpaper">Wallpapers</button>
<button class="btn btn--primary" data-group="graphics">Graphic Design</button>
<button class="btn btn--primary" data-group="photography">Photos</button>
<button class="btn btn--primary" data-group="3d">3D Renders</button>
</div>
</div>
<div class="col-3@sm">
<div class="m-nofloat pull-right">
<p class="filter__label">Sort</p>
<select class="sort-options">
<option value>Default</option>
<option value="title">Title</option>
<option value="date-created">Date Created</option>
</select>
<div class="col-12@sm col-3@md filters-group">
<p class="filter-label">Sort</p>
<div class="btn-group sort-options">
<label class="btn active">
<input type="radio" name="sort-value" value="dom" /> Default
</label>
<label class="btn">
<input type="radio" name="sort-value" value="title" /> Title
</label>
<label class="btn">
<input type="radio" name="sort-value" value="date-created" /> Date Created
</label>
</div>
</div>
</div>

@ -175,8 +175,7 @@ Demo.prototype.onRandomize = function () {
Demo.prototype.onSortChange = function (evt) {
// Add and remove `active` class from buttons.
var wrapper = evt.currentTarget;
var buttons = Array.from(wrapper.querySelector('.btn-group').children);
var buttons = Array.from(evt.currentTarget.children);
buttons.forEach(function (button) {
if (button.querySelector('input').value === evt.target.value) {
button.classList.add('active');

@ -105,16 +105,28 @@ Demo.prototype._removeActiveClassFromChildren = function (parent) {
};
Demo.prototype.addSorting = function () {
var menu = document.querySelector('.sort-options');
var buttonGroup = document.querySelector('.sort-options');
if (!menu) {
if (!buttonGroup) {
return;
}
menu.addEventListener('change', this._handleSortChange.bind(this));
buttonGroup.addEventListener('change', this._handleSortChange.bind(this));
};
Demo.prototype._handleSortChange = function (evt) {
// Add and remove `active` class from buttons.
var wrapper = evt.currentTarget;
var buttons = Array.from(evt.currentTarget.children);
buttons.forEach(function (button) {
if (button.querySelector('input').value === evt.target.value) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
});
// Create the sort options to give to Shuffle.
var value = evt.target.value;
var options = {};

Loading…
Cancel
Save