From a9e87c52d5f0b6ea18a6352a993a7a98a36f4662 Mon Sep 17 00:00:00 2001 From: Rasmus Andersson Date: Mon, 19 Feb 2018 00:42:47 -0800 Subject: website update --- docs/samples/bindings.js | 159 +++++++++++ docs/samples/icons/font-size.svg | 1 + docs/samples/icons/letter-spacing.svg | 1 + docs/samples/icons/style.svg | 1 + docs/samples/img/01.png | Bin 0 -> 68124 bytes docs/samples/img/01@2x.png | Bin 0 -> 149898 bytes docs/samples/img/02.png | Bin 0 -> 79159 bytes docs/samples/img/02@2x.png | Bin 0 -> 181054 bytes docs/samples/img/03.png | Bin 0 -> 36488 bytes docs/samples/img/03@2x.png | Bin 0 -> 80651 bytes docs/samples/img/04.png | Bin 0 -> 100465 bytes docs/samples/img/04@2x.png | Bin 0 -> 243885 bytes docs/samples/img/05.png | Bin 0 -> 107823 bytes docs/samples/img/05@2x.png | Bin 0 -> 258705 bytes docs/samples/img/06.png | Bin 0 -> 116168 bytes docs/samples/img/06@2x.png | Bin 0 -> 246671 bytes docs/samples/img/07.png | Bin 0 -> 52742 bytes docs/samples/img/07@2x.png | Bin 0 -> 139843 bytes docs/samples/img/08.png | Bin 0 -> 45965 bytes docs/samples/img/08@2x.png | Bin 0 -> 101436 bytes docs/samples/img/09.png | Bin 0 -> 29310 bytes docs/samples/img/09@2x.png | Bin 0 -> 68486 bytes docs/samples/img/10.png | Bin 0 -> 21445 bytes docs/samples/img/10@2x.png | Bin 0 -> 54103 bytes docs/samples/img/11.png | Bin 0 -> 15617 bytes docs/samples/img/11@2x.png | Bin 0 -> 37236 bytes docs/samples/img/12.png | Bin 0 -> 33250 bytes docs/samples/img/12@2x.png | Bin 0 -> 75344 bytes docs/samples/img/13.png | Bin 0 -> 38557 bytes docs/samples/img/13@2x.png | Bin 0 -> 85500 bytes docs/samples/img/14.png | Bin 0 -> 8227 bytes docs/samples/img/14@2x.png | Bin 0 -> 20122 bytes docs/samples/img/15.png | Bin 0 -> 31097 bytes docs/samples/img/15@2x.png | Bin 0 -> 78173 bytes docs/samples/img/dark-phone.jpg | Bin 0 -> 214941 bytes docs/samples/img/dark-phone@2x.jpg | Bin 0 -> 940043 bytes docs/samples/index.html | 488 ++++++++++++++++++++++++++++++++++ 37 files changed, 650 insertions(+) create mode 100644 docs/samples/bindings.js create mode 100755 docs/samples/icons/font-size.svg create mode 100755 docs/samples/icons/letter-spacing.svg create mode 100755 docs/samples/icons/style.svg create mode 100644 docs/samples/img/01.png create mode 100644 docs/samples/img/01@2x.png create mode 100644 docs/samples/img/02.png create mode 100644 docs/samples/img/02@2x.png create mode 100644 docs/samples/img/03.png create mode 100644 docs/samples/img/03@2x.png create mode 100644 docs/samples/img/04.png create mode 100644 docs/samples/img/04@2x.png create mode 100644 docs/samples/img/05.png create mode 100644 docs/samples/img/05@2x.png create mode 100644 docs/samples/img/06.png create mode 100644 docs/samples/img/06@2x.png create mode 100644 docs/samples/img/07.png create mode 100644 docs/samples/img/07@2x.png create mode 100644 docs/samples/img/08.png create mode 100644 docs/samples/img/08@2x.png create mode 100644 docs/samples/img/09.png create mode 100644 docs/samples/img/09@2x.png create mode 100644 docs/samples/img/10.png create mode 100644 docs/samples/img/10@2x.png create mode 100644 docs/samples/img/11.png create mode 100644 docs/samples/img/11@2x.png create mode 100644 docs/samples/img/12.png create mode 100644 docs/samples/img/12@2x.png create mode 100644 docs/samples/img/13.png create mode 100644 docs/samples/img/13@2x.png create mode 100644 docs/samples/img/14.png create mode 100644 docs/samples/img/14@2x.png create mode 100644 docs/samples/img/15.png create mode 100644 docs/samples/img/15@2x.png create mode 100755 docs/samples/img/dark-phone.jpg create mode 100755 docs/samples/img/dark-phone@2x.jpg create mode 100644 docs/samples/index.html (limited to 'docs/samples') diff --git a/docs/samples/bindings.js b/docs/samples/bindings.js new file mode 100644 index 000000000..cac29e417 --- /dev/null +++ b/docs/samples/bindings.js @@ -0,0 +1,159 @@ +// requires index.js + +function Binding(name){ + this.name = name + this.value = undefined + this.inputs = [] + this.listeners = [] + this.formatter = undefined +} + + +Binding.prototype.addInput = function(el) { + var binding = this + var _onInput = function(ev) { + binding.setValue(el.value, el) + } + var input = { + el: el, + _onInput: _onInput, + } + this.inputs.push(input) + if (this.value === undefined) { + this.value = el.value + } else { + input.el.value = this.value + } + el.addEventListener('input', _onInput, {passive:true}) +} + + +// listener signature: +// function(nextval string, prevval string, b Binding)void +// +Binding.prototype.addListener = function(listener) { + this.listeners.push(listener) +} + + +Binding.prototype.setValue = function(nextval, origin) { + // console.log('Binding.setValue nextval:', nextval, {origin}) + var prevval = this.value + if (this.formatter) { + nextval = this.formatter(nextval, prevval) + } + if (this.value === nextval) { + return + } + var binding = this + this.value = nextval + this.inputs.forEach(function(input) { + if (input.el !== origin) { + input.el.value = nextval + } + }) + this.listeners.forEach(function(listener) { + listener(nextval, prevval, this) + }) +} + + +function Bindings() { + this.bindings = {} +} + +Bindings.prototype.getBinding = function(name, input) { + var binding = this.bindings[name] + if (!binding) { + binding = new Binding(name) + this.bindings[name] = binding + } + return binding +} + +Bindings.prototype.bindInput = function(name, input) { + // console.log('bindInput', name, input) + var binding = this.getBinding(name) + binding.addInput(input) +} + +Bindings.prototype.bindAllInputs = function(queryOrInputElementList) { + var bindings = this + + var inputs = ( + typeof queryOrInputElementList == 'string' ? $$(queryOrInputElementList) : + queryOrInputElementList + ) + + inputs.forEach(function(input) { + var bindingName = input.dataset.binding + if (bindingName) { + bindings.bindInput(bindingName, input) + } + }) +} + +// listener signature: +// function(nextval string, prevval string, b Binding)void +// +Bindings.prototype.addListener = function(name, listener) { + var binding = this.getBinding(name) + binding.addListener(listener) +} + +Bindings.prototype.setValue = function(name, value) { + var binding = this.getBinding(name) + binding.setValue(value) +} + + +Bindings.prototype.value = function(name, defaultValue) { + var binding = this.bindings[name] + return binding && binding.value !== undefined ? binding.value : defaultValue +} + + +function fmt_float(nextval, prevval) { + var n = parseFloat(nextval) + return isNaN(n) ? 0 : n +} + +function fmt_int(nextval, prevval) { + var n = parseInt(nextval) + return isNaN(n) ? 0 : n +} + + +// configure is convenience function for setting value, adding a +// listener and associating a formatter with a binding. +// If a listener and a value is provided, the value is set and the listener +// is immediately invoked. +// +Bindings.prototype.configure = function(name, value, formatter, listener) { + var binding = this.getBinding(name) + if (listener) { + binding.addListener(listener) + } + if (value !== undefined && value !== null) { + binding.setValue(value) + } + if (formatter) { + if (typeof formatter == 'string') { + switch (formatter) { + case 'number': + case 'float': + formatter = fmt_float; break; + + case 'int': + case 'integer': + formatter = fmt_int; break; + + default: + throw new Error('unknown formatter "' + formatter + '"') + } + } else if (typeof formatter != 'function') { + throw new Error('formatter should be a string or function') + } + binding.formatter = formatter + } +} diff --git a/docs/samples/icons/font-size.svg b/docs/samples/icons/font-size.svg new file mode 100755 index 000000000..515e52a97 --- /dev/null +++ b/docs/samples/icons/font-size.svg @@ -0,0 +1 @@ +font-sizeCreated using Figma \ No newline at end of file diff --git a/docs/samples/icons/letter-spacing.svg b/docs/samples/icons/letter-spacing.svg new file mode 100755 index 000000000..ece72a484 --- /dev/null +++ b/docs/samples/icons/letter-spacing.svg @@ -0,0 +1 @@ +letter-spacingCreated using Figma \ No newline at end of file diff --git a/docs/samples/icons/style.svg b/docs/samples/icons/style.svg new file mode 100755 index 000000000..f199b80d0 --- /dev/null +++ b/docs/samples/icons/style.svg @@ -0,0 +1 @@ +styleCreated using Figma \ No newline at end of file diff --git a/docs/samples/img/01.png b/docs/samples/img/01.png new file mode 100644 index 000000000..cbe2341d5 Binary files /dev/null and b/docs/samples/img/01.png differ diff --git a/docs/samples/img/01@2x.png b/docs/samples/img/01@2x.png new file mode 100644 index 000000000..f5b12f4f7 Binary files /dev/null and b/docs/samples/img/01@2x.png differ diff --git a/docs/samples/img/02.png b/docs/samples/img/02.png new file mode 100644 index 000000000..f9937518e Binary files /dev/null and b/docs/samples/img/02.png differ diff --git a/docs/samples/img/02@2x.png b/docs/samples/img/02@2x.png new file mode 100644 index 000000000..dda316e90 Binary files /dev/null and b/docs/samples/img/02@2x.png differ diff --git a/docs/samples/img/03.png b/docs/samples/img/03.png new file mode 100644 index 000000000..dcc0d1262 Binary files /dev/null and b/docs/samples/img/03.png differ diff --git a/docs/samples/img/03@2x.png b/docs/samples/img/03@2x.png new file mode 100644 index 000000000..e3de1d31e Binary files /dev/null and b/docs/samples/img/03@2x.png differ diff --git a/docs/samples/img/04.png b/docs/samples/img/04.png new file mode 100644 index 000000000..7aa6ec833 Binary files /dev/null and b/docs/samples/img/04.png differ diff --git a/docs/samples/img/04@2x.png b/docs/samples/img/04@2x.png new file mode 100644 index 000000000..9fcf20ced Binary files /dev/null and b/docs/samples/img/04@2x.png differ diff --git a/docs/samples/img/05.png b/docs/samples/img/05.png new file mode 100644 index 000000000..ec501fd74 Binary files /dev/null and b/docs/samples/img/05.png differ diff --git a/docs/samples/img/05@2x.png b/docs/samples/img/05@2x.png new file mode 100644 index 000000000..31a8a2843 Binary files /dev/null and b/docs/samples/img/05@2x.png differ diff --git a/docs/samples/img/06.png b/docs/samples/img/06.png new file mode 100644 index 000000000..eb290e43e Binary files /dev/null and b/docs/samples/img/06.png differ diff --git a/docs/samples/img/06@2x.png b/docs/samples/img/06@2x.png new file mode 100644 index 000000000..c0150fe3b Binary files /dev/null and b/docs/samples/img/06@2x.png differ diff --git a/docs/samples/img/07.png b/docs/samples/img/07.png new file mode 100644 index 000000000..6414b3255 Binary files /dev/null and b/docs/samples/img/07.png differ diff --git a/docs/samples/img/07@2x.png b/docs/samples/img/07@2x.png new file mode 100644 index 000000000..c6093d21c Binary files /dev/null and b/docs/samples/img/07@2x.png differ diff --git a/docs/samples/img/08.png b/docs/samples/img/08.png new file mode 100644 index 000000000..aef9dafab Binary files /dev/null and b/docs/samples/img/08.png differ diff --git a/docs/samples/img/08@2x.png b/docs/samples/img/08@2x.png new file mode 100644 index 000000000..a53902172 Binary files /dev/null and b/docs/samples/img/08@2x.png differ diff --git a/docs/samples/img/09.png b/docs/samples/img/09.png new file mode 100644 index 000000000..4527ed029 Binary files /dev/null and b/docs/samples/img/09.png differ diff --git a/docs/samples/img/09@2x.png b/docs/samples/img/09@2x.png new file mode 100644 index 000000000..d6f255ae0 Binary files /dev/null and b/docs/samples/img/09@2x.png differ diff --git a/docs/samples/img/10.png b/docs/samples/img/10.png new file mode 100644 index 000000000..091480854 Binary files /dev/null and b/docs/samples/img/10.png differ diff --git a/docs/samples/img/10@2x.png b/docs/samples/img/10@2x.png new file mode 100644 index 000000000..6c1177e42 Binary files /dev/null and b/docs/samples/img/10@2x.png differ diff --git a/docs/samples/img/11.png b/docs/samples/img/11.png new file mode 100644 index 000000000..485248dfe Binary files /dev/null and b/docs/samples/img/11.png differ diff --git a/docs/samples/img/11@2x.png b/docs/samples/img/11@2x.png new file mode 100644 index 000000000..55e91d951 Binary files /dev/null and b/docs/samples/img/11@2x.png differ diff --git a/docs/samples/img/12.png b/docs/samples/img/12.png new file mode 100644 index 000000000..c55fc5306 Binary files /dev/null and b/docs/samples/img/12.png differ diff --git a/docs/samples/img/12@2x.png b/docs/samples/img/12@2x.png new file mode 100644 index 000000000..a89353532 Binary files /dev/null and b/docs/samples/img/12@2x.png differ diff --git a/docs/samples/img/13.png b/docs/samples/img/13.png new file mode 100644 index 000000000..8ec89ddd5 Binary files /dev/null and b/docs/samples/img/13.png differ diff --git a/docs/samples/img/13@2x.png b/docs/samples/img/13@2x.png new file mode 100644 index 000000000..881434123 Binary files /dev/null and b/docs/samples/img/13@2x.png differ diff --git a/docs/samples/img/14.png b/docs/samples/img/14.png new file mode 100644 index 000000000..7fe704743 Binary files /dev/null and b/docs/samples/img/14.png differ diff --git a/docs/samples/img/14@2x.png b/docs/samples/img/14@2x.png new file mode 100644 index 000000000..eec32064c Binary files /dev/null and b/docs/samples/img/14@2x.png differ diff --git a/docs/samples/img/15.png b/docs/samples/img/15.png new file mode 100644 index 000000000..387ed25a2 Binary files /dev/null and b/docs/samples/img/15.png differ diff --git a/docs/samples/img/15@2x.png b/docs/samples/img/15@2x.png new file mode 100644 index 000000000..39b73926b Binary files /dev/null and b/docs/samples/img/15@2x.png differ diff --git a/docs/samples/img/dark-phone.jpg b/docs/samples/img/dark-phone.jpg new file mode 100755 index 000000000..287429253 Binary files /dev/null and b/docs/samples/img/dark-phone.jpg differ diff --git a/docs/samples/img/dark-phone@2x.jpg b/docs/samples/img/dark-phone@2x.jpg new file mode 100755 index 000000000..480a539ae Binary files /dev/null and b/docs/samples/img/dark-phone@2x.jpg differ diff --git a/docs/samples/index.html b/docs/samples/index.html new file mode 100644 index 000000000..bd30c0c6e --- /dev/null +++ b/docs/samples/index.html @@ -0,0 +1,488 @@ + + + + + Inter UI font family + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+
+ +
+
+ + +
+
+ + + +
+
+ + + +
+ +
+ + + Fabulous typography encountering spring + + + + The user interface (UI), in the industrial design field of human-computer + interaction, is the space where interactions between humans and machines occur. + + + +

