From 0ef101b1e70b4d2791a2c4f751ca5d0c0b1136d0 Mon Sep 17 00:00:00 2001 From: "Zed A. Shaw" Date: Tue, 21 Jun 2022 17:46:09 -0400 Subject: [PATCH] Initial commit with a few early examples and documentation. --- package-lock.json | 679 ++++++++++++++++++++++++++++++++++++++++ package.json | 18 ++ public/blockstart.css | 196 ++++++++++++ public/demos/asana.html | 111 +++++++ public/demos/canva.html | 158 ++++++++++ public/index.html | 367 ++++++++++++++++++++++ public/template.html | 18 ++ 7 files changed, 1547 insertions(+) create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/blockstart.css create mode 100644 public/demos/asana.html create mode 100644 public/demos/canva.html create mode 100644 public/index.html create mode 100644 public/template.html diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..41883f8 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,679 @@ +{ + "name": "blockstart", + "version": "1.0.0", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "blockstart", + "version": "1.0.0", + "license": "MIT", + "dependencies": { + "http-server": "^14.1.1" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/async": { + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", + "dependencies": { + "lodash": "^4.17.14" + } + }, + "node_modules/basic-auth": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz", + "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==", + "dependencies": { + "safe-buffer": "5.1.2" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "dependencies": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "node_modules/corser": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", + "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==", + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "dependencies": { + "ms": "^2.1.1" + } + }, + "node_modules/eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" + }, + "node_modules/follow-redirects": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz", + "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + }, + "node_modules/get-intrinsic": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz", + "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==", + "dependencies": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.3" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "dependencies": { + "function-bind": "^1.1.1" + }, + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "engines": { + "node": ">=8" + } + }, + "node_modules/has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "bin": { + "he": "bin/he" + } + }, + "node_modules/html-encoding-sniffer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", + "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==", + "dependencies": { + "whatwg-encoding": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/http-proxy": { + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", + "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", + "dependencies": { + "eventemitter3": "^4.0.0", + "follow-redirects": "^1.0.0", + "requires-port": "^1.0.0" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/http-server": { + "version": "14.1.1", + "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz", + "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==", + "dependencies": { + "basic-auth": "^2.0.1", + "chalk": "^4.1.2", + "corser": "^2.0.1", + "he": "^1.2.0", + "html-encoding-sniffer": "^3.0.0", + "http-proxy": "^1.18.1", + "mime": "^1.6.0", + "minimist": "^1.2.6", + "opener": "^1.5.1", + "portfinder": "^1.0.28", + "secure-compare": "3.0.1", + "union": "~0.5.0", + "url-join": "^4.0.1" + }, + "bin": { + "http-server": "bin/http-server" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/minimist": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", + "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==" + }, + "node_modules/mkdirp": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", + "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", + "dependencies": { + "minimist": "^1.2.6" + }, + "bin": { + "mkdirp": "bin/cmd.js" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "node_modules/object-inspect": { + "version": "1.12.2", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz", + "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/opener": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz", + "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==", + "bin": { + "opener": "bin/opener-bin.js" + } + }, + "node_modules/portfinder": { + "version": "1.0.28", + "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", + "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==", + "dependencies": { + "async": "^2.6.2", + "debug": "^3.1.1", + "mkdirp": "^0.5.5" + }, + "engines": { + "node": ">= 0.12.0" + } + }, + "node_modules/qs": { + "version": "6.10.5", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz", + "integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==", + "dependencies": { + "side-channel": "^1.0.4" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" + }, + "node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, + "node_modules/secure-compare": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz", + "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==" + }, + "node_modules/side-channel": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", + "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==", + "dependencies": { + "call-bind": "^1.0.0", + "get-intrinsic": "^1.0.2", + "object-inspect": "^1.9.0" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/union": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz", + "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==", + "dependencies": { + "qs": "^6.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/url-join": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz", + "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==" + }, + "node_modules/whatwg-encoding": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", + "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", + "dependencies": { + "iconv-lite": "0.6.3" + }, + "engines": { + "node": ">=12" + } + } + }, + "dependencies": { + "ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "requires": { + "color-convert": "^2.0.1" + } + }, + "async": { + "version": "2.6.4", + "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz", + "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==", + "requires": { + "lodash": "^4.17.14" + } + }, + "basic-auth": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz", + "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==", + "requires": { + "safe-buffer": "5.1.2" + } + }, + "call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "requires": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + } + }, + "chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, + "color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "requires": { + "color-name": "~1.1.4" + } + }, + "color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" + }, + "corser": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", + "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==" + }, + "debug": { + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", + "requires": { + "ms": "^2.1.1" + } + }, + "eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" + }, + "follow-redirects": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz", + "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==" + }, + "function-bind": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", + "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==" + }, + "get-intrinsic": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz", + "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==", + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.3" + } + }, + "has": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz", + "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==", + "requires": { + "function-bind": "^1.1.1" + } + }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==" + }, + "has-symbols": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz", + "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==" + }, + "he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==" + }, + "html-encoding-sniffer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", + "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==", + "requires": { + "whatwg-encoding": "^2.0.0" + } + }, + "http-proxy": { + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", + "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", + "requires": { + "eventemitter3": "^4.0.0", + "follow-redirects": "^1.0.0", + "requires-port": "^1.0.0" + } + }, + "http-server": { + "version": "14.1.1", + "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz", + "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==", + "requires": { + "basic-auth": "^2.0.1", + "chalk": "^4.1.2", + "corser": "^2.0.1", + "he": "^1.2.0", + "html-encoding-sniffer": "^3.0.0", + "http-proxy": "^1.18.1", + "mime": "^1.6.0", + "minimist": "^1.2.6", + "opener": "^1.5.1", + "portfinder": "^1.0.28", + "secure-compare": "3.0.1", + "union": "~0.5.0", + "url-join": "^4.0.1" + } + }, + "iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "requires": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + } + }, + "lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==" + }, + "minimist": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz", + "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==" + }, + "mkdirp": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz", + "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==", + "requires": { + "minimist": "^1.2.6" + } + }, + "ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, + "object-inspect": { + "version": "1.12.2", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz", + "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==" + }, + "opener": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz", + "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==" + }, + "portfinder": { + "version": "1.0.28", + "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", + "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==", + "requires": { + "async": "^2.6.2", + "debug": "^3.1.1", + "mkdirp": "^0.5.5" + } + }, + "qs": { + "version": "6.10.5", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.5.tgz", + "integrity": "sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==", + "requires": { + "side-channel": "^1.0.4" + } + }, + "requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" + }, + "safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + }, + "safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + }, + "secure-compare": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz", + "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==" + }, + "side-channel": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz", + "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==", + "requires": { + "call-bind": "^1.0.0", + "get-intrinsic": "^1.0.2", + "object-inspect": "^1.9.0" + } + }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "requires": { + "has-flag": "^4.0.0" + } + }, + "union": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz", + "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==", + "requires": { + "qs": "^6.4.0" + } + }, + "url-join": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz", + "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==" + }, + "whatwg-encoding": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", + "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", + "requires": { + "iconv-lite": "0.6.3" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..b6e819b --- /dev/null +++ b/package.json @@ -0,0 +1,18 @@ +{ + "name": "blockstart", + "version": "1.0.0", + "description": "A CSS file for doing initial layouts quickly.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git@git.learnjsthehardway.com:zedshaw/blockstart.git" + }, + "author": "Zed A. Shaw", + "license": "MIT", + "dependencies": { + "http-server": "^14.1.1" + } +} diff --git a/public/blockstart.css b/public/blockstart.css new file mode 100644 index 0000000..4ffbba1 --- /dev/null +++ b/public/blockstart.css @@ -0,0 +1,196 @@ +:root { + --color-border: hsl(0, 0%, 50%); + --border-radius: 5px; + --value0: hsl(0, 0%, 0%); + --value1: hsl(0, 0%, 11%); + --value2: hsl(0, 0%, 22%); + --value3: hsl(0, 0%, 33%); + --value4: hsl(0, 0%, 44%); + --value5: hsl(0, 0%, 55%); + --value6: hsl(0, 0%, 66%); + --value7: hsl(0, 0%, 77%); + --value8: hsl(0, 0%, 88%); + --value9: hsl(0, 0%, 100%); + --text: 0; +} + +body { + color: hsl(0, 0%, calc(var(--text) * 11%)); + display: flex; + flex-direction: column; + justify-content: flex-start; + padding: 0px; + margin: 0px; +} + +content { + display: flex; + flex-direction: column; +} + +a { + color: hsl(0, 0%, calc(var(--text) * 11%)); +} + +block { + color: hsl(0, 0%, calc(var(--text) * 11%)); + display: flex; + --spacing: space-evenly; + justify-content: var(--spacing); + flex-direction: column; +} + +block > * { + color: hsl(0, 0%, calc(var(--text) * 11%)); + display: flex; + flex: 1 1 auto; + --spacing: flex-start; + justify-content: var(--spacing); + align-self: stretch; + flex-direction: column; + margin: 2px; +} + +.wide { + width: 100%; +} + +.no-flex { + display: block; + flex: unset; + flex-direction: unset; + align-self: unset; +} + +.center { + justify-content: center; + align-items: center; + align-self: center; +} + +.center-text > * { + text-align: center; +} + +.center-self { + align-self: center; +} + +.vertical { + flex-direction: column; +} + +.horizontal { + flex-direction: row; +} + +grid { + --cols: 1fr 1fr; + --rows: auto; + --gap: 0.5rem; + + color: hsl(0, 0%, calc(var(--text) * 11%)); + display: grid; + grid-gap: var(--gap); + grid-template-columns: var(--cols); + grid-template-rows: var(--rows); +} + +stack { + color: hsl(0, 0%, calc(var(--text) * 11%)); + display: grid; + grid-template-rows: 1fr; + grid-template-columns: 1fr; + grid-template-areas: "cover"; +} + +stack > * { + color: hsl(0, 0%, calc(var(--text) * 11%)); + width: 100%; + height: 100%; + position: relative; + grid-area: cover; +} + +stack > .top { + z-index: 10; +} + +hr { + --height: 1rem; + min-height: var(--height); + visibility: hidden; +} + +shape { + --w: 100%; + --h: 100%; + --value: 4; + + color: hsl(0, 0%, calc(var(--text) * 11%)); + background-color: hsl(0, 0%, calc(var(--value) * 11%)); + display: flex; + width: var(--w); + min-width: var(--w); + max-width: var(--w); + height: var(--h); + min-height: var(--h); + max-height: var(--h); + text-align: center; + justify-content: center; + align-items: center; + align-self: center; +} + +.debug { + border: 1px solid red; +} + +.debug > * { + border: 1px solid blue; +} + +.pad { + --pad: 1rem; + padding: var(--pad); +} + +.sized { + --w: 100%; + --h: 100%; + width: var(--w); + min-width: var(--w); + max-width: var(--w); + height: var(--h); + min-height: var(--h); + max-height: var(--h); +} + +.border { + border: 1px solid var(--color-border); + border-radius: var(--border-radius); +} + +.solid { + --value: 8; + background-color: hsl(0, 0%, calc(var(--value) * 11%)); +} + +.dots { + --pat-val: 7; + + background-image: radial-gradient(hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px); + background-size: calc(10 * 1px) calc(10 * 1px); +} + +.lines { + --pat-val: 7; + background-image: linear-gradient(hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px), linear-gradient(to right, hsl(0, 0%, calc(var(--pat-val) * 11%)) 1px, transparent 1px); + background-size: 10px 10px; +} + +.stripes { + --pat-val: 7; + background-image: linear-gradient(90deg, transparent 50%, hsl(0, 0%, calc(var(--pat-val) * 11%)) 50%); + background-size: 10px 10px; +} diff --git a/public/demos/asana.html b/public/demos/asana.html new file mode 100644 index 0000000..0e2998a --- /dev/null +++ b/public/demos/asana.html @@ -0,0 +1,111 @@ + + + + + + + Blockstart Test + + + + + + + + + + asana + G | M U + + + +
+

