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 still quite new. There might be some bugs. Please tell me about any you see!
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
You can request features in the comment section below, don't be shy!
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:
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.
Show me how
Page file is in root folder (no subfolder):
<link href="./style.css" rel="stylesheet" />
<script src="./layout.js"></script>Page file is in 1 subfolder:
<link href="../style.css" rel="stylesheet" />
<script src="../layout.js"></script>Page file is in 2 subfolders:
<link href="../../style.css" rel="stylesheet" />
<script src="../../layout.js"></script>And so on.
CSS:
This goes into style.css.
I highly recommend using Autoprefixer on this code for better browser compatibility.
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:
Not clearing your cache might result in you not seeing the changes on your page!
Clear your site cache after making any changes!
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 own cache will make your website look good for you, but visitors who have visited your website before might have an old version of the CSS/JavaScript cached too, and you can't tell them to clear their cache. Therefore, it's better to prevent the browser from caching your script in the first place:
To do this, simply add ?nocache=1 to your js/css file paths 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.
I spent hours of my free time creating this tool for free. If you'd like to say thanks, please share this tutorial with others and/or buy me a coffee!
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.
Please empty your cache before asking questions. This will get rid of most problems.