Fire Island Beach is a barrier of sand, stretching for twenty miles +along the south coast of Long Island, and separating the Great South Bay +from the Atlantic ocean. +

+To reach it, you must make a sail of from three to seven miles, and once +upon it, you find it a wild, desolate, solitary spot, wind-searched and +surf-pounded. +

+Its inner shore is covered with a growth of tide-wet sedge, with here +and there a spot where dry meadow comes down to make a landing-place. +

+The outline of this inner shore is most irregular, curving and bending +in and out and back upon itself, making coves and points and creeks and +channels, and often pushing out in flats with not water enough on them +at low tide to wet your ankles. +

+A third of the distance across the Beach, the meadow ends and sand +begins. This slopes gradually up for another third of the distance, to +the foot of the sand hills, which seem tumbled into their places by some +mighty power, sometimes three tiers of them deep, sometimes two, and +sometimes only one. +

+These sand hills are the most striking features of the Beach. The +biggest of them are not more than sixty feet high, yet so hard a feat is +it to climb to the top, and so extended is the view below you—on one +side the wide Bay, on the other, the ocean stretching its restless +surface to the horizon—that you feel yourself upon an elevation tenfold +as high. +

+Through these hills the wind makes a great galloping, whirling out deep +bowl-shape hollows among them, and piling the shifting sand upon their +summits. Now and then you will notice a hill with its shoulder knocked +off by the wind, and a ton of sand gone no one can tell where. In every +storm their contour changes, and yet their general formation is so +similar at all times that the change is seldom thought of. A coarse +spear-like grass finds a sparse growth upon them, and does what it can +to hold the sand in place; but it has a hard time of it, as its blades +buried to their tips or its naked roots often testify. +

