varve's layout builder

Set options for the page layout below!

Titles are editable but none of the other text is. This is a layout builder, not a general purpose website editor. The code it produces is reasonably clean, and is intended for you to tweak it further once you have the basics set up here. I have no intention of making every single HTML and CSS property available here, so if you can't find it in the control panel you'll have to add it yourself once you get the output. If you're not sure what to do with the code afterward, you could take a look at my tutorial, or any number of other HTML tutorials out there on the web.

Latest feature: appearance themes. Full changelog.

This will show up in the browser's title bar (or tab) and be the bookmark name.
This will go in the page header information, for computers to read.
This is a short description of the page. It's used under the link in search engine results, social media posts, discord links, etc.; write it accordingly.

These borders will not be included in your page output even if they're still visible when you click the 'Get page code' button

Structure: (headers/footers, columns, etc) 60em
80%
Layouts

Your basic text-based, optional sidebar, responsive layout.

A simple responsive art gallery with optional sidebars

a "no scroll" layout set in from the browser's edge.

A simple responsive layout for profiles, reviews, and other pages that have multiple items with their own titles.

70%
main content area options px


px


column options em
px


px
column box options
px

px
px

header options this image must already be on your web host, the same place you will put the files generated here. (they may be in an images/ folder.) i recommend loading the image in your web browser and copying and pasting the address from there to make sure it's correct.
this is what will show if for some reason your header image doesn't display. if it's purely decorative, leave it blank; if there is information someone viewing your site needs from it, for example the site title is in the image, type that here.


footer options

Sorry, no footer options yet

Appearance & Themes: (colours, fonts, etc)
Prebuilt themes

Note that changing your theme choice will replace many of the customization options you've set. Better to set the theme then muck about with individual settings.




Prebuilt colour palettes

Note that changing your palette choice will replace any individual colours you've set. Better to set the palette then override what you need to.














Individual colour override
















Fonts Different types of computers (and tablets, and phones) have different fonts available. With a list of fonts aka a "font stack", the computer starts with the first one and goes until it finds something it actually has. Check out Modern Font Stacks for some examples to get you started.
em

em
em

em
em
em
1.2
Background This image must already be on your web host, the same place you will put the files generated here. (They may be in an images/ folder.) I recommend loading the image in your web browser and copying and pasting the address from there to make sure it's correct.


There are many more options including specific and percentage lengths which you can set in the CSS directly once you download it. This tool only offers the basics.

Decorations
Header shadow options
em
em
em
em
%
deg

For making multiple layouts that will use the same styling—you can only have one set of options (other than page layout) per CSS file.

HTML:

CSS:

copy and paste each of the text areas above into their own files. The CSS file should be named style.css; the HTML file can be named whatever you like (and there can be as many as you want of them). They should both/all be placed in the same directory or folder.

header image goes here

Page title

the title of this stuff right here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper ante tristique velit molestie, quis luctus eros volutpat. Etiam et magna ipsum. Aliquam erat volutpat. Mauris posuere justo eget eros tincidunt euismod. Quisque ac mollis risus, eu vulputate risus. Morbi luctus porttitor sapien vel sollicitudin. In a erat molestie, commodo ex sit amet, porttitor felis. Proin venenatis nisi est, ac rhoncus nisl iaculis ut. Mauris justo lacus, placerat at posuere at, volutpat vel dui. Vestibulum auctor ligula mollis, accumsan sem in, luctus neque.

Donec eu placerat diam, id consectetur justo. Maecenas auctor tincidunt sagittis. Sed quis auctor dolor. Maecenas venenatis euismod diam, at congue libero tempus vitae. Integer quis congue enim. Maecenas vitae massa dui. Etiam semper ante id molestie sollicitudin. Phasellus a dolor lacus. Maecenas auctor ex ac neque faucibus congue. Suspendisse potenti. Praesent magna magna, dapibus ac bibendum quis, finibus vel massa. Nullam tempus dui ac nisi consequat finibus. Maecenas tristique ex quis orci viverra, id tristique magna sagittis. Maecenas sed eros eu nisi lacinia mollis. Cras iaculis leo eget mattis congue.

