Layout Generator

You can use my layout builder to generate a code for your website. The generated code will include HTML, CSS and (optionally) basic JavaScript.

This generator is VERY NEW. There might be some bugs. Please tell me about any you see!

Start generating!

Features:

• ✓ choose site width, header, footer, sidebars, colors, font, font size, margins, paddings, etc
• ✓ styled basic content elements (headings, blockquote, code, images, ...)
• ✓ css variables for easy changes later
• ✓ code comments for your comprehension
• ✓ mobile responsive (+ options)
• ✓ basic accessibility + semantic elements
• ✓ optional javascript to load your layout
• ✓ no jquery or other unnecessary bloat

If you have questions or feedback regarding the tutorial, please use the comment section at the end of the page! Don't be shy!

If you like the generator, please share it on your page! You could use my button:

<a href="https://petrapixel.neocities.org/" target="_blank"><img src="https://github.com/petracoding/petrapixel.neocities.org/blob/master/public/assets/img/linkback.gif?raw=true" alt="petrapixel"></a>

Examples

Here are some examples of layout generated with my tool. (Click to enlarge.)

You can view some example code here.

How to use

On the generator page, use the provided settings to choose a layout that fits the website you want to make. With every change, the preview (on the bottom half of the screen) will update. Once you're happy, click the "Show Code" button to get the code.

HTML:

This is your base for any page on your website. Paste the code into all of your page files (e.g. index.html, about.html, ...) and change the content however you want.

If a page file is in a subfolder (= not on the same folder level as the CSS and JavaScript files) you need to adjust the paths in the HTML code.

<link href="./style.css" rel="stylesheet" />
<script src="./layout.js"></script>

<link href="../style.css" rel="stylesheet" />
<script src="../layout.js"></script>

<link href="../../style.css" rel="stylesheet" />
<script src="../../layout.js"></script>

CSS:

This goes into style.css.

If you need help understanding the grid rules which make up the layout, read the grid section of my positioning/layout tutorial!

JavaScript:

(If you've selected the "Load layout per JavaScript" option)

Create the file layout.js in the same folder as the style.css and paste the code in there. Just like the CSS the JavaScript is loaded on every page, so it's only necessary to create this file once.

The code should work as-is without making a change.

Tip: Active menu links will be given the class active, so you can style them in the CSS,
e.g. nav a.active { ... }

Once you've pasted the code into your files it's time to start editing the code however you like! Don't remove the credit in the code comment or the console.log statement. You may remove the credit in the footer and main content of the page.

Cache:

A word about cache: If you can't see the changes you're making in your layout your browser might be loading an old version of the CSS/JavaScript from the cache. (If you've ever heard "Try clearing your browser's cache" in response to a problem: This is why.)

Clearing your cache is one way to see the up-to-date code on your website, but it also requires your returning visitors to do the same, so it's better to prevent the browser from caching your script in the first place.

To do this, simply add ?nocache=1 at the end of layout.js and style.css and increase the number every time you make a change.

<link href="./style.css?nocache=123" rel="stylesheet" />
<script src="./layout.js?nocache=123"></script>

Credits

This generator was inspired by my own never-completed tumblr theme generator (rest in peace), as well as Sadgrl's Layout Builder, which you've probably heard of!

The background images in the examples / random layouts are from sadgrl. The example content images are from picsum.photos.

Comments

Leave your questions, problems, suggestions, requests and thanks here!

To share very long code or error messages with me, please upload it to pastebin (or a similar site) and include the link. This is to make sure you don't hit the max character limit on comments.