Forward Slash is a coding method to unify design and development teams, increase work/life balance, and build a sustainable and scalable way of working within Webflow.

The Problem

There are many ways to build many different kinds of websites. At first glance, this statement may seem meaningless but the fact (frustrated potential) clients ask the question “How much does a website cost?” and (frustrated) developers have no idea where to start to bring clarity to the question. Forward Slash exists for websites built within Webflow to put more time to the point, the result, the purpose of the website for the end user and less time on the actual build.

The Solution

A system that reduces cognitive workload and increases our limited time (and energy) towards what gives us (and our clients) life. We’re here because we love (and want to) create something for someone.

How did Forward Slash come out?

After 5 years of coding, I’ve discovered (amongst other things) two main approaches to coding:

  1. Get it done - this approach is awesome and fun (perfect for personal projects). You get the project done by any means necessary but don’t give a shit about essential steps
  2. Do it right

the temptation to build a “perfect” (I use that term loosely) system came out. I wouldn’t want to show what I’ve coded to other developers, and I wouldn’t want to jump in their code. I hate what I’ve written in the past and I’m not sure what to write in the future.

But the more “perfect” the project, the greater the cognitive load. The greater approximation towards

Index


Differences between The System and other existing methodologies

If I'm not on the wrong track, I'm sure you already have a couple of questions going through your head. What differentiates The System from Client-first from Finsweet or Knockout from Edgar Allan? And with libraries like Relume or SystemFlow?

Before answering those questions, let me tell you I’m not here to say that The System is the best option to create your Webflow projects upon. That is something you need to decide. The foundational ideas that build The System are the ones that will tell you if it is the right system for you, or not.

That being said, let’s have a quick look to the main differences with these other Webflow methodologies.

Client-first focuses on the premise that end customers can use it. The System is created with a focus on advanced Webflow users. These two dissimilar premises mean that very different approaches are taken for the same problems.

Knockout relies heavily on utility classes, also known as functional classes. Although this is a validated and extended approach in the front-end world, it is difficult to maintain in the environment offered by Webflow due to the platform's own peculiarities. Utility classes are also used by The System, but in support of other types of main classes.

Another important point about Knockout is that its 14 column grid is not intended to be modified. In The System the grid is easily adaptable, both in the number of columns and the space between them.

Unlike the latter, Relume, SystemFlow, and some other library systems are based on being component collections. These systems allow for great speed in the build, but lose customization capacity. The predefined blocks make different websites have an underlying resemblance.

It is for this same reason that The System does not include components by default. What it does provide is guidance on how to create the components and the classes to style them.

Reduce cognitive load, the main goal of The System

The System incorporates innovative aspects compared to other systems when working on Webflow. But there is one in particular that stands out from the rest and that defines the operation of this system. This aspect is class classification.

Classes and the way styles are applied represent the aspect of Webflow development that adds the most cognitive load to our work process. For this reason, the purpose of The System is to reduce this cognitive load thanks to the classification of classes according to their function. Not only a classification at the conceptual level, but it is represented with different naming conventions for each of the types within this classification.