A forward-thinking library of web components.
 
 
 
 
Go to file
Cory LaViska 4ebd15121e Add shoelace tag 2020-12-22 09:15:31 -05:00
.github 2.0 cleanup 2020-07-15 17:30:37 -04:00
docs Add setting example 2020-12-16 08:00:28 -05:00
src Rename noToggle => noFormatToggle 2020-12-21 17:23:14 -05:00
themes Fix toggle button styles in dark mode 2020-12-14 16:40:39 -05:00
.editorconfig 2.0 cleanup 2020-07-15 17:30:37 -04:00
.eslintrc.json 2.0 cleanup 2020-07-15 17:30:37 -04:00
.gitignore Copy themes to docs dist 2020-08-18 17:30:58 -04:00
.prettierignore Use more generic cache dir 2020-07-18 07:02:28 -04:00
CONTRIBUTING.md Add shoelace tag 2020-12-22 09:15:31 -05:00
LICENSE.md 2.0 cleanup 2020-07-15 17:30:37 -04:00
README.md Fixes #235 2020-10-04 08:38:42 -04:00
dev-server.js Serve and watch themes dir 2020-08-18 09:42:57 -04:00
make-dist.js Overwrite directory 2020-08-18 17:39:01 -04:00
make-icons.js Use more generic cache dir 2020-07-18 07:02:28 -04:00
package-lock.json Add color types 2020-12-16 08:21:01 -05:00
package.json Add color types 2020-12-16 08:21:01 -05:00
prettier.config.js 2.0 cleanup 2020-07-15 17:30:37 -04:00
stencil.config.ts Add custom-elements.json for vscode 2020-07-29 07:37:32 -04:00
tsconfig.json 2.0 cleanup 2020-07-15 17:30:37 -04:00
vercel.json 2.0 cleanup 2020-07-15 17:30:37 -04:00

README.md

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.


Documentation: shoelace.style

Source: github.com/shoelace-style/shoelace

Twitter: @shoelace_style


Shoemakers 🥾

Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 12.10.0 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 is where you want to be.

What are you using to build Shoelace?

Components are built with Stencil, a compiler that generates standards-based web components. The source code is a combination of TypeScript + JSX (TSX). Stylesheets are written in SCSS.

The build is done through a combination of Stencil's CLI and a handful of custom scripts.

Forking the Repo

Start by forking the repo on GitHub, then clone it locally and install dependencies.

git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
cd shoelace
npm install

Developing

Once you've cloned the repo, run the following command.

npm run start

This will spin up the Shoelace dev server. Note that the dev server requires ports 4000, 4001, and 4002 to be available.

After the initial build, a browser will open at http://localhost:4000.

Hot module reloading (HMR) is enabled for components, so changes will instantly reflect in the browser as you work. The documentation is powered by Docsify, which uses raw markdown files to generate pages. As such, no static files are built for the docs. Unfortunately, changes to documentation pages will trigger a page refresh (no HMR).

Building

To generate a production build, run the following command.

npm run build

Contributing

Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the contribution guidelines first.

License

Shoelace is designed in New Hampshire by Cory LaViska. Its available under the terms of the MIT license.

Designing, developing, and supporting this library requires a lot of time, effort, and skill. Id like to keep it open source so everyone can use it, but that doesnt provide me with any income.

Therefore, if youre using my software to make a profit, I respectfully ask that you help fund its development by becoming a sponsor. There are multiple tiers to choose from with benefits at every level, including prioritized support, bug fixes, feature requests, and advertising.

👇 Your support is very much appreciated! 👇

Whether you're building Shoelace or building something with Shoelace — have fun creating! 🥾