Keno builder is a prototype to build HTML layouts right in the browser page by modifying the dom through the popup editor by adding or removing classnames, you have to import previously your favorite CSS library and then insert Keno.
¿Why? just for fun and to avoid time building HTML layouts fully manually, Keno will help you preview your creation live while you modify the DOM directly, then you can copy that modified DOM and move it wherever you want.
¿Whats next?, probably add more features to insert blocks or full elements on the surroundings of the selected element, so you will be able to insert a new entire div block before, after, or inside each element and edit it, maybe add images, videos, and other kind of content, the vision is to make it a minimalistic page builder.
- Import your prefered CSS library like bootstrap.
- Insert the entire content of builder.html inside the page you are already starte building with a minimal layout.
- The editor will shown a red square while you mouseover the elements.
- Click on any element to modify its classnames and see your changes on the fly (remember you are editing the DOM).
- Click on finish editing button to destroy the builder.
- Copy the layout you created from the browser inspector.
- Paste it in your html document and you're done, you will have your layout ready to be used on your project.