I’ve spent the past two days creating a layout maker with the goal of having something flexible and customizable to get people started with their own page.
It’s still fairly basic compared to what I plan for it to be, but it’s functional. The output goes into a pair of textareas, one for html and one for css; you copy those into a pair of text files and put them in the same directory.
(updated 19 january 2025)
At the moment, it can:
choose between layouts (currently 4)
have 1, 2, or 3 columns (all layouts have optional sidebars)
adjust the total width and the width balance between main and sidebars
add and customize borders around the sidebars (if they exist)
show or hide the header, footer, and navbar
place the navbar fixed to top, bottom, or either side, as well as inline with the text and sticky once it scrolls to the top
style the navbar as flat buttons, raised buttons, a full width (or height if your menu is stuck to the side) banner, as well as the default text links
add a header image
add a background image with various tiling/fitting options
change colour palettes with a series of premade ones (thanks xandra!)
override individual colours within a palette
change fonts (face, size, line-height)
add a drop-cap first letter in the main content
…also the titles (but not the text) are editable in place. (The text is standard lorem ipsum.)
On my list for next steps are:
selection of pre-made style starting points the way there are pre-made colour palettes
more layout options
maybe widgets to put in the sidebar?
footer options
Anyhow, it’s been an interesting couple of days! I’ve gotten fairly familiar with the DOM and CSSOM in that time. Just enough to get myself into trouble, I’m sure…
This is awesome, and you’ve done a wonderful job! Every time I think of “layout makers,” I envision drag-and-drop tools, since they’re so popular these days, but that just sounds like a nightmare to code. Your way of using checkboxes instead has the same function, but probably keeps the resulting code much cleaner in the end.
I’ve added a few things the past few days, notably basic font control and the choice of two layouts. (the original basic text, and an art gallery using the same html/css as I do for my own gallery)
now i’m up to four layouts, I added background image support, and I shamelessly stole the CSS for a drop cap from jamesg so I could add that as a feature too
Hey hey, another update: I added themes as well! They change a whole pile of settings to give you an alternate starting point to fuss with. Every layout should work with every theme should work with every colour palette!
