├── .babelrc ├── .eslintrc ├── .gitignore ├── .travis.yml ├── .zuul.yml ├── History.md ├── Makefile ├── Readme.md ├── component.json ├── dist ├── matter.css └── matter.js ├── examples ├── button.js ├── code.js ├── index.js ├── menu.js ├── shape.js ├── table.js └── text-field.js ├── index.css ├── index.js ├── lib ├── button │ ├── index.css │ └── index.js ├── checkbox │ ├── checkbox.svg │ ├── index.css │ └── index.js ├── code │ ├── index.css │ └── index.js ├── colors │ └── index.css ├── grid │ ├── index.css │ └── index.js ├── index.css ├── index.js ├── menu │ ├── index.css │ └── index.js ├── shape │ ├── index.css │ └── index.js ├── table │ ├── index.css │ └── index.js ├── text-field │ ├── index.css │ └── index.js ├── theme │ └── index.css └── typography │ ├── index.css │ ├── san-francisco-display │ ├── index.css │ ├── sanfranciscodisplay-black-webfont.eot │ ├── sanfranciscodisplay-black-webfont.svg │ ├── sanfranciscodisplay-black-webfont.ttf │ ├── sanfranciscodisplay-black-webfont.woff │ ├── sanfranciscodisplay-black-webfont.woff2 │ ├── sanfranciscodisplay-bold-webfont.eot │ ├── sanfranciscodisplay-bold-webfont.svg │ ├── sanfranciscodisplay-bold-webfont.ttf │ ├── sanfranciscodisplay-bold-webfont.woff │ ├── sanfranciscodisplay-bold-webfont.woff2 │ ├── sanfranciscodisplay-heavy-webfont.eot │ ├── sanfranciscodisplay-heavy-webfont.svg │ ├── sanfranciscodisplay-heavy-webfont.ttf │ ├── sanfranciscodisplay-heavy-webfont.woff │ ├── sanfranciscodisplay-heavy-webfont.woff2 │ ├── sanfranciscodisplay-light-webfont.eot │ ├── sanfranciscodisplay-light-webfont.svg │ ├── sanfranciscodisplay-light-webfont.ttf │ ├── sanfranciscodisplay-light-webfont.woff │ ├── sanfranciscodisplay-light-webfont.woff2 │ ├── sanfranciscodisplay-medium-webfont.eot │ ├── sanfranciscodisplay-medium-webfont.svg │ ├── sanfranciscodisplay-medium-webfont.ttf │ ├── sanfranciscodisplay-medium-webfont.woff │ ├── sanfranciscodisplay-medium-webfont.woff2 │ ├── sanfranciscodisplay-regular-webfont.eot │ ├── sanfranciscodisplay-regular-webfont.svg │ ├── sanfranciscodisplay-regular-webfont.ttf │ ├── sanfranciscodisplay-regular-webfont.woff │ ├── sanfranciscodisplay-regular-webfont.woff2 │ ├── sanfranciscodisplay-semibold-webfont.eot │ ├── sanfranciscodisplay-semibold-webfont.svg │ ├── sanfranciscodisplay-semibold-webfont.ttf │ ├── sanfranciscodisplay-semibold-webfont.woff │ ├── sanfranciscodisplay-semibold-webfont.woff2 │ ├── sanfranciscodisplay-thin-webfont.eot │ ├── sanfranciscodisplay-thin-webfont.svg │ ├── sanfranciscodisplay-thin-webfont.ttf │ ├── sanfranciscodisplay-thin-webfont.woff │ ├── sanfranciscodisplay-thin-webfont.woff2 │ ├── sanfranciscodisplay-ultralight-webfont.eot │ ├── sanfranciscodisplay-ultralight-webfont.svg │ ├── sanfranciscodisplay-ultralight-webfont.ttf │ ├── sanfranciscodisplay-ultralight-webfont.woff │ └── sanfranciscodisplay-ultralight-webfont.woff2 │ └── san-francisco-text │ ├── index.css │ ├── sanfranciscotext-bold-webfont.eot │ ├── sanfranciscotext-bold-webfont.svg │ ├── sanfranciscotext-bold-webfont.ttf │ ├── sanfranciscotext-bold-webfont.woff │ ├── sanfranciscotext-bold-webfont.woff2 │ ├── sanfranciscotext-bolditalic-webfont.eot │ ├── sanfranciscotext-bolditalic-webfont.svg │ ├── sanfranciscotext-bolditalic-webfont.ttf │ ├── sanfranciscotext-bolditalic-webfont.woff │ ├── sanfranciscotext-bolditalic-webfont.woff2 │ ├── sanfranciscotext-heavy-webfont.eot │ ├── sanfranciscotext-heavy-webfont.svg │ ├── sanfranciscotext-heavy-webfont.ttf │ ├── sanfranciscotext-heavy-webfont.woff │ ├── sanfranciscotext-heavy-webfont.woff2 │ ├── sanfranciscotext-heavyitalic-webfont.eot │ ├── sanfranciscotext-heavyitalic-webfont.svg │ ├── sanfranciscotext-heavyitalic-webfont.ttf │ ├── sanfranciscotext-heavyitalic-webfont.woff │ ├── sanfranciscotext-heavyitalic-webfont.woff2 │ ├── sanfranciscotext-light-webfont.eot │ ├── sanfranciscotext-light-webfont.svg │ ├── sanfranciscotext-light-webfont.ttf │ ├── sanfranciscotext-light-webfont.woff │ ├── sanfranciscotext-light-webfont.woff2 │ ├── sanfranciscotext-lightitalic-webfont.eot │ ├── sanfranciscotext-lightitalic-webfont.svg │ ├── sanfranciscotext-lightitalic-webfont.ttf │ ├── sanfranciscotext-lightitalic-webfont.woff │ ├── sanfranciscotext-lightitalic-webfont.woff2 │ ├── sanfranciscotext-medium-webfont.eot │ ├── sanfranciscotext-medium-webfont.svg │ ├── sanfranciscotext-medium-webfont.ttf │ ├── sanfranciscotext-medium-webfont.woff │ ├── sanfranciscotext-medium-webfont.woff2 │ ├── sanfranciscotext-mediumitalic-webfont.eot │ ├── sanfranciscotext-mediumitalic-webfont.svg │ ├── sanfranciscotext-mediumitalic-webfont.ttf │ ├── sanfranciscotext-mediumitalic-webfont.woff │ ├── sanfranciscotext-mediumitalic-webfont.woff2 │ ├── sanfranciscotext-regular-webfont.eot │ ├── sanfranciscotext-regular-webfont.svg │ ├── sanfranciscotext-regular-webfont.ttf │ ├── sanfranciscotext-regular-webfont.woff │ ├── sanfranciscotext-regular-webfont.woff2 │ ├── sanfranciscotext-regularitalic-webfont.eot │ ├── sanfranciscotext-regularitalic-webfont.svg │ ├── sanfranciscotext-regularitalic-webfont.ttf │ ├── sanfranciscotext-regularitalic-webfont.woff │ ├── sanfranciscotext-regularitalic-webfont.woff2 │ ├── sanfranciscotext-semibold-webfont.eot │ ├── sanfranciscotext-semibold-webfont.svg │ ├── sanfranciscotext-semibold-webfont.ttf │ ├── sanfranciscotext-semibold-webfont.woff │ ├── sanfranciscotext-semibold-webfont.woff2 │ ├── sanfranciscotext-semibolditalic-webfont.eot │ ├── sanfranciscotext-semibolditalic-webfont.svg │ ├── sanfranciscotext-semibolditalic-webfont.ttf │ ├── sanfranciscotext-semibolditalic-webfont.woff │ ├── sanfranciscotext-semibolditalic-webfont.woff2 │ ├── sanfranciscotext-thin-webfont.eot │ ├── sanfranciscotext-thin-webfont.svg │ ├── sanfranciscotext-thin-webfont.ttf │ ├── sanfranciscotext-thin-webfont.woff │ ├── sanfranciscotext-thin-webfont.woff2 │ ├── sanfranciscotext-thinitalic-webfont.eot │ ├── sanfranciscotext-thinitalic-webfont.svg │ ├── sanfranciscotext-thinitalic-webfont.ttf │ ├── sanfranciscotext-thinitalic-webfont.woff │ └── sanfranciscotext-thinitalic-webfont.woff2 ├── package.json ├── preview.css ├── preview.html ├── preview.js ├── support ├── deploy.js ├── duo.js └── preview.js └── test ├── button.js ├── checkbox.js ├── code.js ├── grid.js ├── menu.js ├── shape.js ├── table.js └── text-field.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "es2015", 4 | "react" 5 | ], 6 | "plugins": [ 7 | ["transform-react-jsx", { "pragma": "element" }] 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "node": true, 5 | "mocha": true, 6 | "es6": true 7 | }, 8 | "rules": { 9 | "brace-style": [2, "1tbs", { "allowSingleLine": true }], 10 | "camelcase": 0, 11 | "comma-style": [2, "last"], 12 | "consistent-this": [0, "self"], 13 | "curly": [2, "multi-line"], 14 | "default-case": 2, 15 | "dot-location": [2, "property"], 16 | "dot-notation": [2, { "allowKeywords": true }], 17 | "generator-star-spacing": [2, "after"], 18 | "guard-for-in": 2, 19 | "indent": [2, 2], 20 | "max-depth": [1, 6], 21 | "max-len": [1, 100, 2], 22 | "max-nested-callbacks": [1, 6], 23 | "max-params": [1, 5], 24 | "no-bitwise": 2, 25 | "no-else-return": 2, 26 | "no-floating-decimal": 2, 27 | "no-inline-comments": 0, 28 | "no-lonely-if": 2, 29 | "no-multiple-empty-lines": [2, {"max": 2}], 30 | "no-nested-ternary": 2, 31 | "no-new-require": 2, 32 | "no-self-compare": 2, 33 | "no-shadow": 0, 34 | "new-cap": [2, {"newIsCap": false, "capIsNew": false}], 35 | "no-throw-literal": 2, 36 | "no-underscore-dangle": 0, 37 | "no-unneeded-ternary": 2, 38 | "no-use-before-define": [2, "nofunc"], 39 | "no-void": 2, 40 | "one-var": [2, "never"], 41 | "object-curly-spacing": [1, "always"], 42 | "operator-linebreak": [2, "before"], 43 | "padded-blocks": [2, "never"], 44 | "quote-props": [2, "as-needed"], 45 | "quotes": [2, "single"], 46 | "radix": 2, 47 | "semi": [2, "always"], 48 | "space-after-keywords": [2, "always"], 49 | "space-before-blocks": [1, "always"], 50 | "space-before-function-paren": [2, "never"], 51 | "space-in-parens": [2, "never"], 52 | "strict": 0, 53 | "valid-jsdoc": [1, { 54 | "prefer": { 55 | "returns": "return" 56 | }, 57 | "requireReturn": false, 58 | "requireReturnDescription": false 59 | }], 60 | "wrap-iife": [2, "outside"], 61 | "wrap-regex": 2, 62 | "yoda": [1, "never"] 63 | }, 64 | "ecmaFeatures": { 65 | "jsx": true, 66 | "modules": true 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | components 3 | .DS_Store 4 | build 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - stable 5 | install: npm update 6 | cache: 7 | directories: 8 | - node_modules 9 | env: 10 | global: 11 | - secure: u34k70cEeYBg5LzLZ+CA1ObgtnXeTXBWminXazwMWBXCHt0JjnfL14fuSVhY/dx7v6exmZtDUn7GGHowcxldIem/+UBhbS20nS5+evhNVBYAEn2A3ozzFaRkBUreDOmzoMu5Z3E7Vs9cvw/SEupIMOziS/jFrRrdsU8DfYvD9QJGJ4sC40CGaz+lKHhaifZIb0fETgtKRRY6XsJ1RDuVLGMJ0/cE0I8FfgaVsHMHeadpU54eWhre1wnFRPijbH3bZWvZHWRoiYxkrRnuEOaz9RIThD9B7aVcTpJxVLhfHbiH3X1Oc0K4t9SU7NfqliukRouCm0wWCw3q6nDXb2DKs5+SadhYKYyIp1X33KL6c+JLAXEaoesobCQWbtrQ/KyghPYcqtM2ixhnWxrSJh2oKOtbuqgWLXgpFE34T7baTRQDNCFI+kIvsvbpgOs6wtNBGuJV2YDsNfSfau/vyXIKs20F0wZs6ZNHwwKwINxnjWVwCmswa/OR/Ap+LU82SVAe+D3Zl4eoBPGDVOM12Ogoo4ppmtFnyWIoi6Mzlbbvr+GtEkDX8dJUOCZp41nO+mf7WPZYqb+2bQYMRIguMYubq3g7ARHFj7FNvnLvZjJ270ByYqCZntoZ8DL8TzbVDmdOBS7efYhuxuq8J1irb3rs7O0rmHW5dS1KRgLXxDzizk0= 12 | - secure: BsHuRzFlORSTPWoxGOf72UEoaMJ7KcSylUYT19CSw9LzxpBPMOUAUuN2XnfQrIUwQRtsqTanFL8nw/e/7gaPefJriEW4EjO6qXfNSGhDA2dVVDeQB2nCiXMSBpIx++DXCfguLAcqXdeIBnZDBlM4aDNtQXHq6MIF2pv1QO278tWgo91SIF4ZX8qKoZ/tl86Fv/p3U6cpn39+sXwy7TZVu0F1kSWeTHrOQRUrg5xNKL5RM8oK2EuSlR0fKkOTk2xB96VgHHyVu/0I/+OQPODsUbX28J7P8y1PzEIkIDLLOJNQEODtpUrK3btnuD8H5FVSgi62oF9j2iH+ZxygRoQAsxSAVWqJbIje1QsNjRWnap5WcoCIVxCtPLGJhsXJUSyYV1OAfxnxyX05SlRNgiNptUdLaf0etM3M2c+0Sj77W/DBCXsomO5gyQZ2yMfxg/dPjQ2GCFJ8/8d7Oyf7uRv33RpXxeANyQMdii6wXJzCluYgzwQu8r6zqF2zJK+qr7+k1NBewuIn2mxMqBfWb1vHtpu/3VlwfKYz57iYBMJTAp2WC9gUg6+1yTY7gFcTr3AZ4+/Ey2IMoSOdANvSqJtlcGK2Cm+vyK7q1Cn4S082pVxOXkWWHwrsvRMAYTucGuDKzZQ2ymtf2TFa+vXISm28hAb7rM37tA6qL9YBdF29RiY= 13 | -------------------------------------------------------------------------------- /.zuul.yml: -------------------------------------------------------------------------------- 1 | ui: mocha-bdd 2 | browserify: 3 | - transform: babelify 4 | browsers: 5 | - name: chrome 6 | version: -1..latest 7 | - name: firefox 8 | version: -1..latest 9 | - name: safari 10 | version: -1..latest 11 | - name: ie 12 | version: -1..latest 13 | -------------------------------------------------------------------------------- /History.md: -------------------------------------------------------------------------------- 1 | 2 | 0.1.3 / January 3rd, 2015 3 | 4 | * Made matter searchable by dekucomponents 5 | 6 | 0.1.2 / December 14th, 2015 7 | 8 | * Added tests 9 | 10 | 0.1.1 / December 14th, 2015 11 | 12 | * Updated eslint rules 13 | 14 | 0.1.0 / December 14th, 2015 15 | 16 | * Switched to browserify 17 | 18 | 0.0.6 / August 31st, 2015 19 | 20 | * Added generic shape component 21 | 22 | 0.0.5 / August 27th, 2015 23 | 24 | * Style updates 25 | 26 | 0.0.4 / August 26th, 2015 27 | 28 | * Updated to use latest Deku 29 | * Switched from Browserify to Duo for example 30 | 31 | 0.0.3 / June 28th, 2015 32 | 33 | * Added checkbox component 34 | 35 | 0.0.2 / June 2nd, 2015 36 | 37 | * Updated package.json 38 | 39 | 0.0.1 / June 2nd, 2015 40 | 41 | * Updated table component 42 | * Updated readme 43 | 44 | 0.0.0 / May 31st, 2015 45 | 46 | * First release 47 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | BIN := ./node_modules/.bin 2 | BROWSERIFY := $(BIN)/browserify 3 | POSTCSS := $(BIN)/postcss 4 | ESLINT := $(BIN)/eslint 5 | 6 | # 7 | # Default. 8 | # 9 | 10 | default: build test-style node_modules 11 | 12 | # 13 | # Build. 14 | # 15 | 16 | build: node_modules 17 | @mkdir -p build 18 | @cp preview.html build/index.html 19 | @$(BROWSERIFY) index.js -t [babelify] > build/preview.js 20 | @$(POSTCSS) -u postcss-import -u postcss-url --postcss-url.url "copy" -u postcss-cssnext -u autoprefixer -o build/preview.css ./preview.css 21 | 22 | # 23 | # Preview. 24 | # 25 | 26 | preview: node_modules 27 | @node --harmony support/preview 28 | 29 | # 30 | # Dist. 31 | # 32 | 33 | dist: node_modules 34 | @mkdir -p dist 35 | @$(BROWSERIFY) index.js -t [ babelify --presets [ es2015 react ] ] > dist/matter.js 36 | @$(POSTCSS) -u postcss-import -u postcss-url --postcss-url.url "copy" -u postcss-cssnext -u autoprefixer -o dist/matter.css ./index.css 37 | 38 | # 39 | # Deploy. 40 | # 41 | 42 | deploy: node_modules build 43 | @node support/deploy.js 44 | 45 | # 46 | # Test style. 47 | # 48 | 49 | test-style: 50 | @$(ESLINT) ./lib 51 | 52 | # 53 | # Dependencies. 54 | # 55 | 56 | node_modules: package.json 57 | @npm install 58 | 59 | # 60 | # Clean. 61 | # 62 | 63 | clean: 64 | @rm -rf build *.log 65 | 66 | # 67 | # Clean dependencies. 68 | # 69 | 70 | clean-deps: 71 | @rm -rf node_modules components 72 | 73 | # 74 | # Phonies. 75 | # 76 | 77 | .PHONY: preview deploy dist test-style 78 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | 2 | # Matter 3 | 4 | Matter is a tiny collection of UI components. The components are built with [Deku](http://github.com/dekujs/deku). Check out the [website](http://stevenmiller888.github.io/matter/) for live examples. A React version is available [here](https://github.com/stevenmiller888/matter-react). 5 | 6 | ![](https://cldup.com/xTRE1NuYTv.png) 7 | 8 | ## Installation 9 | 10 | Matter is available on npm: 11 | 12 | `npm install matterjs` 13 | 14 | Or you can download the [files](https://github.com/stevenmiller888/matter/tree/master/dist) directly. 15 | 16 | ## Usage 17 | 18 | ```js 19 | import { Button } from 'matter'; 20 | import element from 'virtual-element'; 21 | import { deku, render } from 'deku'; 22 | 23 | let app = deku(