diff options
author | Rasmus Andersson <rasmus@notion.se> | 2018-02-19 11:42:47 +0300 |
---|---|---|
committer | Rasmus Andersson <rasmus@notion.se> | 2018-02-19 11:42:47 +0300 |
commit | a9e87c52d5f0b6ea18a6352a993a7a98a36f4662 (patch) | |
tree | e784480bf5f6f959ae5722e604d806be06525b16 /docs/samples | |
parent | 360916d1ec97df6a92b0a41f6a12f42a15fe0cab (diff) | |
download | inter-a9e87c52d5f0b6ea18a6352a993a7a98a36f4662.tar.xz |
website update
Diffstat (limited to 'docs/samples')
-rw-r--r-- | docs/samples/bindings.js | 159 | ||||
-rwxr-xr-x | docs/samples/icons/font-size.svg | 1 | ||||
-rwxr-xr-x | docs/samples/icons/letter-spacing.svg | 1 | ||||
-rwxr-xr-x | docs/samples/icons/style.svg | 1 | ||||
-rw-r--r-- | docs/samples/img/01.png | bin | 0 -> 68124 bytes | |||
-rw-r--r-- | docs/samples/img/01@2x.png | bin | 0 -> 149898 bytes | |||
-rw-r--r-- | docs/samples/img/02.png | bin | 0 -> 79159 bytes | |||
-rw-r--r-- | docs/samples/img/02@2x.png | bin | 0 -> 181054 bytes | |||
-rw-r--r-- | docs/samples/img/03.png | bin | 0 -> 36488 bytes | |||
-rw-r--r-- | docs/samples/img/03@2x.png | bin | 0 -> 80651 bytes | |||
-rw-r--r-- | docs/samples/img/04.png | bin | 0 -> 100465 bytes | |||
-rw-r--r-- | docs/samples/img/04@2x.png | bin | 0 -> 243885 bytes | |||
-rw-r--r-- | docs/samples/img/05.png | bin | 0 -> 107823 bytes | |||
-rw-r--r-- | docs/samples/img/05@2x.png | bin | 0 -> 258705 bytes | |||
-rw-r--r-- | docs/samples/img/06.png | bin | 0 -> 116168 bytes | |||
-rw-r--r-- | docs/samples/img/06@2x.png | bin | 0 -> 246671 bytes | |||
-rw-r--r-- | docs/samples/img/07.png | bin | 0 -> 52742 bytes | |||
-rw-r--r-- | docs/samples/img/07@2x.png | bin | 0 -> 139843 bytes | |||
-rw-r--r-- | docs/samples/img/08.png | bin | 0 -> 45965 bytes | |||
-rw-r--r-- | docs/samples/img/08@2x.png | bin | 0 -> 101436 bytes | |||
-rw-r--r-- | docs/samples/img/09.png | bin | 0 -> 29310 bytes | |||
-rw-r--r-- | docs/samples/img/09@2x.png | bin | 0 -> 68486 bytes | |||
-rw-r--r-- | docs/samples/img/10.png | bin | 0 -> 21445 bytes | |||
-rw-r--r-- | docs/samples/img/10@2x.png | bin | 0 -> 54103 bytes | |||
-rw-r--r-- | docs/samples/img/11.png | bin | 0 -> 15617 bytes | |||
-rw-r--r-- | docs/samples/img/11@2x.png | bin | 0 -> 37236 bytes | |||
-rw-r--r-- | docs/samples/img/12.png | bin | 0 -> 33250 bytes | |||
-rw-r--r-- | docs/samples/img/12@2x.png | bin | 0 -> 75344 bytes | |||
-rw-r--r-- | docs/samples/img/13.png | bin | 0 -> 38557 bytes | |||
-rw-r--r-- | docs/samples/img/13@2x.png | bin | 0 -> 85500 bytes | |||
-rw-r--r-- | docs/samples/img/14.png | bin | 0 -> 8227 bytes | |||
-rw-r--r-- | docs/samples/img/14@2x.png | bin | 0 -> 20122 bytes | |||
-rw-r--r-- | docs/samples/img/15.png | bin | 0 -> 31097 bytes | |||
-rw-r--r-- | docs/samples/img/15@2x.png | bin | 0 -> 78173 bytes | |||
-rwxr-xr-x | docs/samples/img/dark-phone.jpg | bin | 0 -> 214941 bytes | |||
-rwxr-xr-x | docs/samples/img/dark-phone@2x.jpg | bin | 0 -> 940043 bytes | |||
-rw-r--r-- | docs/samples/index.html | 488 |
37 files changed, 650 insertions, 0 deletions
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 @@ +<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>font-size</title><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(1.191 6.91)"/><use xlink:href="#b" transform="translate(7.307 3.273)"/><defs><path id="a" d="M1.054 5.09l.37-1.083h1.95l.37 1.084h1.051L2.918 0H1.877L0 5.09h1.054zm1.315-3.852h.06l.67 1.964h-1.4l.671-1.964z"/><path id="b" d="M1.108 8.727l.822-2.335h3.64l.822 2.335H7.5L4.295 0h-1.09L0 8.727h1.108zm2.59-7.346h.103l1.436 4.074H2.263L3.699 1.38z"/></defs></svg>
\ 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 @@ +<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>letter-spacing</title><desc>Created using Figma</desc><use xlink:href="#a" transform="translate(4.307 3.273)"/><use xlink:href="#b" transform="rotate(90 -.5 1.5)"/><use xlink:href="#b" transform="rotate(90 7 9)"/><defs><path id="a" d="M1.108 8.727l.822-2.335h3.64l.822 2.335H7.5L4.295 0h-1.09L0 8.727h1.108zm2.59-7.346h.103l1.436 4.074H2.263L3.699 1.38z"/><path id="b" fill-rule="evenodd" d="M12 1H0V0h12v1z"/></defs></svg>
\ 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 @@ +<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>style</title><desc>Created using Figma</desc><use xlink:href="#a" transform="rotate(90 -1 2)"/><use xlink:href="#b" transform="rotate(90 1 4)"/><use xlink:href="#c" transform="rotate(90 3.5 6.5)"/><use xlink:href="#d" transform="rotate(90 6.5 9.5)"/><defs><path id="a" fill-rule="evenodd" d="M10 1H0V0h10v1z"/><path id="b" fill-rule="evenodd" d="M10 2H0V0h10v2z"/><path id="c" fill-rule="evenodd" d="M10 3H0V0h10v3z"/><path id="d" fill-rule="evenodd" d="M10 4H0V0h10v4z"/></defs></svg>
\ No newline at end of file diff --git a/docs/samples/img/01.png b/docs/samples/img/01.png Binary files differnew file mode 100644 index 000000000..cbe2341d5 --- /dev/null +++ b/docs/samples/img/01.png diff --git a/docs/samples/img/01@2x.png b/docs/samples/img/01@2x.png Binary files differnew file mode 100644 index 000000000..f5b12f4f7 --- /dev/null +++ b/docs/samples/img/01@2x.png diff --git a/docs/samples/img/02.png b/docs/samples/img/02.png Binary files differnew file mode 100644 index 000000000..f9937518e --- /dev/null +++ b/docs/samples/img/02.png diff --git a/docs/samples/img/02@2x.png b/docs/samples/img/02@2x.png Binary files differnew file mode 100644 index 000000000..dda316e90 --- /dev/null +++ b/docs/samples/img/02@2x.png diff --git a/docs/samples/img/03.png b/docs/samples/img/03.png Binary files differnew file mode 100644 index 000000000..dcc0d1262 --- /dev/null +++ b/docs/samples/img/03.png diff --git a/docs/samples/img/03@2x.png b/docs/samples/img/03@2x.png Binary files differnew file mode 100644 index 000000000..e3de1d31e --- /dev/null +++ b/docs/samples/img/03@2x.png diff --git a/docs/samples/img/04.png b/docs/samples/img/04.png Binary files differnew file mode 100644 index 000000000..7aa6ec833 --- /dev/null +++ b/docs/samples/img/04.png diff --git a/docs/samples/img/04@2x.png b/docs/samples/img/04@2x.png Binary files differnew file mode 100644 index 000000000..9fcf20ced --- /dev/null +++ b/docs/samples/img/04@2x.png diff --git a/docs/samples/img/05.png b/docs/samples/img/05.png Binary files differnew file mode 100644 index 000000000..ec501fd74 --- /dev/null +++ b/docs/samples/img/05.png diff --git a/docs/samples/img/05@2x.png b/docs/samples/img/05@2x.png Binary files differnew file mode 100644 index 000000000..31a8a2843 --- /dev/null +++ b/docs/samples/img/05@2x.png diff --git a/docs/samples/img/06.png b/docs/samples/img/06.png Binary files differnew file mode 100644 index 000000000..eb290e43e --- /dev/null +++ b/docs/samples/img/06.png diff --git a/docs/samples/img/06@2x.png b/docs/samples/img/06@2x.png Binary files differnew file mode 100644 index 000000000..c0150fe3b --- /dev/null +++ b/docs/samples/img/06@2x.png diff --git a/docs/samples/img/07.png b/docs/samples/img/07.png Binary files differnew file mode 100644 index 000000000..6414b3255 --- /dev/null +++ b/docs/samples/img/07.png diff --git a/docs/samples/img/07@2x.png b/docs/samples/img/07@2x.png Binary files differnew file mode 100644 index 000000000..c6093d21c --- /dev/null +++ b/docs/samples/img/07@2x.png diff --git a/docs/samples/img/08.png b/docs/samples/img/08.png Binary files differnew file mode 100644 index 000000000..aef9dafab --- /dev/null +++ b/docs/samples/img/08.png diff --git a/docs/samples/img/08@2x.png b/docs/samples/img/08@2x.png Binary files differnew file mode 100644 index 000000000..a53902172 --- /dev/null +++ b/docs/samples/img/08@2x.png diff --git a/docs/samples/img/09.png b/docs/samples/img/09.png Binary files differnew file mode 100644 index 000000000..4527ed029 --- /dev/null +++ b/docs/samples/img/09.png diff --git a/docs/samples/img/09@2x.png b/docs/samples/img/09@2x.png Binary files differnew file mode 100644 index 000000000..d6f255ae0 --- /dev/null +++ b/docs/samples/img/09@2x.png diff --git a/docs/samples/img/10.png b/docs/samples/img/10.png Binary files differnew file mode 100644 index 000000000..091480854 --- /dev/null +++ b/docs/samples/img/10.png diff --git a/docs/samples/img/10@2x.png b/docs/samples/img/10@2x.png Binary files differnew file mode 100644 index 000000000..6c1177e42 --- /dev/null +++ b/docs/samples/img/10@2x.png diff --git a/docs/samples/img/11.png b/docs/samples/img/11.png Binary files differnew file mode 100644 index 000000000..485248dfe --- /dev/null +++ b/docs/samples/img/11.png diff --git a/docs/samples/img/11@2x.png b/docs/samples/img/11@2x.png Binary files differnew file mode 100644 index 000000000..55e91d951 --- /dev/null +++ b/docs/samples/img/11@2x.png diff --git a/docs/samples/img/12.png b/docs/samples/img/12.png Binary files differnew file mode 100644 index 000000000..c55fc5306 --- /dev/null +++ b/docs/samples/img/12.png diff --git a/docs/samples/img/12@2x.png b/docs/samples/img/12@2x.png Binary files differnew file mode 100644 index 000000000..a89353532 --- /dev/null +++ b/docs/samples/img/12@2x.png diff --git a/docs/samples/img/13.png b/docs/samples/img/13.png Binary files differnew file mode 100644 index 000000000..8ec89ddd5 --- /dev/null +++ b/docs/samples/img/13.png diff --git a/docs/samples/img/13@2x.png b/docs/samples/img/13@2x.png Binary files differnew file mode 100644 index 000000000..881434123 --- /dev/null +++ b/docs/samples/img/13@2x.png diff --git a/docs/samples/img/14.png b/docs/samples/img/14.png Binary files differnew file mode 100644 index 000000000..7fe704743 --- /dev/null +++ b/docs/samples/img/14.png diff --git a/docs/samples/img/14@2x.png b/docs/samples/img/14@2x.png Binary files differnew file mode 100644 index 000000000..eec32064c --- /dev/null +++ b/docs/samples/img/14@2x.png diff --git a/docs/samples/img/15.png b/docs/samples/img/15.png Binary files differnew file mode 100644 index 000000000..387ed25a2 --- /dev/null +++ b/docs/samples/img/15.png diff --git a/docs/samples/img/15@2x.png b/docs/samples/img/15@2x.png Binary files differnew file mode 100644 index 000000000..39b73926b --- /dev/null +++ b/docs/samples/img/15@2x.png diff --git a/docs/samples/img/dark-phone.jpg b/docs/samples/img/dark-phone.jpg Binary files differnew file mode 100755 index 000000000..287429253 --- /dev/null +++ b/docs/samples/img/dark-phone.jpg diff --git a/docs/samples/img/dark-phone@2x.jpg b/docs/samples/img/dark-phone@2x.jpg Binary files differnew file mode 100755 index 000000000..480a539ae --- /dev/null +++ b/docs/samples/img/dark-phone@2x.jpg 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 @@ +<!DOCTYPE HTML> +<html lang="en" prefix="og: http://ogp.me/ns#"> + <head> + <meta charset="utf-8"> + <title>Inter UI font family</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta property="og:title" content="Inter UI font family"> + <meta property="twitter:title" content="Inter UI font family"> + <meta property="description" content="Inter UI is a new typeface optimized for computer user interfaces"> + <meta property="og:description" content="Inter UI is a new typeface optimized for computer user interfaces"> + <meta property="twitter:description" content="Inter UI is a new typeface optimized for computer user interfaces"> + <meta property="twitter:card" content="summary"> + <meta property="twitter:site" content="@rsms"> + <meta property="twitter:creator" content="@rsms"> + <meta property="og:image" content="https://rsms.me/inter/res/poster.png"> + <meta property="twitter:image" content="https://rsms.me/inter/res/poster.png"> + <meta property="fb:app_id" content="38027689216"> + <meta property="og:url" content="https://rsms.me/inter/"> + <meta property="og:site_name" content="rsms.me"> + <meta property="og:type" content="product"> + <meta property="og:locale" content="en_US" /> + <meta name="format-detection" content="telephone=no"> + <link rel="icon" type="image/png" href="../favicon.png" /> + <link href="../inter-ui.css?v=2.5" rel="stylesheet"> + <link href="../index.css?v=5" rel="stylesheet"> + <style type="text/css"> +body { + padding-bottom: 0; + background: white; +} + +.row.footer h2 { + margin:0; + text-align:center; +} + +/*.row.menu { + background: white; +}*/ + +livesample { + display: block; + color: #111; + outline: none; + padding-left: 20px; + border-left: 2px solid transparent; + margin-left:-22px; + margin-top: 1em; + margin-bottom: 1.6em; +} +livesample:hover { + /*color: rgb(3, 102, 214);*/ + border-left-color: rgb(3, 102, 214); +} +livesample:focus { + border-left-color: #eee; +} +livesample > p { + margin-top: 0; +} +livesample.s1 { + padding-left: 16px; + letter-spacing: -0.005em; + font-size: 5em; + font-weight: 600; + line-height: 1.1; + margin-top: 0; + margin-bottom: 0.3em; +} +livesample.s2 { + max-width: 400px; + font-size: 1em; +} +livesample.s3 { + font-size: 13px; + line-height: 18px; +} + livesample.s3 b, livesample.s3 strong { + font-weight:500; + color: black; + } + +livesample.col3 { + -moz-column-width: 20em; + -moz-columns: 20em; + -webkit-columns: 20em; + columns: 20em; + + -moz-column-gap: 2em; + -webkit-column-gap: 2em; + column-gap: 2em; +} +livesample.col2 { + -moz-column-count: 2; + -webkit-column-count: 2; + column-count: 2; +} + +.font-style-regular { font-weight:400 !important; font-style:normal !important; } +.font-style-italic { font-weight:400 !important; font-style:italic !important; } +.font-style-medium { font-weight:500 !important; font-style:normal !important; } +.font-style-medium-italic { font-weight:500 !important; font-style:italic !important; } +.font-style-bold { font-weight:700 !important; font-style:normal !important; } +.font-style-bold-italic { font-weight:700 !important; font-style:italic !important; } +.font-style-black { font-weight:900 !important; font-style:normal !important; } +.font-style-black-italic { font-weight:900 !important; font-style:italic !important; } + +div.live { + margin-top:1em; + margin-bottom:100px; + padding-bottom:100px; + border-bottom: 1px solid #ddd; +} + div.controls { + position: absolute; + right: 0; + top: 150px; + width: 220px; + padding: 10px 16px; + /*background:#eee;*/ + opacity:0.3; + border:1px solid #bbb; + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + border-right:none; + display: flex; + flex-direction: column; + overflow: hidden; + } + div.controls:hover { + opacity:1; + background:#f5f5f5; + border-color: transparent; + } + div.controls .control { + display: flex; + justify-content: space-between; + align-items: center; + overflow: hidden; + height:30px; + } + div.controls .control > * { + /*max-width: 50%;*/ + flex: 1 1 auto; + margin:0; + margin-right: 16px; + box-sizing: border-box; + } + div.controls .control > :last-child { + margin-right: 0; + } + div.controls .control > select { + min-width: 6em; + align-items: center; + justify-content: center; + } + div.controls .control > input, + div.controls .control > select { + width: 0; + outline: none; + } + div.controls .control > input[type="number"], + div.controls .control > input[type="text"] { + background: none; + border: none; + padding: 4px 0; + font-size: 13px; + /*border-radius: 2px;*/ + } + div.controls .control > input[type="number"] { + max-width: 60px; + text-align: right; + -moz-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1; + -ms-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1; + -o-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1; + -webkit-font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1; + font-feature-settings: 'calt' 1, 'zero' 1, 'tnum' 1; + } + div.controls .control > input[type="range"] { + /*max-width: 80%;*/ + flex: 1 1 auto; + display: block; + } + div.controls .control > img.icon { + width: 16px; + height: 16px; + flex: 0 0 auto; + margin-right: 16px; + opacity: 0.8; + } + + /*div.controls .control > input.foo { + background-color: hotpink; + border:none; + border-radius: 90px; + }*/ + + +/* narrow windows */ +@media only screen and (max-width: 1200px) { + div.live div.controls { + width: 200px; + } +} +@media only screen and (max-width: 1024px) { + div.live div.controls { + width: 100px; + } + div.controls .control > input[type="range"] { + width: 0; + flex: 0 1 0%; + display: none; + } + div.controls .control > input[type="number"] { + max-width: 100%; + flex: 1 1 auto; + } +} +@media only screen and (max-width: 740px) { + livesample.s1 { + font-size:4.5em; + } + div.live div.controls { + display: none; + } +} +@media only screen and (max-width: 565px) { + livesample.s1 { + font-size:4em; + } +} +@media only screen and (max-width: 414px) { + livesample.s1 { + font-size:3.4em; + } +} + </style> + </head> + <body> + + <div class="row menu"> + <ul class="menu"> + <li class="home"><a href="../">Inter UI</a></li> + <li><a class="download-link" + href="https://github.com/rsms/inter/releases/latest/" + >Download</a></li> + <li><a href="/inter/samples/" class="active">Samples</a></li> + <li><a href="lab/">Playground</a></li> + <li><a href="https://github.com/rsms/inter/">Source</a></li> + </ul> + </div> + + <div class="row white"><div> + <div class="live"> + + <div class="controls"> + <div class="control"> + <img title="Style" class="icon" src="icons/style.svg"> + <select data-binding="style"> + <option value="regular" default>Regular</option> + <option value="italic">Italic</option> + <option value="medium" default>Medium</option> + <option value="medium-italic">Medium Italic</option> + <option value="bold" default>Bold</option> + <option value="bold-italic">Bold Italic</option> + <option value="black" default>Black</option> + <option value="black-italic">Black Italic</option> + </select> + </div> + <div class="control"> + <img title="Size" class="icon" src="icons/font-size.svg"> + <input type="range" min="8" max="100" step="1" data-binding="font-size"> + <input type="number" min="4" max="400" step="1" data-binding="font-size"> + </div> + <div class="control"> + <img title="Letter spacing in EM" class="icon" src="icons/letter-spacing.svg"> + <input type="range" min="-0.1" max="0.1" step="0.001" data-binding="letter-spacing"> + <input type="number" min="-0.15" max="1" step="0.001" data-binding="letter-spacing"> + </div> + <!-- <div class="control"> + <img class="icon" src="icons/font-size.svg"> + <input type="text" class="foo" data-binding="foo"> + <input type="text" class="foo" data-binding="foo"> + </div> --> + </div> + + <livesample contenteditable class="s1"> + Fabulous typography encountering spring + </livesample> + + <livesample contenteditable class="s2"> + The user interface (UI), in the industrial design field of human-computer + interaction, is the space where interactions between humans and machines occur. + </livesample> + + <livesample contenteditable class="s3 col3"> +<p><b>Fire Island Beach</b> 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. +</p><p> +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. +</p><p> +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. +</p><p> +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. +</p><p> +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. +</p><p> +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. +</p><p> +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. +</p><p> +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. +</p><p> +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. +</p><p> +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. +</p><p> +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. +</p><p> +“The Captain” knew all this and had patrolled that Beach scores of +times. +</p><p> +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. +</p> + </livesample> + </div> + + <p class="sample-images"> + <img src="img/01.png" srcset="img/01@2x.png 2x" width="888"> + <img src="img/02.png" srcset="img/02@2x.png 2x" width="888"> + <!-- <img src="img/02.svg" width="888"> --> + <img src="img/03.png" srcset="img/03@2x.png 2x" width="888"> + <img src="img/04.png" srcset="img/04@2x.png 2x" width="888"> + <img src="img/05.png" srcset="img/05@2x.png 2x" width="888"> + <img src="img/dark-phone.jpg" srcset="img/dark-phone@2x.jpg 2x" width="888"> + <img src="img/06.png" srcset="img/06@2x.png 2x" width="888"> + <img src="img/07.png" srcset="img/07@2x.png 2x" width="888"> + <img src="img/08.png" srcset="img/08@2x.png 2x" width="888"> + <img src="img/09.png" srcset="img/09@2x.png 2x" width="888"> + <img src="img/10.png" srcset="img/10@2x.png 2x" width="888"> + <img src="img/11.png" srcset="img/11@2x.png 2x" width="888"> + <img src="img/12.png" srcset="img/12@2x.png 2x" width="888"> + <img src="img/13.png" srcset="img/13@2x.png 2x" width="888"> + <img src="img/14.png" srcset="img/14@2x.png 2x" width="888"> + <img src="img/15.png" srcset="img/15@2x.png 2x" width="888"> + </p> + <p style="text-align:center"> + <a href="https://www.figma.com/file/WmU5NWr52bnUcqv5os0V4sWi/" class="plain">Open these samples in Figma</a> + </p> + </div></div> + + <script src="../index.js?v=2"></script> + <script src="bindings.js"></script> + <script type="text/javascript">(function(){ + + + +// InterUIDynamicTracking takes the font size in points or pixels and returns +// the compensating tracking in EM. +// +function InterUIDynamicTracking(fontSize, weightClass) { + // if (!weightClass) { -- currently unused + // weightClass = 400 + // } + // + // y = -0.01021241 + 0.3720623 * e ^ (-0.2808687 * x) + // [6-35] 0.05877 .. -0.0101309 (13==0; stops growing around 30-35) + // See https://gist.github.com/rsms/8efdbca5f8145a584ed08a7c3d6e5788 + // + return -0.01021241 + 0.3720623 * Math.pow(Math.E, (-0.2808687 * fontSize)) + + // y = 0.025 - (ln(x) * 0.01) + // return 0.025 - Math.log(fontSize) * 0.01 +} + + +function InterUIDynamicLeading(fontSize, weightClass) { + var lineHeight = Math.round(fontSize * 1.4) + // + // TODO + // + // console.log( + // 'lineHeight:', lineHeight, + // `(${Math.round(fontSize * 1.45)})`, + // ) + + return lineHeight +} + + +var bindings = new Bindings() + +var s2 = $('livesample.s2') + +function updateWidth() { + var fontSize = bindings.value('font-size', 0) + var letterSpacing = bindings.value('letter-spacing', 0) + var w = fontSize * (letterSpacing + 1) * 25 + s2.style.maxWidth = Math.round(w) + 'px' +} + +bindings.configure('letter-spacing', 0, 'float', function (letterSpacing) { + s2.style.letterSpacing = letterSpacing + 'em' + updateWidth() +}) + +bindings.configure('font-size', 18, 'int', function(fontSize, prevval) { + s2.style.fontSize = fontSize + 'px' + updateWidth() + + var letterSpacing = InterUIDynamicTracking(fontSize, 400) + // if (letterSpacing < 0.001 && letterSpacing > -0.001) { + // letterSpacing = 0 + // } + // letterSpacing = parseFloat(letterSpacing.toFixed(3)) // lower precision + + var lineHeight = InterUIDynamicLeading(fontSize, 400) + s2.style.lineHeight = lineHeight + 'px' + + bindings.setValue('letter-spacing', letterSpacing) +}) + +bindings.configure('style', null, null, function (style) { + var cl = s2.classList + cl.remove('font-style-regular') + cl.remove('font-style-italic') + cl.remove('font-style-medium') + cl.remove('font-style-medium-italic') + cl.remove('font-style-bold') + cl.remove('font-style-bold-italic') + cl.remove('font-style-black') + cl.remove('font-style-black-italic') + cl.add('font-style-' + style) +}) + + +bindings.bindAllInputs('div.live .control input') +bindings.bindAllInputs('div.live .control select') + + + + })();</script> + </body> +</html> |