Introduction
Being a developer, I must say that I have been asked about Content-Builder a number of times by some fellow developers.
What is it?
How does it work?
What to gain from it?
These are some of the questions that have been prompted to me. That is why I decided to write this blog in order to give answer to all these queries.
First, let me tell you that this article is for developers who like to stay organized, focus on integration, value time and love to reuse code. If you are one of them, then I bet you will love Content-Builder.
The power of Content-Builder (Contentder`s very own site builder) comes from its components, how easy they are to create and implement. By the time you create your very first Content-Builder component, you will already be ready for greater challenges. As it is written in pure HTML, CSS and JavaScript (jQuery), you won’t find it hard to implement it at all.
Note: Just remember that no prior knowledge of CSS or designing is required, Content-Builder has it all covered for you. It is just you and your creativity.
So, what's this thing called Content-Builder?
It is basically a site builder of Contentder, written purely using HTML, CSS and JavaScript so that any developer who knows a little bit of HTML and writes some JavaScript can start building on it. It has its own dedicated website for developers to build and experiment with components > EasyBuilder.contentder.com.
The very first thing you need to know is that everything in Content-Builder is a component. All those beautiful templates you see in the Templates section in Contentder website are just a bunch of components working together. You can call them as the building blocks of your website. The best thing about it is that you can always reuse your components that you have spent hours working on just by a simple drag and drop action. I warn you, once you start creating components, you will get addicted to it.
Here are a few things that you will gain in time:
- Build instant components for your website.
example: Custom Headers, Footers or do more advanced stuff like role based management system.
- Reuse your components till the end of time.
- Get ideas from hundreds of components built by developers like you.
- Instant website creation with drag & drop, resizing and some other cool stuffs.
- Share and sell your components online.
Go through the templates section in Contentder to see how the components have been used to create awesome templates right now.
How do you get there?
The steps to get to the Content-Builder interface is as simple as shown below:
Register > Be a Contributor > Choose Create Component > Login to EasyBuilder .
Once logged in, the first thing you see is:
Here, you can build your own component from scratch, improvise an existing component or implement it in the page.
What’s inside a component?
A component in Content-Builder is simply a JavaScript object in a pre-defined format. If you click on Create New button in the Build Component section, you will see a basic structure of a hello world component as shown below:
"helloWorld": {
"componentname": "Hello world", // <--- Your component name
"category": "mycomponent", // <--- To Categorize your component in the Component List
"icon": "fa fa-globe", // <--- For component identification (Supports font awesome icons)
"row": false, // <--- If component occupies a full row
"hidden": false,
"defaultdata": "<div>...</div>", // <--- Default data when dropped in the editor stage
"beforedrop": function ($appendedParent, $appendLayer, dropped) {},
"afterdrop": function ($appendedParent, $appendLayer, dropped) {},
"onsort": function (ui) {},
"settingDOMs": {
"tabs": {
"Basic": {
"DOM": "<div><h2>Hello world Basic Setting</h2></div>",
"onload": function ($item) {
var HelloWordBasic = {
init: function () {}
}
HelloWordBasic.init();
}
}
}
},
"selectLayer": function ($elem) {
var $parent = $elem.parents('.component-hello-world');
return $parent;
},
"remove": function ($viewDom) { },
"view": {
"view": function () {
this.library.myfunction();
var obj = {
init: function () { }
}
obj.init();
},
"oncomplete": function () { },
"library": {
"myfunction": function () {
var value = "abed";
},
"anotherFunction": function () {
var value = "fasf";
},
},
}
}
Well, did you recognize the code?
Yes! It’s nothing but JavaScript objects and a mixture of jQuery (it is up to you) with some HTML Dom embedded in it.
Spend some time with EasyBuilder component editor and without realizing you will already have created a component yourself. It also has a friendly component editor with a separate JavaScript Editor and HTML UI portion at your disposal. Testing your freshly created components is as easy as clicking the Run button.
If you are confused on how it works or how to embed your HTML, there is a special object that holds it called the defaultdata. It holds your component’s HTML content and comes with its own structure as shown below:
<div class="editor-component component-hello-world sfCol_100 ">
<div class="carrier-open-option">
<i class="icon-icon-drag sortComponent" title="drag"></i>Hello Text
<i class="tooglesettings fa fa-bars"></i>
</div>
<div class="carries-options text-options hide-element">
<i class="com-settings" title="Text settings" data-type="Hello world">Settings</i>
<i class="deletehelper" title="delete">Delete</i>
</div>
<!--Place your actual HTML content to be displayed here-->
<p style="font-size: 14px;" contenteditable="true">Hello World</p>
</div>
The HTML part of your actual component should be placed before the last </div>. As you can see in the above example, for your convenience, I have placed a paragraph with Hello World in it just before closing the div.
Component manipulation in the component editor page can be done using beforedrop, afterdrop, onsort, remove etc.
If you wish for your component to react in a certain way while in preview mode, there is a special place for it called view.
settingDOMs is where you provide settings for component manipulation like size, color and other features.
Steps to deploy a component
- Start by clicking on Create New button.
- For now, let’s rename the component name to something different - Our World.
- Check if everything is ok by pressing the Run button.
- Save your changes.
Finally, click on save and view your newly created component in the list. Here, the component, Our World is ready to be used as shown below:
Points of Interest
- Content-Builder is not just a site builder but also a complete platform to demonstrate your capabilities.
- It is free to use and experiment with (You just need a free account in Contentder).
- You can always learn from what others have created, you just need to clone them to your component list.
- It is nothing but HTML and JavaScript (You need not worry about CSS stuffs).