* dividing up e-commerce patterns * started invoice table * building out the filter * Initial Commit * switching machines * switching machines * started split image pattern: * commiting to merge in next * commiting to switch machines * upated the product detail patterns * updated product list patterns * updated some patterns * filter work * added utilities to order history * added utilities to order-summary * updated width of container * switching machines * switching machines * fixing conflicts * editing descriptions * updated descriptions * adding some polish * more filter work * updated prouct preview * Revisions to "Product Features" * "Category Filters" revisions + `wa-placeholder` utility * cleaned up product list * tweaked product overview * tweaked order history * tweak category preview * "Checkout Form" revisions * Re-add `navigation` to "Product Features" carousel * cleaned up shopping cart * tweaked order summary * Add missing file extension * Fix typo in file name * Revert checkout form changes in attempt to improve diff * Reimplement checkout form revisions * cleaned up checkout form * Add "What's a Pattern?" and "Using Patterns" to index * Update category descriptions and headings * Add docs layout for patterns with stylesheet * tweaked customer review * Add checkout form example * a little more polish * more tweaks * switching branches to merge * created e-commerce index * unlisted links * updtated content * updated content for category preview * updated order history * committing to bring branches up to next * inital commit * Reorganize app patterns into separate pages * switching machines * Add link style utilities * Refactor product list patterns * more polish * Refactor product overview patterns * switching machines * Refactor shopping cart patterns * committing to pull down changes * updated product preview * updated image * updated incentives * Clean up utility usage and code formatting for category previews * started updating with style utilities * Clean up utilities and formatting, replace placeholder text in order history * updated incentive images * updated reviews * added review variant * more polish * some heavy duty updates * removed store navigation * switching machines : * Clean up utility usage and code formatting for order summaries * Clean up utility usage and code formatting for product previews * big switchover * removed old file * working on sidebar * updated sidebar * created info category * splitting up the old blog page * a little cleanup and adding detail * got three done * updated social share * Quick formatting adjustment * initial paywalls * Use overviews in pattern subcategories (#826) * Do not error if no pages * Automatically set parents and tags for patterns * Update overview.njk * [WIP] Use overview pages for pattern listings * Remove explicit parents --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design> * some newsletter signups * added login patterns * reworked feeds' * a few more * added a few more * add more app patterns * App pattern tweaks (#827) * Fix `patterns.css` reference * Tweaks to action panel patterns * Tweaks to comments patterns * Progress on data display patterns * Progress on empty state patterns * Use email-related data from recent update in `pattern-main` (altered slightly) * Tweaks to data display patterns * Tweaks to empty state patterns * Tweaks to FAQ patterns * Tweaks to feed patterns * Tweaks to grid patterns * Tweaks to pagination patterns * Tweaks to pricing patterns * Tweaks to description list patterns * Tweaks to leaderboard patterns * Add and update names and descriptions * Ensure comments fields have labels * Tweak recent additions * switching machines * catching up with next * added permissions pattern * switching machines * added post articles * having local browset issues * a few more app patterns * took out info patterns * spiffed up the action panels * gave the action panels a once over * added content to data display * updated a few patterns * clean up a few e-commerce patterns * added time componen to reviews --------- Co-authored-by: lindsaym-fa <dev@lindsaym.design> Co-authored-by: Lea Verou <lea@verou.me> 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.
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.