3a40ffe58a
* remove experimental pages * typo * untying the knots * whitespace * fix input bubbling * refactor * reimplement color scheme selector * rename * fix comments * revert premature abstraction * host vars * rework theme selector * feed themes from global data * add back component headers * reimplement component index * make headings optional * add back color palette page sans instructions * fix selector * fix search list with turbo * always dispatch after update * add back theme preview page * fix * fix errors * fix theme selector * fix themes * improve * make transition smooth * revert * revert * skip * fix borders * fix fade in * remove unused blocks * we know this guy * fix event timing * remove header * remove unused styles * add better nunjucks extension * update header * fix layout * add theme linke * fix autocomplete bug * correct description * consistency between palettes and tokens docs * better extension * add colorPalettes data * typo * typos * fix progress bar height * remove due to errors; works without * move pro palettes to pro * consolidate themer data * themer data * add font packs * reorg * restructure theme data * add word * detect the reference slot instead of requiring with-references * Remove `:root` selector and `@import` rules from themes (#1061) * remove `:root` selector and imports from themes * re-add `base.css` to free * update how themes are assigned * update showcase location * update * fix palettes * add font href * fix theme page in turbo * fix color palettes * remove rose * fix shadow * update docs * update docs * rename eyedropper to fix spelling * rename eyedropper * disable turbo * remove unused import * update themer data * add get/set icon family * revert example * fix color palette data * add brand color to theme data * fix sharp duotone name * fix typo * update changelog for merged branch * update changelog * allow default theme to inherit color scheme when nested * make font packs more exciting * update serif typeface * add examples * update font weights * set initial selection instantly * set brand and palette with theme in theme selector * add palette stylesheets * fix icon slot * fix theme descriptions * minor style touch up * tweak example button text * group callout examples * add 'create theme' button * tweak spacing, fix sneaky plain card background * prettier * ultra tiny tweak to showcase example * show usage instructions * prevent error when theme selector isn't present --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design> Co-authored-by: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
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.
Understanding the Web Awesome monorepo
Web Awesome uses NPM workspaces for its monorepo structure and is fairly minimal in what it provides.
By using a NPM workspaces and a monorepo structure, we can get consistent builds, shared configurations, and reduced duplication across repositories which reduces regressions and forces consistency across webawesome, webawesome-pro, and webawesome-app.
Generally, if you plan to only work with the free version of webawesome it is easiest to go to packages/webawesome and run all commands from there.
Where do NPM dependencies go?
Any dependencies intended to be used across all packages (IE: prettier, eslint) that are NOT used at runtime should be in the root devDependencies of package.json.
npm install -D -w prettier
Any dependencies that will be used at runtime by a package should be part of the specific package's "dependencies" such as lit. This is required because if that dependency is not in the packages/*/package.json, it will not be installed when used via NPM.
Individual packages are also free to install devDependencies as needed as long as they are specific to that package only.
To do install a package specific to a package, change your working directory to that package's root
IE: cd packages/webawesome && npm install <package-name>
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 from the respective directory within packages/*
cd packages/webawesome
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.
cd packages/webawesome
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.
cd packages/webawesome
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.
Adding additional packages
Right now the only additional packages are in private repositories.
To add additional packages from other repositories, run: git clone <url> packages/<package-name> to clone your repo into packages/.
Make sure to run npm install at the root of the monorepo after adding your package!
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.