new layout maker

Community Projects
,
1

Hey all,

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 4 january 2025)
At the moment, it can:

  • choose between layouts (currently 2)
  • have 1, 2, or 3 columns (in layouts that have 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
  • change colour palettes with a series of premade ones (thanks xandra!)
  • override individual colours within a palette
  • change fonts (face, size, line-height)
  • …also the titles (but not the text) are editable in place. (The text is standard lorem ipsum.)

On my list for next steps are:

  • more 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
  • background image

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… :face_with_spiral_eyes:

19 Likes
2

wow this is so cool!!

1 Like
3

this is so awesome and very overdue! thank you for stepping up to do this! <3 :meow_cheer:

1 Like
4

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.

1 Like
5

This is great! A really nice tool with lots of good options. I like it a lot!

1 Like
6

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)

updated the feature/todo lists in the first post.

1 Like