Designing Apps using Webflow – ConsciousApps – Medium

Hey React folks, give a try to designing apps using Webflow:  #ReactJS

  • Clearly, styling components from hand using CSS is tough… and not necessary when you have Webflow.
  • Instead, within Webflow, you design each component from scratch.
  • Let’s say you want to create a series of buttons:As you’re designing these individual components in Webflow, be sure to assign them unique classNames since you’ll later be using these classes inside your React component.
  • Once the components look exactly the way you want—and perform all the actions you want (such as on focus, hover, etc.) — simply export the code from within Webflow, like this:Highlight and copy the CSS and paste it into a CSS file that’s called from your root index.html file:link rel=”stylesheet” href=”assets/css/index.
  • css” /Inside your react components, then, simply call the CSS styles, like this:So much easier than creating all this CSS from hand!CSS code exported from Webflow.You can even add nifty transitions inside Webflow!

Anyone who’s talked to me for more than a few minutes about website and app development knows I’m a big fan of Webflow. What used to take me hours to create using raw html, css, and javascript, now…

@ReactiveConf: Hey React folks, give a try to designing apps using Webflow: #ReactJS

, now only takes me a fraction of the time using Webflow. If you develop websites for clients, the financial advantages to you quickly become obvious, since you spend far less time creating the same or more value for the client.

But this post isn’t a product placement advertisement (I don’t get paid to write about the wonderful things that have happened to me since stumbling across Webflow). I’m simply writing to share; I especially want to share with you one particular aspect I use Webflow for that, to my knowledge, hardly anyone else seems to be using it for. It’s one of those things I ask myself: “why isn’t everyone doing this?” So maybe it’s time to write about it.

This essay is about app development and component prototyping using Webflow. If you’re wondering how to create apps that not only work but feel and look good, Webflow might just be the perfect tool for you. Of course you could use standard component libraries such as onsen.io — libraries such as these are an excellent choice for app developers, no doubt.

But what if you have particular tastes in terms of how your app should look? What if you’re not quite ready to compromise on uniqueness and versatility? What if you’re developing an app that has to have that special “feel” that distinguishes it from other apps out there? I, for one, want complete control over how the app should look and feel, and what it should be able to do. Hence, the Webflow route.

Inside your react components, then, simply call the CSS styles, like this:

Designing Apps using Webflow – ConsciousApps – Medium