Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/smeup/ketchup
Components for web applications
https://github.com/smeup/ketchup
Last synced: about 2 months ago
JSON representation
Components for web applications
- Host: GitHub
- URL: https://github.com/smeup/ketchup
- Owner: smeup
- License: apache-2.0
- Created: 2018-11-02T14:02:56.000Z (about 6 years ago)
- Default Branch: develop
- Last Pushed: 2024-10-29T10:31:32.000Z (2 months ago)
- Last Synced: 2024-10-29T11:44:46.935Z (2 months ago)
- Language: JavaScript
- Homepage: https://smeup.github.io/ketchup
- Size: 72.7 MB
- Stars: 8
- Watchers: 6
- Forks: 19
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
- awesome-web-components - Ketch.UP - Web components library for Sme.UP. (Real World / Component Libraries)
README
# Ketchup: super-rich components for web applications
[](https://opensource.org/licenses/Apache-2.0)
Table of Contents
## About Ketchup
Ketchup is a web components library, built with [Ionic’s Stencil](https://stenciljs.com/), a TypeScript based web component compiler.
`Web Components` is a suite of different technologies allowing to create reusable custom elements that you can use in your web apps. For more information visit this link: https://developer.mozilla.org/en-US/docs/Web/Web_Components
The primary focus of Ketchup is to provide a suite of powerful and customizable Web Components, whose main objective is abstracting complex and recurrent programming patterns.
### Built with
- [Sass](https://sass-lang.com/)
- [Stencil.js](https://stenciljs.com/)
### How the repo is organized
Ketchup repository is a monorepo multi-package repository managed with [Lerna](https://github.com/lerna/lerna).
- _packages/ketchup_ contains the Stencil web components library
- _packages/ketchup_showcase_ contains the code of the components showcase (a [Vue](https://vuejs.org/) application built using Vue CLI)
- _docs_ contains documentation
## Showcase
Go to [Ketchup Showcase](https://smeup.github.io/ketchup/) to see our components live.
## Getting started
All information for developers is to be found in the [Development guide](docs/development.md).
### How to use Ketchup in your project
- Add the dependency:
```
npm install "@sme.up/ketchup" --save
```
- Define Ketchup custom elements in your pages:
```
import { defineCustomElements } from '@sme.up/ketchup/dist/loader';
defineCustomElements(window);
```
- Use Ketchup components in your pages. About components and their props and events see [Ketchup Showcase](https://smeup.github.io/ketchup/). A simple sample for a Ketchup button can be:
```
```
### Contributing
If you have amazing ideas and you wish to contribute to this project, you're welcome to do so. Check out our [style guide](docs/styleGuide.md) for more details about our coding practices.
### Issues
If you run into an error or an unexpected behavior, or you just want to give us feedback on how to improve, feel free to use the [issues](https://github.com/smeup/ketchup/issues) page.
## License
Distributed under the Apache 2.0 License. [Click here for more information](https://github.com/smeup/ketchup/blob/develop/LICENSE).
## Credits
List of open source library/resources we used and which we'd like to thank:
- [Day.js](https://day.js.org/)
- [d3-shape](https://www.npmjs.com/package/d3-shape)
- [ECharts](https://echarts.apache.org/en/index.html)
- [FullCalendar](https://fullcalendar.io/)
- [Google Charts](https://developers.google.com/chart)
- [html2canvas](https://html2canvas.hertzen.com/)
- [jQuery and jQuery Sparlines](https://omnipotent.net/jquery.sparkline/#s-about)
- [Interact.js](https://interactjs.io/)
- [Numeral.js](http://numeraljs.com/)
- [Material Components Web](https://material-components.github.io/material-components-web-catalog/#/)
- [Material Icons](https://fonts.google.com/icons?selected=Material+Icons)
- [MDI Icons](https://materialdesignicons.com/)
- [Vanilla Picker](https://vanilla-picker.js.org/)