Nam aliquam, augue sed auctor venenatis, urna ipsum consequat neque, nec ultrices lectus eros vitae mi. Vivamus nulla mi, egestas vel leo eu, auctor varius felis. Vivamus pulvinar ut nulla in molestie. Nunc dui massa, mollis non enim sit amet, dapibus laoreet ante. Phasellus vel tellus eu erat pharetra tincidunt. Nulla faucibus orci at pellentesque pretium. Vivamus sed dictum risus. Aenean sed purus ut nibh euismod faucibus vel vulputate augue. Nullam sollicitudin efficitur massa id aliquet. Proin ex nisi, dignissim eget nisl in, varius lacinia tellus. In hac habitasse platea dictumst. Pellentesque molestie dolor in metus vestibulum, a dictum mi semper. Nullam eu varius nisl. Quisque quis mauris augue. Sed sagittis scelerisque ante vitae varius. Sed elementum orci at arcu pharetra blandit sed et diam.

Vestibulum interdum gravida nisi egestas sodales. Proin molestie at eros accumsan elementum. Nam ullamcorper et tellus a pretium. Fusce vulputate ligula ut posuere laoreet. Integer vel purus nec sapien blandit commodo nec sed tortor. Mauris convallis placerat feugiat. Ut varius condimentum ligula in hendrerit. Etiam consequat porttitor mattis. Maecenas in dolor quam. Integer et lorem eu velit ullamcorper porta. Integer vitae tellus non lorem consequat tempor quis id metus. Cras dapibus urna vitae pharetra ullamcorper. Aenean eleifend arcu placerat rutrum consectetur. Donec gravida, mauris facilisis volutpat interdum, nisl ante pretium metus, quis congue eros arcu vel mi. Integer sed dolor mattis, placerat erat id, malesuada odio. Maecenas sit amet lectus non eros iaculis accumsan.

Proin varius semper sollicitudin. Quisque ut iaculis dui. Suspendisse iaculis tortor sit amet convallis pharetra. Suspendisse congue tristique maximus. Praesent id ipsum vel odio auctor congue. Vestibulum in feugiat risus, euismod facilisis odio. Ut tristique mattis luctus. Nunc aliquet enim non leo varius euismod.

Sed sit amet laoreet tortor, id rutrum elit. Aliquam pharetra diam eu arcu scelerisque porttitor. In interdum rhoncus urna, quis euismod augue elementum ut. Aliquam hendrerit tellus in interdum mollis. Pellentesque commodo nisl sed lacus mattis, id gravida lorem consequat. Nam erat nisl, condimentum ac mi nec, finibus vulputate risus. Suspendisse potenti. Nunc in lorem sed leo tempus congue. Ut tempor dignissim quam, vitae vulputate dolor eleifend sed. Aliquam erat volutpat. Pellentesque convallis mauris vitae mi commodo, id porta magna vulputate. Nulla ornare tristique leo, a faucibus dui semper vitae.

Terms of Use

The html and css output from this page is free for non-commercial personal use and modification, and likewise for individuals who are selling things that they personally made. If you're selling things that other people or machines made on your behalf, hire a web developer. If you are that web developer, what are you doing here, this is for beginners.

The configuration panel and the code behind it are copyright to me. You can study it but don't copy it wholesale. I also wrote up tips and problems I solved for this, in case you want to do something related.

Credits

Inspired by Sadgrl's Layout Builder but I wanted to see more options than were provided there; encouraged by the 32-Bit Cafe with even more ideas for options.

Special thanks to xandra for a whole pile of colour palettes.

Features are being added as I work on them; if something is missing it may already be on my list. If something is there and not working, please email me at varve@wrongity-write-on.org and I'll try to fix it.