Modern fluid typography editor
As I was going over “CSS for JS devs” course by Josh Comeau, I came accross his implementation of fluid typography graph. Although it was made for demo purposes, it inspired me to build upon his work and create a fully-fledged tool that developers could use in their day-to-day work.
I had a project lined up at work and I wanted to quickly build a tool that would help me fine-tune fluid typography values. As I was learning Svelte at the time, I wanted to create a Svelte app from scratch to solidify my understanding of the framework.
This app features two modes or views:
- Graph mode - visual representation of fluid behavior
- Table mode - track values at specific customizable set of breakpoints
The app also allows users to store values and share them with others via URL. This comes in handy in documentation or project code and users can easily check out the fluid behavior and better understand how this configuration behaves.
After week or so of building this app, I’ve decided to share it with the world and sent out the following tweet.
🎉 I've launched a new project 🎉— Adrian Bece (アドリアン・ベツエ) (@AdrianBeceDev) December 6, 2021
Introducing "Modern Fluid Typography Editor" - an awesome & handy tool for any #frontend #webdeveloper . Create and fine-tune fluid typography values in your projects with ease. It generates a #CSS clamp code snippet.https://t.co/nkDUg0xTPS
In just an hour, it went somewhat viral and it was retweeted, liked and commented on by many notable figures from the development community like Jen Simmons, Brad Frost, Josh Comeau, Stephanie Eckles, Addy Osmani, Henri Helvetica, FrontendMasters, Vercel team and many others. Needless to say, the project was a huge success and I was happy that it reached so many people.
I saw your project the other day and was totally enamored by the design. It’s very well done. The tool itself addresses a helpful use-case too. Great stuff.
Addy OsmaniEngineering Manager at Google
The project went beyond Twitter and it was featured in numerous newsletters like Codrops and aggregate sites like WebDesignNews. In its first week, it achieved 8,000 visits and over 100 stars on GitHub.