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

thomaslowrens

New member
[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!
 

Similar threads

Back
Top