Using Webflow to style a Sass Product

Community resources General
1

I’m a founder of a Sass startup. I have been using Webflow to create the design of the pages as well as the different elements of the UI. Basically I am making a CSS library visually using Webflow and then exporting the code. I was wondering if this is a good move? .

I am coding the site in Svelte so the process involves me copying and pasting the HTML code in the Svelte file where I then add the logic. It has worked pretty well so far and it has been nice to make very page work on all screen sizes. There are some things that cannot be made in Webflow but the majority of things can be.

Has anyone else done anything like this? I know this is kind of random but I just wanted to see what other people thought about this.

I can post some of the stuff I have done so far if you want.

1 Like
2

Personally I am a fan of TailwindCSS for that type of project. Everything is maintained right in your code base. Super lean and fast. Shame we can’t use it with Webflow.

1 Like
3

Hi @ethanfox

The big issue you’re going to run into is maintenance. Updating copy, updating design, updating images / logos, etc…

Right now you can do it yourself, and maybe you even have the time to export and re-integrate every little copy, logo, image, design, and color change.

The Problem:

What typically happens is you get busy.

You’re the founder of a SaaS, and other things become bigger priorities as interest grows from your product.

You’ll find yourself not having the time to make a change in Webflow, export, and re-integrate.

If all goes well, you’ll want to hire professionals to handle the marketing copy on your public facing website.

They’re non-technical and don’t know how to re-integrate with your application code.

The most common result is that your public facing website become stale, outdated, and doesn’t help you turn visitors into customers.

This has a negative effect on your business.

The Solution:

What most do is separate their application code from their Webflow site via subdomains.

example.com ← Webflow hosted site, easy updates for non-tech
example.com/blog ← Webflow hosted blog, easy updates for non-tech
app.example.com ← application, everything behind a login, programmers only

For the application side, the layout, design, css, etc… it’s typically all very basic and color themes are kept in sync. That’s usually a simple task.

Now you can host on Webflow for your site + blog.

  • Make rapid changes based upon market conditions
  • Update messaging
  • Refresh branding
  • Create relevant blog posts

Make product updates without the laborious task of re-integrating application code.

Without requiring any engineering resources (or their time).

…all done by non-technical folks who are experts in those areas (branding, design, blogging, SEO) while the engineering experts stay focused on making an awesome product.

In fact, this is a big use-case for Webflow.

Here are a few examples:

Hope that helps!

1 Like
4

Thanks for the detailed response!
Yes, I was definitely planning to use a subdomain for the app. The marketing website would remain on Webflow.

My thought with using web flow for the application was basically making a CSS utility library.
e.g. Stock Utilities

That way I could make more changes in the coding process if needed similar to tailwind.

My thought was not building everything in Webflow but having all of the classes set up. My main drive for using Webflow is just to have the layouts set up like signup pages and basic layouts. This to me takes a lot of unnecessary time and may not look great on other screen sizes. With Webflow I can see all of the different scenarios and adjusting things is much faster.

Below is one of the main pages of the app made in Figma. You can see the nav bar on the side and the tab bar at the top. Ideally, this would also be viewable on mobile. The table portion would have to be coded but would take advantage of the classes made in Webflow for the different text and possibly even create different components in Webflow that could then be used within the table.

  • But mostly I was thinking of creating the layouts themselves and the bases classes for everything.

Material Schedule
Material Schedule1920×1365 60.2 KB

Does this still sound too cumbersome of a process to you?

5

@ethanfox makes sense :smiley:

I haven’t heard of that utility library you linked to.

Definitely a good choice to use a library of some sort :+1:

But my feedback is the same if you’re doing what you’ve described.

Another thought is to realize that Webflow themselves clearly understand this as a problem and have created a (soon to be released) solution that may fall right inline with your needs.

Check out this (if you haven’t already):

It looks, amazing.

Hope that helps!

6

I had thought about this too. But on doing some research, Webflow uses its own CSS base and I struggled with how to get that into my app (or if I even should).

But I agree, Webflow’s visual and rapid design flow seems great for actually building out the front end of your app.

What exactly are these “utility libraries” mentioned above? Are these the equivalent of the Webflow CSS base?