Set of UI blocks based on Custom Elements v1 spec and minimalistic core for creating your own custom elements from scratch. All blocks follow material design guidelines.
The web is awesome. It is one of the best platform for applying your creativity and introducing new ideas. It could take just few hours from imagination to publishing new web app or component. In 2017 there are more than 400 000 modules available on npm. 400 000 ways for resolving your problem and creating new project. But behind this fantastic ecosystem the danger is confusing variety and difficulties in making decisions. You may create app prototype in few hours but later it could take months for choosing correct tech stack, testing different frameworks/libs and taking part in infinite holly wars :) But the biggest problem here that we can't share and reuse our work between the projects based on different technologies.
I believe that it is time to change something and start to develop with pleasure ;) Scaling from prototype to production should depends only on human creativity not on tech quirks.
If we look back at the past, the most efficient tool we have found to share our knowledge and products with other people and communities are standards. Standards help us to create spaceships, cars, medical equipment and other awesome things using the full power of human community and creativity. Web development is quite young industry so standardization here is under active development. But last years were very impressive and productive. A lot of new standards and cool features was appeared and we can (actually we should) use it now.
The most obsolete and frozen part of web standards was UI. We use standard HTML elements like inputs, forms, lists, etc... 10s years. At the same time the web industry experiencing rapid growth. It is absolutely impossible to satisfy all modern business requirements using the 20 years old standards. That's why so many custom UI frameworks and libraries was introduced during the last few years. Some of those libs are perfectly do its work. The bad thing is that those libs break up JS community into disconnected groups without any way to reuse the same components between different projects. If you wrote your UI application using React it is almost impossible to reuse your React components in Angular project and vice versa.
Web components are set of Web standards which are designed to change the situation. The foundation of those standards is Custom Elements API which got living standard status recently. Here is great article describing it https://developers.google.com/web/fundamentals/getting-started/primers/customelements. Some browsers don't support this API for now but all of them actively work on implementation. To fill the gap there is very small polyfill (~4kb): https://www.npmjs.com/package/@webcomponents/custom-elements which also got stable version 1.0 recently.
In short, that's why I choose Custom Elements API for building yet another UI kit :)
The simplest way to use this kit is including this script tag in your web app:
<script src="https://unpkg.com/@basket/block/dist/kit.js"></script>
After that you will be able to use any of custom elements described below. Just insert the proper tag anywhere in your markup.
If you use some module bundler like Webpack or Rollup you could install this lib through npm:
npm install @basket/block --save
and use elements separately:
import '@basket/block/b-input-text'
All blocks use ES modules standard for imports and exports so be sure your module bundler supports ES modules.
Spec: https://material.io/guidelines/components/buttons-floating-action-button.html
Example: http://jsbin.com/tusebor/edit?html,output
<b-action-button></b-action-button>
Reflected properties:
- color: 'primary'
- small: false
- icon: false // path to icon file (svg supported) or any material design icon name
Spec: https://material.io/guidelines/components/buttons.html
Example: http://jsbin.com/heqadar/edit?html,output
<b-button>Button text</b-button>
Reflected properties:
- color: 'primary'
Spec: https://material.io/guidelines/components/dialogs.html
Example: http://jsbin.com/zuveqik/edit?html,output
<b-dialog>Dialog content</b-dialog>
Reflected properties:
- opened: false
Example: http://jsbin.com/depiker/edit?html,output
<b-form>Form content</b-form>
reflected properties:
- action: document.location.pathname
Spec: https://material.io/guidelines/style/icons.html
Example: http://jsbin.com/cexabof/edit?html,output
<b-icon></b-icon>
Reflected properties:
- src: false // path to icon file (svg supported) or any material design icon name
- size: 48 // 18, 24, 36 or 56
Spec: https://material.io/guidelines/components/selection-controls.html#selection-controls-checkbox
Example: http://jsbin.com/lokecem/edit?html,output
<b-input-checkbox>Checkbox label</b-input-checkbox>
Reflected properties:
- name: false
- checked: false
Spec: https://material.io/guidelines/components/selection-controls.html#selection-controls-radio-button
Example: http://jsbin.com/suwalor/edit?html,output
<b-input-radio>Radio button label</b-input-radio>
Reflected properties:
- value: false
- name: false
- checked: false
Spec: https://material.io/guidelines/components/selection-controls.html#selection-controls-switch
Example: http://jsbin.com/lihabip/edit?html,output
<b-input-switch>Switch button label</b-input-switch>
Reflected properties:
- name: false
- checked: false
Spec: https://material.io/guidelines/components/text-fields.html
Example: http://jsbin.com/podizad/edit?html,output
<b-input-text></b-input-text>
Reflected properties:
- label: false
- value: false
- type: 'text'
- placeholder: false
- error: false
- name: false
Spec: https://material.io/guidelines/components/progress-activity.html
Example: http://jsbin.com/cuxuniz/edit?html,output
<b-progress-circular></b-progress-circular>
Reflected properties:
- color: 'primary'
Spec: https://material.io/guidelines/components/progress-activity.html
Example: http://jsbin.com/qafatox/edit?html,output
<b-progress-linear></b-progress-linear>
Reflected properties:
- color: 'primary'
Spec: https://material.io/guidelines/components/tabs.html
Example: http://jsbin.com/penucas/edit?html,output
<b-tabs>
<b-tabs--item href="#item1">Item One</b-tabs--item>
<b-tabs--item href="#item2" active>Item Two</b-tabs--item>
<b-tabs--item href="#item3">Item Three</b-tabs--item>
</b-tabs>
Spec: https://material.io/guidelines/components/text-fields.html
Example: http://jsbin.com/casehu/edit?html,output
Reflected properties:
- label false
- placeholder false
- error false
- name false
- rows 1
<b-textarea>Textarea value</b-textarea>
Spec: https://material.io/guidelines/components/toolbars.html
Example: http://jsbin.com/yasiduq/edit?html,output
<b-toolbar>Toolbar content</b-toolbar>