
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 :
- A preview of each component
- A way to select components and “stitch” them together
- A preview section for stitched components
- 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:
- Create an anchor tag
- Encrypt whatever needs to be in this HTML and add it into the anchor tag as a data attribute
- Add a download attribute to the anchor tag
- Programmatically click this anchor tag to trigger a fetch
- 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.