Modern websites look the same. Navigation bar at the top, a responsive sidebar and centered content on desktop. LazyCSS is one attempt to create the modern cookiecutter layout effortlessly.
Either use this in your blog or as a general extendable template.
- Download the lazy.css file from the repo. Drop these lines into your HTML file under
<head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="lazy.css"> And you're done.
This repository contains a simple demo site (screenshots below).
- Probably smaller than the CSS you're currently using (under 200 lines excluding comments)
- No need to minify
- Configurable with variables (fonts, colors easily changed)
- Responsive sidebar with
<aside>-element. - Responsive navbar (with logo placement) by just writing
<nav> <ul> <li>Logo</li> <li>Item 2</li> <li>Item 3</li> </ul> </nav> See LICENCE.
Before:
After:
Before:
After:
