Building an HTML template generator with tailwind.css

Amie Chen
Prototypr
Published in
3 min readJul 17, 2018

One thing we web designers/developers do often is to build components based on the design. Often these components’ HTML structures and responsive behaviors stay the same under the hood, while their visual aspects are drastically different from projects to projects.

Because I was lazy and didn’t want to do repetitive work, I started to think about how I could have a collection of HTML components with some CSS encapsulated in each one. When a new project came, all I had to do is to utilize these existing HTML components and tweak the layout and styling of them to fit the new design.

So I made Stitches.

Process

The naive first step was to create a collection of HTML files for each reusable component. Components like nav, cards and footer showed up often in my past projects, so I created the HTML for those to start.

Next, I had to find a way to encapsulate CSS in each HTML component. Functional CSS seemed perfect for this case because I wouldn’t need to have two separate parts (1 HTML and 1 CSS) for each component.

Wait, what is functional CSS?

In short, functional CSS is not a framework or library but a way to write CSS so that you don’t write CSS anymore: developers pre-define a bunch of utility classes like in bootstrap, such as .text-sm{font-size:1em;} to describe the visual aspects of an HTML element. The benefit is speed, simplicity and easy to fix, and the drawback is you do lose a few natural CSS features like cascading and hover states. Writing your own collection of utility classes is quite a big project, so there are a few awesome functional CSS libraries out there — like tachyons and tailwind.css — which have already done that for you. Picking tailwind.css was simple because I prefer their documentation and the predefined class names.

With step 1 & 2 setup and lots of tweaking, I could open up a component’s HTML and bang! the page would look perfectly styled. No more component specific CSS ; no more classes like .awesome-footer or .mega-mega-menu!

Then came ux design and visuals— I briefly had an idea about how I wanted it to work: something fast, easy, and fun. The end product needed to have :

  1. A preview of each component
  2. A way to select components and “stitch” them together
  3. A preview section for stitched components
  4. A way to download the preview as a single HTML file

Stylistically speaking, I aimed to keep Stitches austere because it’d have lots of images coexisting in one page. I wanted to avoid vibrant colors and quirky fonts, so I chose a subdued palette (black, white and green) and a minimalist font (Muli).

Drag&Drop seemed like a perfect behavior to stitch components together. Users can re-order and delete the components while having fun. I highly recommend Dragula.js! It was a breeze to work with.

TIL: Download

The download section is the interesting part. I never realized how to download an HTML file on the client-side:

  1. Create an anchor tag
  2. Encrypt whatever needs to be in this HTML and add it into the anchor tag as a data attribute
  3. Add a download attribute to the anchor tag
  4. Programmatically click this anchor tag to trigger a fetch
  5. Once the fetch call completed, delete the anchor tag

You can check out here for the code here and let me know if you any other suggestions.

Final thoughts (especially on functional CSS)

I enjoyed playing with functional CSS throughout this project. It’s easy to work with and fast to write, though it’s not a silver bullet — you still have to write CSS from time to time and it doesn’t work well with CSS animations — but it really removes the pain of naming and reduces the likelihood of having specific, bloated CSS in the long run. I find the balance lies between 80% functional CSS and 20% custom CSS.

That’s it! I hope y’all can give Stitches a try and let me know your feedback! The project is also on Product Hunt.

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

Published in Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us https://bit.ly/apply-prototypr

Written by Amie Chen

Designer, Developer, Maker 🇹🇼🇺🇸 Product Designer @Auth0 . Previously developer @Twitch and @stremlit.

Responses (4)

What are your thoughts?