Direct URL to font file (Only required for Preview; If you leave this blank you won't see your font in the preview.)
Colors
Website Background Color
Main Content Background Color
Sidebar Background Color
Border Color
Text Color
Sidebar Text Color
Link Color
Link Hover Color
Mobile Settings
To preview the mobile layout resize your browser to be <700px wide.
Mobile Layout
Left Sidebar on Mobile
Right Sidebar on Mobile
Keep in mind not to hide the sidebar which has your navigation, otherwise it is impossible to navigate your page on phones!!!
JavaScript Settings
This option will load your layout (header, footer, menu, etc.) automatically on each page. You won't have to update its code in every HTML file, only once in the JavaScript file. Only basic JavaScript knowledge required. More info here.
More JavaScript settings coming soon!
Generated Code
If you need help please read the "How to Use" section. Make sure to empty your browser's cache of your website after making any changes!
HTML: (index.html, about.html, ...)
I highly recommend using an Online HTML Formatter if your editor doesn't format your code by default.
Keep in mind that you will have to change the paths to the CSS (and JS) file if your html file is in a subfolder, e.g. href="./style.css" to href="../style.css"
CSS: (style.css)
I highly recommend using an Autoprefixer for this code for better browser compatibility.
JavaScript: (layout.js)
Edit your header/sidebar/footer etc in this file.
Use ${nesting} in the JavaScript file to output a relative path, e.g. <img src="${nesting}img/logo.png"> will output <img src="../img/logo.png"> if the current page is in a subfolder, etc.
Active menu links will be given the class active, so you can style them in the CSS, e.g. nav a.active { ... }
JavaScript
Your selected settings do not require any JavaScript code.
I highly recommend using the layout generator on a desktop device if you can. Scroll down for the mobile layout preview!
