A simple little toolkit for quick prototyping and experimenting with web UIs.
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.gitignore
LICENSE.md
README.md
package.json
postcss.config.js
tailwind.js
webpack.config.js
yarn.lock

README.md

Fun

A simple little toolkit for quick prototyping and experimenting with web UIs.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

A node package manager, I recommend installing Yarn via Homebrew.

brew install yarn

Installing

This will install all the necessary node packages for this project.

yarn install

Usage

Everything is already preconfigured to use Webpack to package everything up into the /public directory and start a browser sync session at http://localhost:9000.

Just run these commands to build everything and automatically open your default browser to the page. 🎉

webpack --watch

Structure

  • src - everything in here gets built by Webpack
    • controllers/ - Stimulus controllers go here
    • styles/ - CSS styles go here
    • index.js - main entry point for Webpack
    • index.html - main HTML file
  • package.json - node packages
  • postcss.config.js - PostCSS config, mainly to load Tailwind
  • tailwind.js - Tailwind CSS config
  • webpack.config.js - main Webpack config

Built With

Webpack

Everything is configured using Webpack to package up the HTML and assets. The /webpack.config.js file is the place to go to see how it's all set up.

Babel

Babel and related plugins to allow writing javascript of the future (e.g. ES6) and have it transpiled for today's browsers.

Tailwind CSS

The best little CSS utility framework out there. Tailwind is the best way I've found to rapidly build web UIs. The Tailwind config can be customized in /tailwind.js.

Stimulus

Super lightweight javascript framework for dealing with simple interactions among DOM elements.

Browsersync

Must-have tool for not having to ever hit the refresh button again during development.

Contributing

Coming soon...

Versioning

No versioning yet, since it's just a repo right now. If this gets turned into its own NPM package, then the versioning will begin. 😄

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details.