The Custom Layout Builder is an application that allows a developer to create an HTML page. The application provides a Grid layout, API and UI that can be used to create a webpage. The developer need not write code. The code is auto-generated.
You can check out this quick demo to get started.
Features
Various functionalities that the layout builder provides are:
-
Drag and drop columns & rows – Depending on the screen layout requirements
-
Resize, delete and add columns – Depending on the content of the columns using the different icons
-
Adjust layout depending on type of screen – phone, tablet and desktop
-
Quickly edit the source code directly – Code is generated and can be viewed on the click of the '</>' icon. This can be accessed by the developer and modified as per requirements
-
Content in the columns can be added using TinyMCE.
-
Pluggable CSS Class and ID Framework. Developers can add their own classes within the code using the icon. As of now, there are a couple of classes that can be auto-generated.
-
Deletion of code that is not required.
Software Components
-
TinyMCE – A WYSIWYG Editor that allows the user to add text, tables and format content.
-
JQuery – A javascript Library used to implement the layout builder
-
HTML – To develop the layout builder
-
Font awesome – Library that is used to get the icons, customize them and add relevant CSS.
-
Bootstrap.js – Library that allows incorporating jQuery and jQuery Grid Library plugins.
-
Jquery Grid Library – Allows to generate source code for grid operations like insert, filter, delete etc
Assumptions: None
Open Issues: None
You can find the Custom Layout Builder on GitHub and start using it right away.
If you have any queries about the Custom Layout Builder or feedback you would like to share, please let know in the comments below.
