diff --git a/.DS_Store b/.DS_Store index 3771460..04bb4b3 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..3844985 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,5 @@ +dist/ + +*.html +*.js +package-lock.json \ No newline at end of file diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..9e67d6b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "trailingComma": "all", + "useTabs": true, + "tabWidth": 4 +} diff --git a/README.md b/README.md index 9bbd4a3..c369bb4 100644 --- a/README.md +++ b/README.md @@ -4,39 +4,58 @@ A UI component set for the web. ## For developers -Wireframe is delivered as three files: +Wireframe exists as three files: + - A stylesheet containing all css components - A javascript module exporting all web components - A json file with template elements for SSR (strings) All components are RTL (right-to-left) compatible. +## For designers + +`Wireframe` is named after the process of drafting lo-fi user interfaces with pen and paper. It's also a reference to the polygon meshes found in graphics programming. + +`Wireframe` is an aesthetically concise UI language. Components must differentiate themselves +from text and each other. Their functionality is telegraphed by their visual accent. + +Creature comforts like shadows, gradients, and expanding circles ultimately are designed for +other designers (and promotions). They do nothing of signifigance for the user. + +Consider `wireframe` a love letter to my former colleagues at Material Design. + ## CSS components A single css stylesheet includes the following components: + - button + - primary button + - destructive button - checkbox - meter - number inputs - - number - - phone - - time - - date - - datetime-local + - number + - phone + - time + - date + - datetime-local - progress - radio - slider - switch - textarea - text inputs - - text - - password - - email - - url + - text + - password + - email + - url + +- :focus ring ## Web components The following web components are available: + - inline movement ## License diff --git a/bundle/src/mod.ts b/bundle/src/mod.ts index c2fbb42..fd5a6b0 100644 --- a/bundle/src/mod.ts +++ b/bundle/src/mod.ts @@ -2,7 +2,7 @@ import * as fs from "fs"; import * as path from "path"; -import { bundle } from 'lightningcss'; +import { bundle } from "lightningcss"; let originCssPathInput = process.argv[2]; let targetCssPathInput = process.argv[3]; @@ -10,15 +10,15 @@ let targetCssPathInput = process.argv[3]; let cwd = process.cwd(); // odd way of handling this ../../../ for two dirs / and a file -let originCssPath = path.join(cwd, originCssPathInput); +let filename = path.join(cwd, originCssPathInput); let targetCssPath = path.join(cwd, targetCssPathInput); -let { code, map } = bundle({ - filename: originCssPath, +let { code } = bundle({ + filename, }); try { - fs.writeFileSync(targetCssPath, code); + fs.writeFileSync(targetCssPath, code); } catch (err) { - console.error(err); + console.error(err); } diff --git a/bundle/tsconfig.json b/bundle/tsconfig.json index 4bd8f1c..2a35468 100644 --- a/bundle/tsconfig.json +++ b/bundle/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "../tsconfig.json", "compilerOptions": { + "types": ["node"], "rootDir": "./src", "outDir": "./dist" } diff --git a/components/src/component_templates.json b/components/src/component_templates.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/components/src/component_templates.json @@ -0,0 +1 @@ +{} diff --git a/components/src/inline_movement.ts b/components/src/inline_movement.ts index e47889a..153555e 100644 --- a/components/src/inline_movement.ts +++ b/components/src/inline_movement.ts @@ -1,25 +1,19 @@ // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#using_tabindex - -// correlates to start and end - -// get bounding rectangle of first and last child -// determine directionality - -export const shadowDom = ``; -export const template = `