UNPKG

soft-components

Version:

Simple soft flexible set of web components

67 lines (42 loc) • 3.56 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
[![Twitter](https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Fsoft.components.rocks)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fseanwuapps%2Fsoft-components) ![Twitter Follow](https://img.shields.io/twitter/follow/softcomponents?style=social) ![npm bundle size](https://img.shields.io/bundlephobia/min/soft-components) ![npm](https://img.shields.io/npm/v/soft-components) ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square) ![Logo](./docs/src/assets/img/logo.svg "Logo") # Soft components Like the recently popular neumorphism design? You can read more about neumorphism design in these articles: - [Neumorphism in user interfaces](https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6) - [Neumorphism: why it’s all the hype in UI design](https://www.justinmind.com/blog/neumorphism-ui/) - [Neumorphism the right way — A 2020 Design Trend](https://medium.com/@artofofiare/neumorphism-the-right-way-a-2020-design-trend-386e6a09040a) Use these components with any framework you wish or no framework at all! [Documentation](https://soft.components.rocks/) ## Getting started There are a couple of ways you can get started with Soft Components: ### CDN ```html <link rel="stylesheet" href="//unpkg.com/soft-components/dist/soft-components/soft-components.css" /> <script type="module" src="//unpkg.com/soft-components/dist/soft-components/soft-components.esm.js"></script> <!-- For IE only --> <script nomodule src="//unpkg.com/soft-components/dist/soft-components/soft-components.js"></script> ``` ### Install via npm ```bash npm i soft-components ``` ### JS framework integration Soft components are built with the help of [Stencil](https://stenciljs.com/). [Stencil](https://stenciljs.com/) provides a comprehensive [documentation](https://stenciljs.com/docs/overview) on how the web components can be integrated with popular JavaScript frameworks, they can be found here: - [Angular](https://stenciljs.com/docs/angular) - [React](https://stenciljs.com/docs/react) - [Vue](https://stenciljs.com/docs/vue) - [Ember](https://stenciljs.com/docs/ember) ## Components roadmap - [x] `sc-progress` - progress bar - [ ] `sc-range` - `input type="range"` equivalent - [ ] `sc-dial` - dial input - [ ] `sc-radio` - radio button - [ ] `sc-select` - `select` dropdown box - [ ] `sc-file` - `input type="file"` equivalent - [ ] `sc-textarea` - `textarea` equivalent