Bring products to market faster with Asana

+

Asana is the easiest way for product managers to track their team's work—and get results.

+
+ + + +
+ +

Asana is the easiest way for product teams to...

+ +
+ + +

Plan product roadmaps

+

Use Asana as a source of truth to set goals, align on priorities, and track product milestones.

+ + +
+ + +

Plan product roadmaps

+

Use Asana as a source of truth to set goals, align on priorities, and track product milestones.

+ + +
+ + +

Plan product roadmaps

+

Use Asana as a source of truth to set goals, align on priorities, and track product milestones.

+ + +
+ + + + +
+ + +

Screenshot

+ + + +

Move fast without breaking things

+

Using Asana as your product roadmap tool helps you track project progress, identify blockers, and shift resources on the fly.

+ + + + +
+ +

Product team use cases

+ + +

Screenshot

+ + +

Typewriter seitan selvage stumptown jean shorts. Messenger bag art party lo-fi, readymade vaporware drinking vinegar lomo pour-over fanny pack DIY kogi whatever.

+ + +
+ + +

Video

+ + +
+ + +
+

Product Quotes

+
"Some dude says that some dude is great."
+
+ + +
+ +

Ship product faster with Asana today

+

See why millions of people use asana...

+ + + +
+ +

Footer

+ + + diff --git a/public/demos/canva.html b/public/demos/canva.html new file mode 100644 index 0000000..94e13a5 --- /dev/null +++ b/public/demos/canva.html @@ -0,0 +1,158 @@ + + + + + + + Blockstart Test + + + + + + + + +
Canva
+ + ? + + + + + +

