You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
Tyler Childs 3299d95304 chore: add .nvmrc 4 months ago
src feat/deps: setup a build process with a proof of concept 4 months ago
.editorconfig build: add an editorconfig 4 months ago
.gitignore feat/deps: setup a build process with a proof of concept 4 months ago
.npmrc build(npm): correct strict engine implementation 4 months ago
.nvmrc chore: add .nvmrc 4 months ago
LICENSE Initial commit 11 months ago
README.md docs(readme): correct purger overview 4 months ago
index.html add a kitchen sink to test output 4 months ago
package.json feat/deps: setup a build process with a proof of concept 4 months ago
postcss.config.js feat/deps: setup a build process with a proof of concept 4 months ago
tailwind.config.js feat/deps: setup a build process with a proof of concept 4 months ago
yarn.lock feat/deps: setup a build process with a proof of concept 4 months ago

README.md

Miniwind

Currently in development.

A customizable classless CSS theme, with styles derived from a TailwindCSS base. Aims to rely on semantic HTML to act as a beautiful, quick starting point for a majority of its users.

Are there many others like this? Quite likely! But this one is mine. 🙂

  • Customize a bunch of configuration variable, and viola, you get your own theme!
  • It spits out a vanilla CSS file that only targets HTML elements. It's easy for you to override anything (if you want to!)

Development overview

  • TailwindCSS has a configuration file (tailwind.config.js) that changes what certain values mean: does text-xl translate to 1.5rem or 1.25rem?
  • The purger is configured to purge on all builds (development and production).
  • The output is desired to not be minified (do not use cssnano). Anyone should be able to make sense of the stylesheet after hitting View source.

Todo list for RDD (Readme Driven Development)

  • Improve elements' coverage by using an HTML5 kitchen sink
  • Explore minimal branding/customization using CSS variables
    • We can extend TailwindCSS' color palette. THis might be unnecessary for the first production-ready release.
  • Set up a lightweight development tooling: PostCSS, something to lint CSS, and for a better IDE experience: an .editorconfig file.
  • Explore a user interface for configuring TailwindCSS on-the-fly.
  • Add notes for usage.

Manual Testing

  • yarn && yarn run build
  • Open the index.html file included in the root of this project your favourite browser.