FontDiscovery 🖼️ 129: Save Webflow CSS ➯ File
Our Latest Free Mini Tool!
Hey Everyone!
Hope you had a fantastic week! This week I have been doing a lot of marketing work, working with several cool newsletters to get the word out about startup journey and Typogram!
Another thing I have been working on is moving our build in public posts to it's new archive on our blog - that way, we can start getting some benefits from the beach engines.
Last week we quietly launched a cool free plugin - Webflow to css. No/Low-Code is essential to our development process. In the early stages of Typogram, we relied heavily on Webflow for CSS styling because of how easy it was. But, as Typogram evolved, most of the work centered around JavaScript rather than CSS, which means a local code repo would be a more efficient development environment.
Still, we love using Webflow’s visual style editor - so we figured out a solution bringing us the best of Code and No-Code world: using Webflow as a pilar for Typogram’s design system.
My co-founder wrote about the journey of developing it in our buildinpublic newsletter. This week, I want to share it here in case anyone is also working with Webflow for their development. This plugin could be useful for your work.
The Challenge
When I found Webflow, it completely changed the game of web styling for me! It works as a visual CSS editor that feels a lot like design apps. I started using Webflow for all my CSS editing, and it’s been fantastic. It’s the best of both worlds: I get to be creative like a designer, but still have the control of a coder.
As I continued to grow as a coder, I found myself needing more advanced JavaScript capabilities that often relied on package managers like npm and build tools. Webflow doesn’t accommodate package managers and build processes at all.
In the early stages of Typogram, I was determined to keep my main code on the Webflow platform for as long as possible and add JavaScript through <script> tags placed in the header. However, as the project evolved, the majority of the work became centered around JavaScript rather than CSS. At this point, the benefits of keeping my project on Webflow began to hinder its progress.
Leaving Webflow is indeed an option, but it’s not an easy decision to make. While I can export the code, the process is a one-way street. There’s no way to import the code back into Webflow, which means I would permanently lose the ability to edit the CSS using that visual editor.
I discovered a solution that allows me to enjoy the best of both worlds. For JavaScript, working in a local code repo with a dev server is undoubtedly more efficient, as it simplifies development, debugging, testing, and building. As for CSS, even though I’ve exported the code, I don’t need to abandon Webflow entirely.
Instead, I use Webflow to maintain a Design System page, which includes all the HTML markup and CSS classes that my design system components use. Whenever I need to update the style, I make the changes in Webflow, export the code, and integrate only the updated CSS into my local code repo. This approach enables me to leverage Webflow’s visual CSS editing capabilities while taking advantage of the more advanced JavaScript development environment offered by a local code repo.
The main drawback of this hybrid approach is the time-consuming and labor-intensive exporting process. Each time I update the CSS, I have to go through several manual steps:
Click on Prepare the ZIP file.
Download it.
Unzip it.
Locate the CSS file to copy
Rename the file
Paste it into a nested folder in my code repo
This process is not only tedious but also prone to human error. Moreover, the cumbersome nature of this workflow slows down the cycle of development, making it less efficient. The old magic of Webflow is to make a few changes, click on the publish button, and boom! The CSS change is live. It encouraged me to finesse the styling with my designer instinct, resulting in better work.
My Solution
I reached out to AI for some help and shared a few of my ideas to solve this problem. After a bit of back and forth, I came up with a handy code snippet that can grab the innerText from the export code overlay on Webflow and save it to a local file. It uses the File System Access API to get a file handle to the CSS file in my code folder, and then I can repeatedly save updated CSS into it.
These sketchy little code snippets, run in browser developer tools, did the trick! Well, that is as long as you ignore the big red warning from Weblow dev team.
I want to share this approach with fellow designers and developers, but I know not everyone will be comfortable ignoring the warning or feel at ease opening the developer console to run code. So, what’s the best way to share this solution?
I look at the button where I click publish my code, and right above that, it is a row of Chrome extension icons — that gives me an idea to wrap the code into a handy Chrome Extension, which essentially will replace the Webflow’s publish button for me from now on.
Introducing Chrome Extension — Save Webflow CSS to File
I recorded a little demo to showcase the true power of this handy little Chrome Extension. I am “dogfooding
” it and using it to develop the CSS styling for itself! I created a simple design page on Webflow, and use this tool to export CSS and override the style.css file in my local Chrome Extension development folder. And then, I made a few changes to the border-radius, and font-weight, use the extension to export CSS to the target file, and boom! the Chrome Extension got the latest styling after I opened it again. Pretty neat, right?
Demo of Chrome Extension: Save Webflow CSS to File, watch it on Youtube.
The Launch
I just launched it in Chrome Web Store! If you like my work, please give me some support by:
Write a review on Chrome Web Store
Tweet or retweet one of my tweets about the project
This helps more people to find the extension and saves people’s time on their future projects!
1 Eating your own dog food or “dogfooding” refers to the practice of using one’s own products to develop that product itself, to improve its quality, and ensure it meets the needs of its intended users.