├── css ├── components │ ├── Flow.css │ ├── Comment.css │ ├── Image.css │ ├── Grid.css │ ├── Line.css │ ├── Clone.css │ ├── Go.css │ ├── Spread.css │ ├── Cluster.css │ ├── Box.css │ ├── Screen.css │ ├── Sidebar.css │ ├── Stack.css │ ├── Center.css │ ├── Textarea.css │ ├── Input.css │ ├── Select.css │ ├── Text.css │ ├── Checkbox.css │ ├── Drawer.css │ ├── Radios.css │ └── Progress.css ├── lib │ ├── utilities.css │ ├── variables.css │ └── base.css └── styles.css ├── docs ├── css │ ├── components │ │ ├── Flow.css │ │ ├── Comment.css │ │ ├── Image.css │ │ ├── Grid.css │ │ ├── Line.css │ │ ├── Clone.css │ │ ├── Go.css │ │ ├── Spread.css │ │ ├── Cluster.css │ │ ├── Box.css │ │ ├── Screen.css │ │ ├── Sidebar.css │ │ ├── Stack.css │ │ ├── Center.css │ │ ├── Textarea.css │ │ ├── Input.css │ │ ├── Select.css │ │ ├── Text.css │ │ ├── Checkbox.css │ │ ├── Drawer.css │ │ ├── Radios.css │ │ └── Progress.css │ ├── lib │ │ ├── utilities.css │ │ ├── variables.css │ │ └── base.css │ └── styles.css ├── js │ ├── utilities │ │ ├── textSample.test.js │ │ ├── ratioHeight.js │ │ ├── ratioHeight.test.js │ │ ├── separateNodes.js │ │ ├── rangeToNum.js │ │ ├── rangeToNum.test.js │ │ ├── wordsSample.test.js │ │ ├── dataFromForm.js │ │ ├── actions.js │ │ ├── parser.js │ │ ├── wordsSample.js │ │ └── textSample.js │ ├── data.js │ ├── components │ │ ├── Text.js │ │ ├── Clone.js │ │ ├── Input.js │ │ ├── Textarea.js │ │ ├── Go.js │ │ ├── Center.js │ │ ├── Checkbox.js │ │ ├── Output.js │ │ ├── Progress.js │ │ ├── Screen.js │ │ ├── Box.js │ │ ├── Words.js │ │ ├── Grid.js │ │ ├── Select.js │ │ ├── Icon.js │ │ ├── Cluster.js │ │ ├── Radios.js │ │ ├── Spread.js │ │ ├── Model.js │ │ ├── Sidebar.js │ │ ├── Image.js │ │ ├── Stack.js │ │ ├── Drawer.js │ │ ├── Line.js │ │ ├── Comment.js │ │ └── Flow.js │ ├── houdini │ │ └── image-cross.js │ └── app.js ├── icons │ ├── tick.svg │ ├── cross.svg │ ├── arrow-left.svg │ ├── arrow-right.svg │ ├── plus.svg │ └── triangle-down.svg └── index.html ├── js ├── utilities │ ├── textSample.test.js │ ├── ratioHeight.js │ ├── ratioHeight.test.js │ ├── separateNodes.js │ ├── rangeToNum.js │ ├── rangeToNum.test.js │ ├── wordsSample.test.js │ ├── dataFromForm.js │ ├── actions.js │ ├── parser.js │ ├── wordsSample.js │ └── textSample.js ├── data.js ├── components │ ├── Text.js │ ├── Center.js │ ├── Clone.js │ ├── Input.js │ ├── Textarea.js │ ├── Go.js │ ├── Checkbox.js │ ├── Output.js │ ├── Progress.js │ ├── Screen.js │ ├── Box.js │ ├── Words.js │ ├── Grid.js │ ├── Select.js │ ├── Icon.js │ ├── Cluster.js │ ├── Radios.js │ ├── Spread.js │ ├── Model.js │ ├── Sidebar.js │ ├── Stack.js │ ├── Image.js │ ├── Drawer.js │ ├── Line.js │ ├── Comment.js │ └── Flow.js ├── houdini │ └── image-cross.js └── app.js ├── logo.png ├── .babelrc ├── split_screen.png ├── icons ├── tick.svg ├── cross.svg ├── arrow-left.svg ├── arrow-right.svg ├── plus.svg └── triangle-down.svg ├── index.html ├── package.json ├── logo.svg ├── .gitignore ├── demo.html ├── editor.html └── README.md /css/components/Flow.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/components/Comment.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/components/Image.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/css/components/Flow.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/css/components/Comment.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/css/components/Image.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /js/utilities/textSample.test.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/js/utilities/textSample.test.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/components/Grid.css: -------------------------------------------------------------------------------- 1 | g-rid { 2 | display: grid; 3 | } -------------------------------------------------------------------------------- /css/components/Line.css: -------------------------------------------------------------------------------- 1 | l-ine { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /css/components/Clone.css: -------------------------------------------------------------------------------- 1 | c-lone { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /css/components/Go.css: -------------------------------------------------------------------------------- 1 | g-o { 2 | display: inline-block; 3 | } -------------------------------------------------------------------------------- /css/components/Spread.css: -------------------------------------------------------------------------------- 1 | s-pread { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /docs/css/components/Grid.css: -------------------------------------------------------------------------------- 1 | g-rid { 2 | display: grid; 3 | } -------------------------------------------------------------------------------- /docs/css/components/Line.css: -------------------------------------------------------------------------------- 1 | l-ine { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /css/components/Cluster.css: -------------------------------------------------------------------------------- 1 | c-luster { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /docs/css/components/Clone.css: -------------------------------------------------------------------------------- 1 | c-lone { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /docs/css/components/Go.css: -------------------------------------------------------------------------------- 1 | g-o { 2 | display: inline-block; 3 | } -------------------------------------------------------------------------------- /docs/css/components/Spread.css: -------------------------------------------------------------------------------- 1 | s-pread { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heydon/bruck/HEAD/logo.png -------------------------------------------------------------------------------- /docs/css/components/Cluster.css: -------------------------------------------------------------------------------- 1 | c-luster { 2 | display: block; 3 | } -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env" 4 | ], 5 | "plugins": [] 6 | } -------------------------------------------------------------------------------- /css/components/Box.css: -------------------------------------------------------------------------------- 1 | b-ox { 2 | display: block; 3 | overflow: hidden; 4 | } -------------------------------------------------------------------------------- /split_screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Heydon/bruck/HEAD/split_screen.png -------------------------------------------------------------------------------- /css/components/Screen.css: -------------------------------------------------------------------------------- 1 | s-creen { 2 | display: block; 3 | min-height: 100vh; 4 | } -------------------------------------------------------------------------------- /css/components/Sidebar.css: -------------------------------------------------------------------------------- 1 | s-idebar { 2 | display: block; 3 | overflow: hidden; 4 | } -------------------------------------------------------------------------------- /css/components/Stack.css: -------------------------------------------------------------------------------- 1 | s-tack { 2 | display: grid; 3 | align-content: start; 4 | } -------------------------------------------------------------------------------- /docs/css/components/Box.css: -------------------------------------------------------------------------------- 1 | b-ox { 2 | display: block; 3 | overflow: hidden; 4 | } -------------------------------------------------------------------------------- /docs/css/components/Screen.css: -------------------------------------------------------------------------------- 1 | s-creen { 2 | display: block; 3 | min-height: 100vh; 4 | } -------------------------------------------------------------------------------- /docs/css/components/Sidebar.css: -------------------------------------------------------------------------------- 1 | s-idebar { 2 | display: block; 3 | overflow: hidden; 4 | } -------------------------------------------------------------------------------- /docs/css/components/Stack.css: -------------------------------------------------------------------------------- 1 | s-tack { 2 | display: grid; 3 | align-content: start; 4 | } -------------------------------------------------------------------------------- /css/components/Center.css: -------------------------------------------------------------------------------- 1 | c-enter { 2 | display: block; 3 | margin-left: auto; 4 | margin-right: auto; 5 | } -------------------------------------------------------------------------------- /css/components/Textarea.css: -------------------------------------------------------------------------------- 1 | t-extarea textarea { 2 | width: 100%; 3 | min-height: calc(var(--s1) * 4); 4 | } -------------------------------------------------------------------------------- /docs/css/components/Center.css: -------------------------------------------------------------------------------- 1 | c-enter { 2 | display: block; 3 | margin-left: auto; 4 | margin-right: auto; 5 | } -------------------------------------------------------------------------------- /docs/css/components/Textarea.css: -------------------------------------------------------------------------------- 1 | t-extarea textarea { 2 | width: 100%; 3 | min-height: calc(var(--s1) * 4); 4 | } -------------------------------------------------------------------------------- /icons/tick.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /css/components/Input.css: -------------------------------------------------------------------------------- 1 | i-nput { 2 | display: block; 3 | } 4 | 5 | i-nput input { 6 | margin-top: var(--s-4); 7 | width: 100%; 8 | } -------------------------------------------------------------------------------- /docs/icons/tick.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/css/components/Input.css: -------------------------------------------------------------------------------- 1 | i-nput { 2 | display: block; 3 | } 4 | 5 | i-nput input { 6 | margin-top: var(--s-4); 7 | width: 100%; 8 | } -------------------------------------------------------------------------------- /icons/cross.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/icons/cross.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/icons/arrow-left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/icons/arrow-right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /icons/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /docs/icons/plus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /icons/triangle-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /js/utilities/ratioHeight.js: -------------------------------------------------------------------------------- 1 | export default function ratioHeight(r) { 2 | const nums = r.split(':').map(num => parseInt(num)); 3 | return (nums[0] / nums[1]) * 100; 4 | } -------------------------------------------------------------------------------- /docs/icons/triangle-down.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /docs/js/utilities/ratioHeight.js: -------------------------------------------------------------------------------- 1 | export default function ratioHeight(r) { 2 | const nums = r.split(':').map(num => parseInt(num)); 3 | return (nums[0] / nums[1]) * 100; 4 | } -------------------------------------------------------------------------------- /js/utilities/ratioHeight.test.js: -------------------------------------------------------------------------------- 1 | import ratioHeight from './ratioHeight.js' 2 | 3 | test('returns ratio expressed as a percentage', () => { 4 | const ratio = ratioHeight('6:9'); 5 | expect(ratio).toBeCloseTo(66.666); 6 | }); -------------------------------------------------------------------------------- /docs/js/utilities/ratioHeight.test.js: -------------------------------------------------------------------------------- 1 | import ratioHeight from './ratioHeight.js' 2 | 3 | test('returns ratio expressed as a percentage', () => { 4 | const ratio = ratioHeight('6:9'); 5 | expect(ratio).toBeCloseTo(66.666); 6 | }); -------------------------------------------------------------------------------- /js/utilities/separateNodes.js: -------------------------------------------------------------------------------- 1 | export default function separateNodes(nodes, HTMLstring) { 2 | const elems = Array.from(nodes); 3 | elems.map((elem, i) => i > 0 4 | ? elem.insertAdjacentHTML('beforebegin', HTMLstring) 5 | : elem 6 | ); 7 | } -------------------------------------------------------------------------------- /docs/js/data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | names: [ 3 | { 4 | firstName: 'Heydon', 5 | lastName: 'Pickering' 6 | }, 7 | { 8 | firstName: 'Hulk', 9 | lastName: 'Hogan' 10 | } 11 | ], 12 | thing: 'word' 13 | } -------------------------------------------------------------------------------- /docs/js/utilities/separateNodes.js: -------------------------------------------------------------------------------- 1 | export default function separateNodes(nodes, HTMLstring) { 2 | const elems = Array.from(nodes); 3 | elems.map((elem, i) => i > 0 4 | ? elem.insertAdjacentHTML('beforebegin', HTMLstring) 5 | : elem 6 | ); 7 | } -------------------------------------------------------------------------------- /js/utilities/rangeToNum.js: -------------------------------------------------------------------------------- 1 | export default function rangeToNum(range) { 2 | if (!range.includes(',')) { 3 | return parseInt(range); 4 | } 5 | const rangeArr = range.split(',').map(i => parseInt(i)); 6 | const num = Math.floor(Math.random() * (rangeArr[1] - rangeArr[0] + 1)) + rangeArr[0]; 7 | return num; 8 | } -------------------------------------------------------------------------------- /docs/js/utilities/rangeToNum.js: -------------------------------------------------------------------------------- 1 | export default function rangeToNum(range) { 2 | if (!range.includes(',')) { 3 | return parseInt(range); 4 | } 5 | const rangeArr = range.split(',').map(i => parseInt(i)); 6 | const num = Math.floor(Math.random() * (rangeArr[1] - rangeArr[0] + 1)) + rangeArr[0]; 7 | return num; 8 | } -------------------------------------------------------------------------------- /js/data.js: -------------------------------------------------------------------------------- 1 | export default { 2 | names: [ 3 | { 4 | firstName: 'Heydon', 5 | lastName: 'Pickering' 6 | }, 7 | { 8 | firstName: 'Hulk', 9 | lastName: 'Hogan' 10 | }, 11 | { 12 | firstName: 'Lara', 13 | lastName: 'Hogan' 14 | }, 15 | { 16 | firstName: 'Paul', 17 | lastName: 'Hogan' 18 | } 19 | ] 20 | } -------------------------------------------------------------------------------- /js/utilities/rangeToNum.test.js: -------------------------------------------------------------------------------- 1 | import rangeToNum from './rangeToNum.js' 2 | 3 | test('returns number between two other numbers (inclusive)', () => { 4 | const num = rangeToNum('2,8'); 5 | expect(num).toBeLessThan(9); 6 | expect(num).toBeGreaterThan(1); 7 | }); 8 | 9 | test('returns number', () => { 10 | const num = rangeToNum('8'); 11 | expect(num).toBe(8); 12 | }); -------------------------------------------------------------------------------- /docs/js/utilities/rangeToNum.test.js: -------------------------------------------------------------------------------- 1 | import rangeToNum from './rangeToNum.js' 2 | 3 | test('returns number between two other numbers (inclusive)', () => { 4 | const num = rangeToNum('2,8'); 5 | expect(num).toBeLessThan(9); 6 | expect(num).toBeGreaterThan(1); 7 | }); 8 | 9 | test('returns number', () => { 10 | const num = rangeToNum('8'); 11 | expect(num).toBe(8); 12 | }); -------------------------------------------------------------------------------- /js/components/Text.js: -------------------------------------------------------------------------------- 1 | // https://github.com/Heydon/bruck#t-ext 2 | 3 | import textSample from '../utilities/textSample.js'; 4 | 5 | export default class Text extends HTMLElement { 6 | constructor() { 7 | super(); 8 | const range = this.getAttribute('words') || '15,20'; 9 | const text = textSample(range); 10 | this.innerHTML = `

${text}

`; 11 | } 12 | } 13 | 14 | customElements.define('t-ext', Text); -------------------------------------------------------------------------------- /docs/js/components/Text.js: -------------------------------------------------------------------------------- 1 | // https://github.com/Heydon/bruck#t-ext 2 | 3 | import textSample from '../utilities/textSample.js'; 4 | 5 | export default class Text extends HTMLElement { 6 | constructor() { 7 | super(); 8 | const range = this.getAttribute('words') || '15,20'; 9 | const text = textSample(range); 10 | this.innerHTML = `

${text}

`; 11 | } 12 | } 13 | 14 | customElements.define('t-ext', Text); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Bruck 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /css/components/Select.css: -------------------------------------------------------------------------------- 1 | s-elect { 2 | display: block; 3 | } 4 | 5 | .s-elect-wrap { 6 | position: relative; 7 | } 8 | 9 | s-elect select { 10 | -webkit-appearance: none; 11 | -moz-appearance: none; 12 | appearance: none; 13 | width: 100%; 14 | padding-right: 2rem; 15 | } 16 | 17 | s-elect i-con { 18 | position: absolute; 19 | right: 0.5rem; 20 | top: 50%; 21 | transform: translateY(-50%); 22 | pointer-events: none; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /js/utilities/wordsSample.test.js: -------------------------------------------------------------------------------- 1 | import wordsSample from './wordsSample.js' 2 | 3 | test('returns an array', () => { 4 | const sample = wordsSample('10,20'); 5 | expect(Array.isArray(sample)).toBe(true); 6 | }); 7 | 8 | test('returned array length to be between 10 and 20', () => { 9 | const sample = wordsSample('10,20'); 10 | console.log(sample.length); 11 | expect(sample.length).toBeLessThan(21); 12 | expect(sample.length).toBeGreaterThan(9); 13 | }); -------------------------------------------------------------------------------- /css/lib/utilities.css: -------------------------------------------------------------------------------- 1 | /* Invert the colors of the component or element */ 2 | .u-invert { 3 | filter: invert(100%); 4 | background-color: var(--color-light); 5 | } 6 | 7 | /* text alignment (affects children too) */ 8 | .u-text-center { 9 | text-align: center; 10 | } 11 | 12 | .u-text-left { 13 | text-align: left; 14 | } 15 | 16 | .u-text-right { 17 | text-align: right; 18 | } 19 | 20 | /* rounded edges */ 21 | .u-rounded { 22 | border-radius: 50%; 23 | } -------------------------------------------------------------------------------- /docs/css/components/Select.css: -------------------------------------------------------------------------------- 1 | s-elect { 2 | display: block; 3 | } 4 | 5 | .s-elect-wrap { 6 | position: relative; 7 | } 8 | 9 | s-elect select { 10 | -webkit-appearance: none; 11 | -moz-appearance: none; 12 | appearance: none; 13 | width: 100%; 14 | padding-right: 2rem; 15 | } 16 | 17 | s-elect i-con { 18 | position: absolute; 19 | right: 0.5rem; 20 | top: 50%; 21 | transform: translateY(-50%); 22 | pointer-events: none; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /docs/js/utilities/wordsSample.test.js: -------------------------------------------------------------------------------- 1 | import wordsSample from './wordsSample.js' 2 | 3 | test('returns an array', () => { 4 | const sample = wordsSample('10,20'); 5 | expect(Array.isArray(sample)).toBe(true); 6 | }); 7 | 8 | test('returned array length to be between 10 and 20', () => { 9 | const sample = wordsSample('10,20'); 10 | console.log(sample.length); 11 | expect(sample.length).toBeLessThan(21); 12 | expect(sample.length).toBeGreaterThan(9); 13 | }); -------------------------------------------------------------------------------- /docs/css/lib/utilities.css: -------------------------------------------------------------------------------- 1 | /* Invert the colors of the component or element */ 2 | .u-invert { 3 | filter: invert(100%); 4 | background-color: var(--color-light); 5 | } 6 | 7 | /* text alignment (affects children too) */ 8 | .u-text-center { 9 | text-align: center; 10 | } 11 | 12 | .u-text-left { 13 | text-align: left; 14 | } 15 | 16 | .u-text-right { 17 | text-align: right; 18 | } 19 | 20 | /* rounded edges */ 21 | .u-rounded { 22 | border-radius: 50%; 23 | } -------------------------------------------------------------------------------- /css/components/Text.css: -------------------------------------------------------------------------------- 1 | t-ext { 2 | display: block; 3 | } 4 | 5 | t-ext span { 6 | display: inline-block; 7 | color: transparent; 8 | position: relative; 9 | pointer-events: none; 10 | } 11 | 12 | t-ext span::before { 13 | content: ''; 14 | position: absolute; 15 | left: 0; 16 | right: 0; 17 | top: calc(50% - (var(--border-thin) / 2)); 18 | bottom: calc(50% - (var(--border-thin) / 2)); 19 | background-color: var(--color-dark); 20 | pointer-events: none; 21 | } -------------------------------------------------------------------------------- /docs/css/components/Text.css: -------------------------------------------------------------------------------- 1 | t-ext { 2 | display: block; 3 | } 4 | 5 | t-ext span { 6 | display: inline-block; 7 | color: transparent; 8 | position: relative; 9 | pointer-events: none; 10 | } 11 | 12 | t-ext span::before { 13 | content: ''; 14 | position: absolute; 15 | left: 0; 16 | right: 0; 17 | top: calc(50% - (var(--border-thin) / 2)); 18 | bottom: calc(50% - (var(--border-thin) / 2)); 19 | background-color: var(--color-dark); 20 | pointer-events: none; 21 | } -------------------------------------------------------------------------------- /css/components/Checkbox.css: -------------------------------------------------------------------------------- 1 | c-heckbox .checkbox-check { 2 | display: inline-block; 3 | width: 1.5rem; 4 | height: 1.5rem; 5 | line-height: 1.25; 6 | border: var(--border-thin) solid; 7 | text-align: center; 8 | } 9 | 10 | c-heckbox i-con { 11 | visibility: hidden; 12 | } 13 | 14 | c-heckbox svg { 15 | vertical-align: 0; 16 | } 17 | 18 | c-heckbox :focus + .checkbox-label .checkbox-check { 19 | outline: var(--outline); 20 | } 21 | 22 | c-heckbox :checked + .checkbox-label i-con { 23 | visibility: visible; 24 | } -------------------------------------------------------------------------------- /docs/css/components/Checkbox.css: -------------------------------------------------------------------------------- 1 | c-heckbox .checkbox-check { 2 | display: inline-block; 3 | width: 1.5rem; 4 | height: 1.5rem; 5 | line-height: 1.25; 6 | border: var(--border-thin) solid; 7 | text-align: center; 8 | } 9 | 10 | c-heckbox i-con { 11 | visibility: hidden; 12 | } 13 | 14 | c-heckbox svg { 15 | vertical-align: 0; 16 | } 17 | 18 | c-heckbox :focus + .checkbox-label .checkbox-check { 19 | outline: var(--outline); 20 | } 21 | 22 | c-heckbox :checked + .checkbox-label i-con { 23 | visibility: visible; 24 | } -------------------------------------------------------------------------------- /css/components/Drawer.css: -------------------------------------------------------------------------------- 1 | d-rawer { 2 | display: block; 3 | padding: var(--s1); 4 | border-width: var(--border-thin); 5 | } 6 | 7 | d-rawer .handle { 8 | all: inherit; 9 | font-size: var(--s1); 10 | width: 100%; 11 | display: flex; 12 | justify-content: space-between; 13 | } 14 | 15 | d-rawer .handle:focus { 16 | outline: var(--outline); 17 | } 18 | 19 | d-rawer .content { 20 | margin-top: var(--s1); 21 | } 22 | 23 | d-rawer .handle[aria-expanded="true"] .v { 24 | display: none; 25 | } 26 | 27 | d-rawer + d-rawer { 28 | border-top: 0; 29 | } -------------------------------------------------------------------------------- /docs/css/components/Drawer.css: -------------------------------------------------------------------------------- 1 | d-rawer { 2 | display: block; 3 | padding: var(--s1); 4 | border-width: var(--border-thin); 5 | } 6 | 7 | d-rawer .handle { 8 | all: inherit; 9 | font-size: var(--s1); 10 | width: 100%; 11 | display: flex; 12 | justify-content: space-between; 13 | } 14 | 15 | d-rawer .handle:focus { 16 | outline: var(--outline); 17 | } 18 | 19 | d-rawer .content { 20 | margin-top: var(--s1); 21 | } 22 | 23 | d-rawer .handle[aria-expanded="true"] .v { 24 | display: none; 25 | } 26 | 27 | d-rawer + d-rawer { 28 | border-top: 0; 29 | } -------------------------------------------------------------------------------- /js/utilities/dataFromForm.js: -------------------------------------------------------------------------------- 1 | export default function dataFromForm(form) { 2 | const data = new FormData(form); 3 | const values = {}; 4 | for (let [key, value] of data.entries()) { 5 | let proxy = document.createElement('span'); 6 | proxy.innerHTML = value; 7 | let text = proxy.textContent; 8 | if (values[key]) { 9 | if (!(values[key] instanceof Array)) { 10 | values[key] = new Array(values[key]); 11 | } 12 | values[key].push(text); 13 | } else { 14 | values[key] = text; 15 | } 16 | } 17 | return values; 18 | } -------------------------------------------------------------------------------- /docs/js/utilities/dataFromForm.js: -------------------------------------------------------------------------------- 1 | export default function dataFromForm(form) { 2 | const data = new FormData(form); 3 | const values = {}; 4 | for (let [key, value] of data.entries()) { 5 | let proxy = document.createElement('span'); 6 | proxy.innerHTML = value; 7 | let text = proxy.textContent; 8 | if (values[key]) { 9 | if (!(values[key] instanceof Array)) { 10 | values[key] = new Array(values[key]); 11 | } 12 | values[key].push(text); 13 | } else { 14 | values[key] = text; 15 | } 16 | } 17 | return values; 18 | } -------------------------------------------------------------------------------- /js/houdini/image-cross.js: -------------------------------------------------------------------------------- 1 | class CrossPainter { 2 | static get inputProperties() { 3 | return ['--border-thin', '--color-dark']; 4 | } 5 | 6 | paint(ctx, size, props) { 7 | ctx.lineWidth = props.get('--border-thin').value; 8 | ctx.strokeStyle = props.get('--color-dark').toString(); 9 | ctx.beginPath(); 10 | ctx.moveTo(0, 0); 11 | ctx.lineTo(size.width, size.height); 12 | ctx.stroke(); 13 | ctx.beginPath(); 14 | ctx.moveTo(size.width, 0); 15 | ctx.lineTo(0, size.height); 16 | ctx.stroke(); 17 | } 18 | } 19 | 20 | registerPaint('image-cross', CrossPainter); -------------------------------------------------------------------------------- /docs/js/houdini/image-cross.js: -------------------------------------------------------------------------------- 1 | class CrossPainter { 2 | static get inputProperties() { 3 | return ['--border-thin', '--color-dark']; 4 | } 5 | 6 | paint(ctx, size, props) { 7 | ctx.lineWidth = props.get('--border-thin').value; 8 | ctx.strokeStyle = props.get('--color-dark').toString(); 9 | ctx.beginPath(); 10 | ctx.moveTo(0, 0); 11 | ctx.lineTo(size.width, size.height); 12 | ctx.stroke(); 13 | ctx.beginPath(); 14 | ctx.moveTo(size.width, 0); 15 | ctx.lineTo(0, size.height); 16 | ctx.stroke(); 17 | } 18 | } 19 | 20 | registerPaint('image-cross', CrossPainter); -------------------------------------------------------------------------------- /css/components/Radios.css: -------------------------------------------------------------------------------- 1 | r-adios label { 2 | font-weight: normal; 3 | } 4 | 5 | r-adios label + label { 6 | margin-top: var(--s-1); 7 | margin-bottom: 0; 8 | } 9 | 10 | r-adios .radio-radio { 11 | display: inline-block; 12 | width: 1.5rem; 13 | height: 1.5rem; 14 | border: var(--border-thin) solid; 15 | border-radius: 50%; 16 | vertical-align: middle; 17 | } 18 | 19 | r-adios :focus + .radio-label .radio-radio { 20 | outline: var(--outline); 21 | } 22 | 23 | r-adios :checked + .radio-label .radio-radio { 24 | background-color: var(--color-dark); 25 | box-shadow: inset 0 0 0 0.25rem var(--color-light); 26 | } -------------------------------------------------------------------------------- /docs/css/components/Radios.css: -------------------------------------------------------------------------------- 1 | r-adios label { 2 | font-weight: normal; 3 | } 4 | 5 | r-adios label + label { 6 | margin-top: var(--s-1); 7 | margin-bottom: 0; 8 | } 9 | 10 | r-adios .radio-radio { 11 | display: inline-block; 12 | width: 1.5rem; 13 | height: 1.5rem; 14 | border: var(--border-thin) solid; 15 | border-radius: 50%; 16 | vertical-align: middle; 17 | } 18 | 19 | r-adios :focus + .radio-label .radio-radio { 20 | outline: var(--outline); 21 | } 22 | 23 | r-adios :checked + .radio-label .radio-radio { 24 | background-color: var(--color-dark); 25 | box-shadow: inset 0 0 0 0.25rem var(--color-light); 26 | } -------------------------------------------------------------------------------- /js/components/Center.js: -------------------------------------------------------------------------------- 1 | // https://github.com/Heydon/bruck#c-enter 2 | 3 | export default class Center extends HTMLElement { 4 | constructor() { 5 | super(); 6 | this.maxWidth = this.getAttribute('maxWidth') || 'var(--measure)'; 7 | 8 | const tmpl = document.createElement('template'); 9 | tmpl.innerHTML = ` 10 | 15 | 16 | `; 17 | 18 | this.attachShadow({ mode: 'open' }); 19 | this.shadowRoot.appendChild(tmpl.content.cloneNode(true)); 20 | } 21 | } 22 | 23 | customElements.define('c-enter', Center); -------------------------------------------------------------------------------- /js/components/Clone.js: -------------------------------------------------------------------------------- 1 | // https://github.com/Heydon/bruck#c-lone 2 | 3 | export default class Clone extends HTMLElement { 4 | constructor() { 5 | super(); 6 | this.of = this.getAttribute('of'); 7 | if (!this.of) { 8 | console.error('Each element must have an `of` attribute pointing to a