What is Whoobe?
Whoobe is
- a visual blocks builder web app (Whoobe Studio) based on VueJS to create pages, templates, widgets, articles and manage all you assets, included the building/deploy process
- a static website generator (Whoobe Generator) based on NuxtJ to create a full static landing page or even a website
- a zero configuration headless CMS (Whoobe Server) based on Feathersjs
The main concept is to create a landing page/website based on block driven page design.
Using Whoobe Studio visual blocks builder you compose your page according to the pieces of information you need to publish.
You can reuse the created blocks, change the layout, css classes can be customized, HTML elements can be added, copied, duplicated, removed. Your blocks are filled like a form, you stack them and create a page.
Thus means enabling maximum reusability and design control while allowing content changes with clear boundaries.
Whoobe is markup, js and styling coupling applied to webpages. All of this without coding.
You can create shareable blocks that can be used for rich editing experiences in a UI in different projects just exporting/importing them.
The ultimate scope is to build a website that has the cost and time reduction of reusing well known information archetypes expressed as blocks (head, call for action, slider, footer, etc.
Main concept
Create and publish websites, ecommerce or landing pages requires to assemble information (the content) and design (layout, style, etc.)
Normally this is possible using a CMS (Content Management System) to manage the content (pages, media, articles, products, etc.) to tie with HTML, Javascript, CSS and in some case some server side application (PHP, Rails, etc.) to create the final result that is always an HTML page.
We all know that HTML is a real primitive language based on tags enriched by attributes, CSS classes and style. Main problem is: HTML is very difficult to manipulate to fit our goals.
Whoobe (Web HTML Object Oriented Block Editor) uses JavaScript Objects Notation (JSON) to manage, manipulate, update and render HTML elements with their attriubutes, classes and style.
Any element in Whoobe is an object.
The design problem
We all know that HTML by itself without CSS and styles is quite basic (do you remember first websites in Netscape?) and since CSS and styles are basically attributes assigned to HTML elements, in order to easily manipulate them we needed to find a practical solution.
For this reason Whoobe uses TailwindCSS an utility first CSS framework to easily manage CSS attributes (classes).
Solution
Whoobe HTML element object has the following standard structure:
HTML tag <p> object representation
{
"id" : "unique_id",
"element" : "p",
"css" : "",
"style" : "",
"label" : "Rich Text",
"content" : "paragraph",
"icon" : "subject",
"type" : "element",
"tag" : "element",
"link" : ""
},
In Whoobe almost any HTML element is defined and ready to be used. But how Whoobe assembles the HTML structure of different tags?
Whoobe Studio includes a Visual Blocks Builder where you can assemble any tag and manage the design.
For this reason we have different element types:
- containers (grid, flexbox or some ready to use more complex structured containers)
- text (paragrap, span, div, quote, code, heading)
- media (images, video, icons, audio, files)
- form (form, input, textarea, button)
When you assemble different elements Whoobe Studio will create a object structure that will be used in the rendering output.
A very simple example if you create a simple flexbox with a title (heading) and a text you will have the following object:
{
"blocks": [
{
"css": {
"css": " items-start mt-16 w-full md:w-4/5 m-auto bg-cover bg-left bg-no-repeat",
"container": "flex flex-col"
},
"type": "grid",
"image": null,
"label": "Columns",
"style": "",
...
"blocks": [
{
"id": "moka-zk6ai",
"blocks": [
{
"css": " text-blue-500 font-bold",
"level": "1",
"style": "",
"label": "title",
"content": "Heading",
"icon": "article",
"type": "element",
"tag": "article",
"element": "h",
"required": false,
"id": "moka-wrbaz"
},
{
"css": "mt-8 text-base",
"style": "",
"label": "content",
"content": "Article [content]",
"icon": "article",
"type": "element",
"tag": "article",
"element": "p",
"required": false,
"id": "moka-s3vno",
"coords": {
"x": 179.4166717529297,
"y": 473.59722900390625,
"width": 964.5,
"height": 56
}
}
]
}
]
}
]
}
As you can notice the main object is an array of objects where each object is an HTML element representation.
Most important thing is that the containers elements type can have nested blocks. This is the way that Whoobe create a hyerarchical HTML structure.
You should point out that for just a flexbox with a title and a paragraph looks like an oversized structure. Yes it could look like oversize, but here come Javascript and how can be powerfull manipulating objects.
In Javascript, array and objects manipulation is quite easy and you have a lot of functions, methods and libraries you can use. You can filter, move, remove, insert objects easily and very fast.
Last but not least you can copy and paste objects, export to file, import from a file making thus possible the concept of reusability
Manipulation and Reusability
This 2 concepts are the reason why Whoobe has been created.
Manipulation
With a fast and easy way to manipulate arrays and objects it's quite simple to understand that using a visual interface you can assemble quite complex structure that becomes pages.
Reusability
Create one, use everywhere. Creating a website or different pages you have always some elements that are recursive and they don't change or better the content can change but the structure and the layout normally are always the same.
A header in a website is a repeteable element. So in Whoobe you create your header, you can save as a single component or widget and then import directly in any other page. You can even Copy&Paste directly inside the same document or from different documents.
Design Control
Manipulation in Whoobe means also have full control of the design. Thus means that are no templates or blocks where your design control in terms of CSS and style is limited to some attributes.
Using TailwindCSS Whoobe Studio gives you access to all the utility first classes available in TailwindCSS (almost all).
Available grouped controls:
- Grid / Flexbox
- Box Align / Justify
- Position
- Dimension
- Typography
- Background
- Gradient
- Padding
- Margin
- Border
- Rounded / Shadow / +
- CSS Animation
- Transition
- Transform
- Spacing
- Link/Anchor
- Semantic
Any specific control and relative class utility (i.e. grid, grid-cols, text-align, ecc.) of the relative group is applicable to any element created in the visual blocks builder (if applicable to the element).
All without coding.
Responsive and TailwindCSS
Create a full responsive website or ecommerce requires normally an heavy workload on CSS classes. Yes you can use frameworks like Bootstrap or similar, but since they are opinionated based frameworks that rely on predefined components you will have almost a similar look of your design. For this reason Whoobe adopted TailwindCSS. Take control of your design.
With minimal adjustment to some classes you can easily create a full responsive website without writing any CSS.
A fast example is a responsive grid 2 columns for laptop/tablet that renders as a single column 2 rows in mobile:
<div class="grid md:grid-cols-2 grid-cols-1"> <div>Column 1 (mobile is row 1)</div> <div>Column 2 (mobile is row 2)</div> </div>
That's simpler then write a CSS media query. This is a simple case, but in complex structures to write good media queries becomes an heavy workload.
Example how to transform an ecommerce store with multi-columns multi-rows for laptop/tabled to become a multirows single column in mobile with automatic responsive behavior ?
In the below example we will have a 5 columns for large devices, 4 columns for medium devices and 1 column for small devices. Without writing any media query.
<div class="flex flex-col md:flex-row md:flex-wrap w-full items-start justify-around"> <div class="w-full md:w-1/4 lg:w-1/5 m-2">Item 1</div> <div class="w-full md:w-1/4 lg:w-1/5 m-2">Item 2</div> <div class="w-full md:w-1/4 lg:w-1/5 m-2">Item 3</div> <div class="w-full md:w-1/4 lg:w-1/5 m-2">Item 4</div> </div>
Flexibility, no limitations, open source and free
Whoobe can works in a local environment or in the cloud and has no limitations on how many pages, blocks you can create.
With the import/export functionality Whoobe can easily import/export blocks, pages sharing you creations with other Whoobe installation without any special settings
As an open source project Whoobe is completely free and opened to contributions, new integrations, development and improvements.
Improved workflow
The ultimate goal of Whoobe is to improve the web design and publish workflow to reduce costs and time, supporting advanced design techniques with a powerfull CSS engine supported by TailwindCSS framework.
With Whoobe Studio as a web app you can:
- create custom design with full control of layout and appeareance based on TailwindCSS framework
- assemble pages with reusable and editable blocks
- integrate ecommerce and support multipage websites
- publish and deploy your pages/website