Canva. Design for everyone.

+ +

Iceland bespoke polaroid pug raclette kinfolk tumblr lo-fi asymmetrical chillwave church-key. Bespoke sustainable +1 cred, heirloom chicharrones kitsch tousled. Mixtape schlitz air plant iceland hot chicken, bicycle rights poutine austin bespoke. Stumptown schlitz keytar meggings taiyaki vice next level ugh. Fam vaporware cliche jean shorts listicle narwhal gluten-free vape. Af godard health goth, iPhone edison bulb shaman you probably haven't heard of them mustache photo booth etsy gochujang subway tile cronut. Helvetica ugh seitan, semiotics before they sold out hella hot chicken gastropub try-hard.

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

Demo Image

+ + + +
+ + + +
Letterpress leggings bitters drinking vinegar asymmetrical godard slow-carb tumeric.
+
Tote bag bespoke whatever, godard stumptown hammock selvage hot chicken vinyl 3 wolf moon asymmetrical roof party farm-to-table.
+ + +
Fixie wayfarers fingerstache drinking vinegar, marfa flannel art party cray pour-over coloring book.
+ + +
+ + +

Templates

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

Work solo, or as a team

+

Letterpress leggings bitters drinking vinegar asymmetrical godard slow-carb tumeric.

+ + +
+ + + +

