Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/amiechen/stitches-template-generator

A web templates generator with functional css (tailwind.css)
https://github.com/amiechen/stitches-template-generator

Last synced: about 2 months ago
JSON representation

A web templates generator with functional css (tailwind.css)

Host: GitHub
URL: https://github.com/amiechen/stitches-template-generator
Owner: amiechen
Created: 2017-09-17T02:20:12.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2022-07-11T06:18:43.000Z (about 2 years ago)
Last Synced: 2024-07-18T03:44:39.983Z (2 months ago)
Language: CSS
Homepage: https://stitches.hyperyolo.com
Size: 41.7 MB
Stars: 242
Watchers: 20
Forks: 94
Open Issues: 3
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

# Stitches

A simple, fast web app to generate html based on a collection of commonly used user interface patterns.

## 🎏 Live Site: [stitches.hyperyolo.com](https://stitches.hyperyolo.com)

![app-screen-shot](https://cdn-images-1.medium.com/max/2000/1*DqVCpGnXJefwLXFneEHPZg.png)

## Running it locally

cd into Stitches directory.

```
npm install
```

Run Browserify to bundle all node modules.

```
browserify main.js -o bundle.js
```

Recompile tailwind css.

```
npx tailwind build stitches.css -c ./tailwind.config.js -o ./output.css
```

## Make your own templates

Feel free to take this project and re-factor to your need! Not everyone wants these templates for their projects. Here are the steps:

1. Read the [Contributing guideline here](./CONTRIBUTING.md).
2. Run the project locally (see the section above)
3. Use [200 ok](https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en) to run the repo in browser (because file download requires http).
4. Add your own HTML template (with tailwind.css classes) into the `templates` folder
5. Add a filter button for it in the `index.html`. (i.e. add `Tabs`)
6. Done! refresh to check out your own templates.

## Contributing to the repo

Read and follow the [Contributing guideline here](./CONTRIBUTING.md). Thanks!

## License