0b4c1a5934
* Exclude Create link from sidebar, for reals this time * Fix bug * Very rough prototype of look & feel * a11y * Clean up data files * Automatically generate theme metadata * Read look & feel params straight from theme * First stab at dimensionality icons * Fix rounding 0 bug * Add border width slider * [Image-comparer] Expose wrapper as part * [Comparer] `pointer-events: none` while dragging * Dark mode slider * Adjust increments and ranges for look + feel sliders * Fix preview * Fix bug where dark mode was not inverted * Ability to select panel from URL * Create mixin for Vue form controls and use it in `<swatch-select>` * Prototype of slider min/max icon buttons * Nx tooltip * Icons * Prevent failed request * info-tip: Support passing text as prop * Clearable * [Brutalist] Match `--wa-shadow-offset-x-scale` to `--wa-shadow-offset-y-scale` * Add 'Blocky' dimension (derived from Awesome theme) * Only show Reset button when `clearable` is set * Remove `clearable` from Look & Feel sliders * Add tooltips to min/max buttons * Remove superfluous `aria-label` * Do not assume that all hyphens in URLs mean nesting, make it explicit * Formatting * Fix bug where styles were not applied on page load * Update Subtle dimension to maximize compatibility * `<wa-scoped>`: Do not allow non-template children * Workaround for card not updating * Update Glossy dimension to maximize compatibility * Sync scrolling between regular and inverted preview * Fix bug * Make changing the base theme reset customizations * Fix palette page * Remove cancel button from editable text * Don't error in theme pages * Update Playful dimension to maximize compatibility * Rename 'Look and Feel' to 'Elements' for better parallel structure * Hide dimensionality controls * Make back icon motion more subtle * Expand spacing slider bounds * Add `tabindex="-1"` where missing in theme showcase * Remove extraneous gap from theme headers * fix edit button bug * rename comparer => comparison; fix aria-controls * Always save theme name on blur * Add changelog for themer and new patterns category --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design> Co-authored-by: Cory LaViska <cory@abeautifulsite.net>
Web Awesome
- Works with all frameworks 🧩
- Works with CDNs 🚛
- Fully customizable with CSS 🎨
- Includes an official dark theme 🌛
- Built with accessibility in mind ♿️
- Open source 😸
Built by the folks behind Font Awesome.
Documentation: webawesome.com
Source: github.com/shoelace-style/webawesome
Twitter: @webawesomer
Developers ✨
Developers can use this documentation to learn how to build Web Awesome 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 Web Awesome! This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Web Awesome.
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 Web Awesome?
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/webawesome
cd webawesome
npm install
Developing
Once you've cloned the repo, run the following command.
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.
npm run build
You can also run npm run build:serve to start an http-server instance on http://localhost:4000 after the build completes, so you can preview the production build.
Creating New Components
To scaffold a new component, run the following command, replacing wa-tag-name with the desired tag name.
npm run create wa-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
Web Awesome is an open source project and contributions are encouraged! If you're interesting in contributing, please review the contribution guidelines first.
License
Web Awesome is available under the terms of the MIT license.