Team folders to help you stay organized, store brand assets, and manage content

+

Plan, create, schedule and publish your social media posts directly from Canva

+

Real-time collaboration across countries, companies, and departments

+

Built-in comments to communicate, work, and resolve suggestions in real-time

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

A perfect fit for every team

+
+ + + +

Canva Free

+

Bitters DIY semiotics, banjo tilde fingerstache church-key woke pitchfork yr pickled tattooed yuccie. vetica vegan, chartreuse intelligentsia affogato craft beer poutine viral health got

+
+ + + +

Canva Pro

+

vetica vegan, chartreuse intelligentsia affogato craft beer poutine viral health got meggings poke keffiyeh chambray forage swag bicycle rights.

+
+ + + +

Canva Enterprise

+

Bitters DIY semiotics, banjo tilde fingerstache church-key woke pitchfork yr pickled tattooed yuccie.

+
+ + + + + +
+ + +

Loved by people and businesses around the world

+ + + + + Ennui af cred, raw denim lo-fi +1 meggings poke keffiyeh chambray forage swag bicycle rights. + + + + + Bitters DIY semiotics, banjo tilde fingerstache church-key woke pitchfork yr pickled tattooed yuccie. + + + + + Microdosing aesthetic poke helvetica vegan, chartreuse intelligentsia affogato craft beer poutine viral health goth. + + + + +
+ + +

Footer

+ + + diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..4db3991 --- /dev/null +++ b/public/index.html @@ -0,0 +1,367 @@ + + + + + + + Starting Template + + + + + + + + + +
blockstart.css
+
+ About  |  + Docs  |  + Demos  |  + Theory  |  + Download +
+ + + +
+

The blockstart.css

+

Quickly get your initial layout idea done with minimal CSS and HTML.

+
+ + + +

About blockstart.css

+

The blockstart.css file gives you a simple set of basic layout primitives to get started. It allows you to follow a process similar to painters:

+ +
    +
  1. Organize the big "gross" structure without details in monochrome.
    2. +
  2. Develop a first statement with a meaningful structure and a simplified monochrome design.
    3. +
  3. Refine a second statement by filling in the structure with content and additional refinements for that content.
    4. +
  4. Complete a third statement with further refined details, fonts, and color schemes.
    5. +
+ +

In practical terms this means:

+ +
    +
  1. Use blockstart.css to get a "chunky" boxes and grids layout.
    2. +
  2. Replace the blockstart.css with semantic HTML tags and your own CSS, adding first refinements.
    3. +
  3. Fill in your blocks with media so you have something to design around that's real, refining further.
    4. +
  4. Develop this last stage of the design with font choices, color, and other details that fit the content.
    5. +
+ +

The blockstart.css file helps with this process by giving you the minimum necessary blocks to create the first statement. There is almost nothing in the CSS, making it easy to replace in later stages...if you want.

+ +

Blocks

+ +

The <block> is the main structure. It's a block. When you put things in it, they stay in there. That's how a block should work:

+ + +

I am inside a block.

+ + +

Debugging

+ +

Not sure where the boxes are? Add class="debug" to the block (or grid) and it will put a red border around the outer box, then a blue border around the children:

+ + +

I am inside a block, see it now?.

+ + +

Blocks Propagate

+ +

The first children in a block become a blocks too. In the beginning that's usually what you want. This means you don't need to put blocks inside blocks unless you want to. You can remove this on an element with class="no-flex":

+ + + +

Line 1

+

Line 2

+ + +

No Flex Line 1

+

No Flex Line 2

+ + + +

In that example, the "No Flex" lines are spaced normally because the code has class="no-flex" on that block.

+ +

Solid Blocks

+ +

You can make a block solid with class="solid"

+ + +

I am inside a solid block.

+ + +

Notice how it takes up the whole page? Notice how it is monochrome? That's all you need. You can change the "value" of a solid block with a variable style="--value: 3":

+ + +

I am inside a solid dark block.

+ + +

We can't read that text so we need something called a "Value."

+ +

Values

+ +

What's a value? A value represents a simple number for the "light" and "dark" of something. Think of it as a measure of the amount of light produced. A value 9 object gives off a lot of light, so it's white. A value 0 object gives off no light, so it's black. You can do most initial designs with only 5 values, but blockstart.css has 10 (0-9) to help with contrast. You can usually change the background with --value: 0 and the text with --text: 9 in most places.

+ +

We can fix that last block's contrast with value 9 text using style="--text: 9;":

+ + + +

I am inside a solid dark block too.

+ + +

If we use style="--value: 0; --text: 9;" we can get a high contast dark block:

+ + +

I am inside a solid black block.

+ + +

Values make it easier to solve contrast in your designs because you don't have to think about thousands of colors and their luminance levels. Just make the difference in value between your text (the subject) and background (the ground) to increase contrast. In the previous block the difference was 9 because background is value 0 and text is value 9.

+ + +

Shapes

+ +

You always need some kind of rectangle shape to represent where a photo might go, and the shape tag handles that:

+ + +

Image

+ + +

You set the shape's size with style="--w: 300px; --h: 300px;".

+ +

Padding

+ +

Just add class="pad" to give a simple 1rem padding to a block. Use the variable style="--pad: 1rem" to change its padding.

+ +

Borders

+ +

Things need borders and you can add a border with class="border":

+ + +

This box has a border

+ + +

Center

+ +

Many times in the beginning you'll want to say something is centered, and you mean the whole thing, not just randomly the box but not its content. Add class="center" and it will be centered:

+ + +

This Block Is Center