+But there is one part of this Beach that is ever much the same. It is a +broad, shelving strip of sand between the hills and the sea, where the +tide rises and falls, pounding and grinding, year in and year out—the +play-ground and the battle-ground of the surf. +

+On a summer’s day, I have seen this surf so low and quiet that one could +launch a sharpie upon it, single-handed, and come ashore again without +shipping a quart of water. At other times it is a terror to look at—a +steady break of waves upon the outer bar, with row after row coming in, +rearing and plunging as they strike the shore. In such a sea there is no +launching yawl or surf-boat, and no coming ashore. +

+When the tide is on the right moon and the wind has blown a gale from +the southeast, the strand is entirely submerged, and people upon the +main shore three miles away can see the surf breaking over the Beach +hills. +

+Such a riot of sea and wind strews the whole extent of beach with +whatever has been lost or thrown overboard, or torn out of sunken ships. +Many a man has made a good week’s work in a single day by what he has +found while walking along the Beach when the surf was down. +

+“The Captain” knew all this and had patrolled that Beach scores of +times. +

+Ten years had passed since the first time which laid the habit of +wandering along the surf-shore apparently in search of whatever the sea +had cast up. Sometimes a spar, sometimes sheets of copper torn from a +wreck and carried by a high surf far along the strand, sometimes a +vessel’s gilded name, at other times only scattered drift-wood were the +rewards of these lonely walks. +

+ +
+ +

+ + + + + + + + + + + + + + + + + +

+

+ Open these samples in Figma +

+
+ + + + + + -- cgit v1.2.3