Tips, Guides & Upcoming Features

From Flutter to Breezi: Part 1

Written by:Navid1983 days ago

We made Flutter roughly 3 years ago now. It’s been downloaded over 150k times up to today. At the time Freshout was very young. It was 3 of us in an office on Girard Ave in Philadelphia. It was a beautiful office actually. We were working on a small site for a friend of mine. We needed to size images perfectly for the header, have a thumbnail show within the CMS panel and use WordPress. Pretty simple thing… so I asked one our developers to make a plugin to make something where we create a dropdown, date picker, multiple option, and other type of fields and then print them on the template.

At the time, there was really nothing like that out there so a lot of poeple found it useful. When you wrote a post on WordPress, you only had a post title and a post body so if you wanted to use WordPress to create a products page, you couldn’t really give any nice management tools to your clients.

As we started to grow, we kept developing it more and more. Our clients really loved it. We even developed a shopping cart plugin version + a WordPress MU version… Once we were done with the field types, we started looking into how to modulate groups of fields and how you could print entire blocks of your template.

We started thinking about an on-your-site -as-you-see-it visual site editor that would look at your CSS files and parse rules based on a simple syntax. The idea was to add an identifier on the properties that you wanted to be editable (when you were running the editor) and also specify the values that it could be changed to (or the range). We didn’t have the bandwidth at that point to do what we imagined so we just tabled the whole project.

Around the same time, I was searching for another project that was similar and found something that was remarkably more powerful (or at least attempting to be). It was really difficult to wrap your head around everything they wanted to do but it was literally an entire templating and CSS language built for building super dynamic themes on WordPress. I think one part was actually called Canvas. I’m not sure. It was broken into two parts. Part one was the templating and part two was the css editor. The codebase for this abandoned project pretty massive but there were a lot of very interesting ideas in there. They had built their own CSS editor, templating language, and lots more. We tried to revive that project but there was just too much to carry. And there was no support for the project. I had to look through the internet-archive to download the files. It was sad but we abandoned the abandoned project.

By this time, Freshout had grown to about 15 people and we had more room to play around so we decided to actually turn Flutter into a product of some kind. I think the reason was just pure frustration with client work at the time.

One of the first questions we had to face if we were going to continue building the plugin on top of WordPress or build our own CMS. I was really torn about the decision. On one hand WordPress was such an awesome platform to build on and a great community but I didn’t feel comfortable building something would required us open-source our work.

It’s not that we didn’t beleive in open-sourcing. It’s just that spending money on a new business that had those types of restrictions just didn’t seem like something that would be a good idea. I think most people don’t really understand what GPL really means and just interpret it they way that they’d like. This is the way I saw it: If you build anything that can’t live without our code, you should be open-sourcing yours or its ilegal. That didn’t work.

There are plenty of WordPress based platforms these days that dance around the GPL rules. I’d still feel uncomfortable with that today so I’m glad we decided to build our system from scratch. The other thing was that we only had two PHP developers on our team. The rest were all Rails. So at that point we completely disregarded everything with Flutter. We stopped working on it. People were pissed. I felt horrible but it just didn’t make sense for us + there were so many developers that were trying to compete with our project that I thought it was just dumb.

Now that we had decided to build something from the ground up, we didn’t really care what Flutter was. We didn’t have to work within WP’s constraints. The biggest one being that content editing was not on the same view as the actual content view. That was huge. It’s the one concept that is still at the core of Breezi. Remove abstraction. Focus on what the user is looking at. The rest is your (a product team’s) problem.

I started to put together some wireframes of the very early concepts and sent to a few people on our team. It was pretty horrible. It was a shelf at the bottom of the editor (just like we do now) but EVERYTHING happened from there. Once we had some basic specs, we put together a team of a few of our people to start working on this project. We called it Breezi.

We had no idea what the hell we were getting into. There were 3 or 4 really ambitious ideas that were totally disconnected as an experience. We had no core experience to pivot around and were coming up with the supplementing ones.

The most interesting idea was to push the platform towards something that would guide you as you were making decisions. You would get a bunch of “good” derived choices as you were playing with your site. So if you changed your text color here, it would suggest you a few background color for the containing area. Another example… we had a feature that would match line-heights with your font sizes. There were similar ideas done around colors.Seems like a good idea but it was too ambitious too early on.

By this time, Freshout had just finished a few fairly large projects so the team that was working on the editor was about 6 or 7 people at this point. We were lucky enough to have some really incredible people join our team around this time. It’s really under their leadership that the product was coming together. I honestly had no idea what I was doing. The team really carried themselves. I was spending most of my time dealing with clients in San Francisco and the team was just on their own developing for a good few months. Everyone carried their own weight. It was a very technically challenging project and for many of the guys, it was probably one of the most challenging thing they had ever worked on.

We had the usual delays and set backs. A lot of things were cut out but the guys eventually had a prototype working. The product was pretty weird in terms of the user experience. A lot of good ideas but they just weren’t there yet.

This was our alpha alpha alpha. One template, one layout, basic content editing capabilities, the style settings were coming from the shelf below, it took over 35-50 seconds to fully load the page and you could do a bunch of things. It was good for what it was.