Accessible UI boilerplate and component library for websites/webapps.
- Built with semantic HTML, CSS (Sass), native Web Components, vanilla JavaScript (TypeScript) and ARIA.
- Powered by Storybook.
- Bundled by Parcel.
No external frameworks have been harmed in the making of this boilerplate!
No React. No Vue. No CSS-in-JS. No Tailwind.
Just plain vanilla code. 😜
- Live Storybook URL = https://basher.github.io/Web-UI-Boilerplate/
- Use the correct Node version as listed in
ui/.nvmrc
. If necessary, install Node Version Manager (NVM).
Run both the following commands in separate terminal instances in order to be able to compile CSS/JavaScript and test the UI in Storybook.
From ui
directory:
npm start
- Installs Node modules (if not already installed) and launches Parcel bundler.npm run storybook
- Launches Storybook/HTML component library.
From ui
directory:
npm run build
In order to use the bundled CSS/JavaScript in localhost
, both npm start
and npm run storybook
need to be run.
However, these can be concatenated together into a single background task so that the Storybook application doesn't need to be actually loaded in the browser.
There is a difference between development
and production
environments in terms of the locations of the compiled CSS/JavaScript.
Uses the Storybook dev server.
<link rel="stylesheet" href="https://localhost:6006/index.css">
<script src="https://localhost:6006/index.js"></script>
Uses whatever build folder has been defined for the web application.
<link rel="stylesheet" href="/path/to/build/folder/stylesheets/index.css">
<script defer type="module" src="/path/to/build/folder/javascript/index.js"></script>
<script defer nomodule src="/path/to/build/folder/javascript/legacy.js"></script>
From ui
directory:
npm run publish-storybook
- this runs a Parcel build to bundle CSS/JavaScript in thepublic
folder, as defined inui/.storybook/main.js
.npx http-server ./storybook-static
- to test production build on local server.
- Uses the workflow defined in
.github/workflows/static.yml
. - Live Storybook URL = https://basher.github.io/Web-UI-Boilerplate/
- Please see the
README
inui
directory.
.vscode/settings.json
defines the correct working directory for.eslintignore
and.stylelintrc
..editorconfig
ensures all code uses the same indentation.