LiveCanvas - I built a wordpress page builder from scratch w/ Bootstrap 4. Feedback please!

thomaslowrens

New member
Building great websites is not easy. Not even in 2019. And if you've been told the opposite, well, you've been told a big fat lie.

What most site-building products say is not really false advertising - technically, anybody can "make a site" - but this just leads to developing a completely wrong mentality about the task itself.

Building a site - that's easy. But doing it "right" - it is not.And why should anyone care? Well, to get some decent business results, be it in any kind of niche, you \generally* NEED to* "do it right".

The bitter truth is that experience, knowledge, and the ability to code at least some HTML will surely be useful for the adventure.So webmasters, designers, developers, rejoice! There's none of you risking your job - even in the era of "one click" website builders that haunt us on Youtube ads.

[MY STORY]I've been working for some good fifteen years wearing the various hats of webmastering - and spent the last ten mostly developing and supporting some WordPress themes and plugins. This gave me the opportunity to have a look at literally hundreds of wp-admin panels of different people - witnessing what the average joe actually does with WordPress - and which kind of disaster-choices are often made.

Before digging into this, let me say that **I do absolutely love WordPress**. I've been using it since 2005 and version 2.0 - I think it's an immensely valuable tool to do a lot of things. It's of course the king for blogging, but works incredibly well for most kind of sites - and even eCommerce as well, albeit with some limitations.

It's almost unlimited theme and plugin ecosystem is a huge bonus - until you realize - well, there's a lot of great things, and loads of crap as well: you need to accurately choose what to install. As in both electronics and software, keeping it simple is a golden rule to minimize faults.

As a cat who can code a bit, I've personally used WordPress for many projects mostly as a framework, a vanilla install with 2-5 well super well-known plugins, and then coding from scratch one or more plugins to handle the custom logics of the project - if any. Following this way of working, I never had an issue upgrading the WordPress core, which I always do, or the plugins - and I've seen that the performance while browsing the site or the back-end is generally great on any decent host.



[THE PROBLEM]So which are the most significant horrifying views that I've been seeing over and over? What I really hated is when I saw people using this approach of "piling" some 20+ plugins, a theme with 200K settings AND a site builder - to actually do a one-page site for their small business - a case where almost pure static HTML coding would be fully sufficient. Loads of unnecessary complexity, to achieve a poor result - which most of the time was a slow, low performance website that took ages to load on mobile.It almost felt like a pyramid of plastic bottles on a beach to me - the effects of an unruled consumerism of plugins.

It scared me to death when I had to debug a problem on these "useless monster sites" - it can take a lot to understand from where any problem arises - and it feels like curing the symptom and not the problem.When this was not the problem, and a site builder plugin/theme with a reasonable number of plugins was used, there was another thing bugging me. Coming from an SEO background, I just couldn't ignore that. The resulting HTML markup.Why does every single page builder out there have to spit ten nested DIVs for everything?There has to be a place in hell for such a thing.

[IN A NUTSHELL]

Page builders have thought the people that they can do everything without coding, but they didn't tell them the cost of this.So, can we change things?As a webmaster I was feeling there was a kind of void between bloated page builders and the classic bare code editors.

Ideally, can't we have a tool to make the Website Developing process: * fun,* flexible,* safe for newbies,* ...but uber-hackable for guys who can talk code?Somehow, I imagined a tool that would allow quick page building, via an easy visual interface based on direct manipulation - but wouldn't "assume" that I cannot code. A tool that would not give the "handcuffs" sensation that a developer feels while using visual page builders.

In my spare time, I started developing some proof-of-concept prototypes exploring the possibility of developing a page building platform which would be capable to ease the webpage creation and editing - but helping achieve full control on the generated markup.Kinda like a page builder for people who can code HTML - but want to save time.In another words, an automated HTML code writer somehow.

I didn't know where I was going, but I strongly felt the journey could be useful.After some years of experimentation, my conclusion was that it was perfectly doable, yet maybe a too small niche to appeal the big dogs.

And then, brick after brick, I built a plugin, LiveCanvas, "with a little help of my friends".

[TECH CHOICES]

Basically, I wanted LiveCanvas to be:
  • A way to build super fast websites, that can live inside WordPress or can be published as a static HTML site
  • A visual builder allowing you to reuse well tested, responsive components, and craft your own ones
  • A live HTML code editor making possible to easily refine ALL the visually - generated code - and would keep the page HTML as the only "source of truth"
  • A plugin that behaves well with WordPress, leaving the standard header and footer to the Theme, but allowing edge-to-edge crafting of the pages - while leaving custom post types and posts / articles untouched
  • A really lightweight plugin, which would NOT add *ANY* JS or CSS file to the site at all
  • A tool that would not set any limit whatsoever - useful for crafting small and huge websites
  • An inspirational tool, with embedded HTML "readymades" for the most popular needs, clip art vectorial stock, Unsplash image search, and a bit of everything you need
  • A place where I actually would love to build web pages, and have fun while using it!
To reach this goals, it took some time to find the right choices technically speaking.One of the main questions was which CSS framework to use; by the way, dismantling some popular WordPress page builders, I discovered they load their extra CSS framework, which is added to the theme. So you end up having a site which uses two different grid systems - one for the theme structure and one for the builder content. And this is just the tip of the iceberg, don't get me started....

I wanted to have a lean, solid, open source stack to "partner" with LiveCanvas - to have a repeatable, good and quick way to get started building a new site and guarantee good performance, minimizing bloat.I explored and tested loads of CSS frameworks, philosophies and starter themes.

I decided to go for Bootstrap 4 as a CSS framework. I think it's the best compromise today in order to have a really battle-tested tool to craft a perfectly responsive site - especially for its large user base and community - something front-end developers would really appreciate.

In order to "merge" WordPress and Bootstrap, I needed a good starter theme. I settled for UnderStrap - which has the most love on GitHub when looking for Bootstrap 4 WordPress Themes - and it's really easy to setup. An interesting alternative would have been Roots.io's Sage, but it's too complicated to get started using it for a newbie. I wanted something simple. Then we'll support the more complicated stuff. That's how I see it.So, on your new vanilla WordPress install, just install the LiveCanvas plugin. It will help you automatically install UnderStrap. A couple clicks and boom, you're ready to roll.

This still gives total styling freedom - because you can optionally recompile Bootstrap inside UnderStrap and visually tweak the starter theme as you want - UnderStrap is made on purpose - but for the lazy folks I've built a free UnderStrap child theme - packed with 30+ pre-made Bootstrap styles, and some goodies to make UnderStrap a dream to work with - but staying lean and pure.

[FAST FORWARD]Fast forwarding to today, LiveCanvas has completed a beta stage where a bunch of designers from the UK, Germany, Australia, Spain, France have put their input in making it a better product. I'll be forever grateful to them - actually seeing the sites they built with LiveCanvas gave me shivers more than one time.LiveCanvas is now ready to use on production sites - and it's of course running his own site too by the way. And it's fun to work with, I promise!

If you do feel LiveCanvas may be interesting for you, you can find out more at dopewp.com - or if you don't, thank you anyways for dedicating some of your time to listen to my rant. Maybe building better sites can become a little bit easier! Would also love your feedback if you have any!
 
@thomaslowrens I am looking for a wp builder and i found your project, looks nice, i think is still a bit expensive or maybe need some kind of trial for try before buy, a question is kust for static sites? no way to design a page of post for example? Thanks
 

Similar threads

Back
Top