Shoelace.css
p/shoelace-css
A back to the basics CSS starter kit.
Kevin William David
Shoelace 2.0 — A forward-thinking library of web components.
Featured
15
Shoelace provides a collection of open source, professionally designed UI components. Use it as an alternative to Bootstrap and similar tools to build websites, applications, and more!
Replies
Cory LaViska
Here’s a thread that shows how high-level theming works. You can control each color palette by modifying only two CSS vars. (GIF to demonstrate) https://twitter.com/claviska/sta... You can also customize things at the component level.
Cory LaViska
Hi, Product Hunters! 👋 I created Shoelace because I wanted a well-designed, open source library of UI components (buttons, form controls, color pickers, etc.) that works with any framework. You can use Shoelace with React, Vue, Angular — or you can use it with plain HTML+JS! Think Bootstrap, but with custom elements such as <sl-button> instead of <button type="button" class="btn btn-primary">. Now that we have an API to extend HTML, we can design developer-friendly components that significantly reduce the amount of markup we write. 🥾 Check out the many demos on the project's website for more examples! https://shoelace.style/ This is possible because Shoelace is built with a technology called "web components", which are a standardized set of browser APIs that all modern browsers support. Web components had a rough start when they were first introduced and many people aren't aware of how much they've matured in recent years. I want Shoelace to show everyone how awesome web components really are. Shoelace can be loaded via CDN with a simple <script> and <style> tag, yet it's fully customizable. Design tokens let you make high-level style changes, and each component exposes custom properties and CSS parts that can be used to make component-level customizations. All this can be done in your own stylesheet with pure CSS — no preprocessing with Sass or Less is required! (Even if you load Shoelace via CDN.) I built Shoelace 2.0 from scratch using the awesome Stencil compiler, a tool that leverages TypeScript and JSX to provide a really fun way of developing components. Check it out at: https://stenciljs.com/ I'm excited to see what you create with it! ⭐️ Oh, and remember Shoelace is open source. If you're on GitHub, feel free give it a star! https://github.com/shoelace-styl...
Ricardo Zea
@claviska For what I read so far seems Shoelace requires the use of JS in some shape or form due to the use of custom HTML elements. Is this the case? Maybe I'm missing something or are not getting it at all, haha. Upvoted though! :)
Cory LaViska
@ricardozea Thanks! Yes, registering custom elements currently requires JavaScript.
Leonardo Jaques
It isn't tested for Brave? :(
Cory LaViska
@leoojaques Brave is Chromium-based, so Shoelace will work well with it!
Jez John
Hi, Cory this is awesome - I have run an agency for 20 years and love it that new useful stuff surprises me sometimes! Will definitely look to see how we incorporate these in projects. Thanks again for giving so much.
Cory LaViska
@jez_john1 The web is full of surprises — I’m happy to provide something useful!
Rasmus Myhrberg
Long time user of Surreal here. Just wanted to wish you good luck with Shoelace!😀
Cory LaViska
@rasmusm Thank you! 💙
Roshan Shelar
This all look neat and clean, I like those alerts. I'm definitely gonna tie this shoelace. Thanks for making it.
Cory LaViska
@roshan_shelar Thanks for checking it out! Be sure to show me what you make! @shoelace_style
Jakkrit Hochoey
@claviska Shoelace 2.0 is very nice and very useful web components. This will help web developer to save time. Thank you so much. You're fully awesome.
Cory LaViska
@jakkrit_hochoey thank you! Enjoy!