+

You say it's centered, it's centered.

+ + +

Notice the text isn't centered, because many times you don't want centered text. On landing pages it seems that everything is centered, so you can add center-text to also center the text. You can place this on anything too, not just blocks:

+ + +

This Text is Center Too

+

Ok, now it's totally centered.

+ + +

You can also add class="center-self" on + elements that you want to center but not really the contents, and when it's not explicitly a block tag but you want it centered.

+ + + + DEMO + + + +

Patterns

+ +

Sometimes you need a little indicator for a block to make it different for later changes. You can use three patterns of stripes, lines, and dots.

+ + + +

Solid

+ + + +

Dots

+ + + +

Lines

+ + + +

You can change the line/dot/stripe color with --pat-val, and combine it with the block background setting --value. For example, these are all white patterns on black blocks:

+ + + +

Dots

+ + + +

Lines

+ + + +

Stripes

+ + + +

Horizontal

+ +

By default blocks are vertical, like a web page, because blocks being horizontal by default is stupid. You can make a block horizontal with class="horizontal", and then make it vertical again with class="vertical". Here's a side-by-side block using horizontal:

+ + + +

I'm Left

+

Everything is set to flex, 'cause + that's easier.

+ + + +

I'm Right

+

That makes doing left and right oriented + content that actually contains what it holds + easier. +

+ + + +

Spacer

+ +

You can add a basic spacing between blocks with <hr> tags. The line is hidden.

+ +

Grids

+ +

+ You can make a grid, and it'll actually be a grid, that + contains its contents. Amazing. Your boxes can also have + solid backgrounds or dots, stripes, and lines. +

+ +

You set the rows, columns, and gap with style variables --rows, --columns, and --gap like so: + +

<grid style="--rows: auto; --cols: 1fr 1fr 1fr; --gap: 1rem;">
+ +

Here is that grid setting using blocks inside for each of the patterns:

+ + + +

Grids

+ + + +

Solid

+ + + +

Dots

+ + + +

Lines

+ + + +

Stripes

+ + + +

Solid

+ + + +

Dots

+ + + +

Lines

+ + + +

Stripes

+ + + + +

Stacked Layers

+ +

Frequently you need to use multiple layers as in an image with text on top. You might not need this in the layout phase, but in the first statement it does come up. The stack tag will position all of it's children on top of each other in order, and you can set one as the top with class="top".

+ +

In this demo I have a block with "I'm on Bottom" that I cover with another block that uses a stripes pattern. This gives the effect of putting the text behind bars. Remember that these stack in the reverse order you write them, unless you tag one with class="top". +

+ + + +

I'm on Bottom

+ + + +

I'm on Top

+ + + +

I put class="debug" around the "I'm on Top" class so you can see where it gets placed. The "top" block has the lines and you can read the text clearly. The "I'm on Bottom" text is hiding behined these lines. +

+ +

Content

+ +

Many times you want one section to take up the whole page width, but then content under that to be padded. You can just manually set the width most of the time, or use the content tag. Add on the class="pad" to give it padding, or class="sized" to set its width or height. +

+ +

Getting Started

+ +

Once you download the blockstart.css you need a web server. For people who use Node.js you can run the http-server package to get a simple one. Here's the commands that I use to get a project started:

+ +
+
+mkdir myproject
+cd myproject
+npm init
+# Answer all the questions
+npm install http-server
+mkdir public
+npx http-server -d -c-1 public
+
+
+ +

Once you do that you can place the blockstart.css in the public/ directory and start putting your .html files in the same place. Here's a decen starter template:

+ +
+
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Blockstart Template</title>
+  <link rel="stylesheet" href="/blockstart.css">
+<style>
+</style>
+</head>
+<body>
+</body>
+</html>
+
+
+ +

There's a lot you can add to an HTML page to make it work on different platforms, including all the icons ever invented by Apple, but this file gets you started when using the blockstart.css. +

+ + + + diff --git a/public/template.html b/public/template.html new file mode 100644 index 0000000..e5f8b0e --- /dev/null +++ b/public/template.html @@ -0,0 +1,18 @@ + + + + + + + Blockstart Template + + + + + + + + + +