c6a6a77bbd
feat: add nav indicators wip wip wip fix: minor fixes fix: minor fixes fix: some refactor chore: update docs chore: update docs fix: remove slide component feat: create sl-carousel-item feat: code refactoring and improvements chore: update docs with more examples chore: fix docs feat: add autoplay feat: implement accessibility fix: change icons for rtl chore: minor change feat: improve accessibility fix: minor regression fix: minor regression chore: fix docs fix: improve accessibility and minor fixes fix: remove heading and refactor component chore: add custom style exmaple fix: address review commnets * Removed header from carousel * Added `ArrowUp` and `ArrowDown` in keyboard navigation * Added `--scroll-hint-margin` css property * Added an example with customized carousel layout * Fixed thumbnails navigation in demo * Renamed show-controls to show-arrows and updated the corresponding parts/css accordingly * Changed `activeSlideElement` getter to a private method * Changed pagination colors * Added `--slide-width` and `--slide-height` css properties chore: update docs fix: integrate latest repo changes fix: add aspect ratio and rebase chore: remove ignore path feat: multiple slides per page feat: multiple slide per page fix: various improvements chore: minor changes chore: minor changes chore: add bit of documentation chore: improve documentation fix: add unit tests and fix minor issues chore: update documentation and unit tests chore: update tests |
||
|---|---|---|
| .github | ||
| .husky | ||
| .vscode | ||
| docs | ||
| scripts | ||
| src | ||
| .editorconfig | ||
| .eslintignore | ||
| .eslintrc.cjs | ||
| .gitignore | ||
| .gitpod.yml | ||
| .prettierignore | ||
| CONTRIBUTING.md | ||
| LICENSE.md | ||
| README.md | ||
| cspell.json | ||
| custom-elements-manifest.config.js | ||
| lint-staged.config.js | ||
| package-lock.json | ||
| package.json | ||
| prettier.config.cjs | ||
| tsconfig.json | ||
| tsconfig.prod.json | ||
| vercel.json | ||
| web-test-runner.config.js | ||
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 >= 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 is where you want to be.
What are you using to build Shoelace?
Components are built with LitElement, 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.
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 start
This will spin up the Shoelace 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.
The documentation is powered by Docsify, which uses raw markdown files to generate pages. As such, no static files are built for the docs.
Building
To generate a production build, run the following command.
npm run build
Creating New Components
To scaffold a new component, run the following command, replacing sl-tag-name with the desired tag name.
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 first.
License
Shoelace is designed in New Hampshire by Cory LaViska. It’s available under the terms of the MIT license.
Designing, developing, and supporting this library requires a lot of time, effort, and skill. I’d like to keep it open source so everyone can use it, but that doesn’t provide me with any income.
Therefore, if you’re 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! 🥾