Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shoelace-style/shoelace
A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇
https://github.com/shoelace-style/shoelace
css designsystem hacktoberfest html javascript ui ux webcomponents
Last synced: 3 days ago
JSON representation
A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇
- Host: GitHub
- URL: https://github.com/shoelace-style/shoelace
- Owner: shoelace-style
- License: mit
- Created: 2017-07-25T18:49:44.000Z (over 7 years ago)
- Default Branch: next
- Last Pushed: 2024-04-22T15:40:54.000Z (8 months ago)
- Last Synced: 2024-05-01T15:26:52.190Z (7 months ago)
- Topics: css, designsystem, hacktoberfest, html, javascript, ui, ux, webcomponents
- Language: TypeScript
- Homepage: https://webawesome.com
- Size: 15.8 MB
- Stars: 12,044
- Watchers: 92
- Forks: 738
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
- awesome - shoelace-style/shoelace - A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇 (TypeScript)
- awesome-web-components - Shoelace
- my-awesome-github-stars - shoelace-style/shoelace - A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇 (TypeScript)
- awesome-lit - Shoelace - Collection of professionally designed UI components built on a framework-agnostic technology. (Design Systems)
- awesome-web-components - Shoelace - A forward-thinking library of web components. (Real World / Component Libraries)
- StarryDivineSky - shoelace-style/shoelace
- awesome - shoelace-style/shoelace - A collection of professionally designed, every day UI components built on Web standards. SHOELACE IS BECOMING WEB AWESOME 👇👇👇 (TypeScript)
README
# Shoelace
A forward-thinking library of web components.
- Works with all frameworks 🧩
- Works with CDNs 🚛
- Fully customizable with CSS 🎨
- Includes an official dark theme 🌛
- Built with accessibility in mind ♿️
- Open source 😸
Designed in New Hampshire by [Cory LaViska](https://twitter.com/cory_laviska).
---
Documentation: [shoelace.style](https://shoelace.style)
Source: [github.com/shoelace-style/shoelace](https://github.com/shoelace-style/shoelace)
Twitter: [@shoelace_style](https://twitter.com/shoelace_style)
---
## Shoemakers 🥾
Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 14.17 to build and run the project locally.
**You don't need to do any of this to use Shoelace!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Shoelace.
If that's not what you're trying to do, the [documentation website](https://shoelace.style) is where you want to be.
### What are you using to build Shoelace?
Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
### Forking the Repo
Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies.
```bash
git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
cd shoelace
npm install
```
### Developing
Once you've cloned the repo, run the following command.
```bash
npm start
```
This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browser's don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.
### Building
To generate a production build, run the following command.
```bash
npm run build
```
### Creating New Components
To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.
```bash
npm run create sl-tag-name
```
This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
### Contributing
Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
## License
Shoelace was created by [Cory LaViska](https://twitter.com/cory_laviska) and is available under the terms of the MIT license.
Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