LumoCSS | Lightweight CSS framework for semantic HTML

Layout

Page structure

Lumo page structure bases on semantic HTML website layout, which includes tags <header>, <nav>, <main>, <section>, <article>, and <footer>.

Example layout of page made with Lumo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lumo.CSS website</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/y4ch0/Lumo.CSS/1.0.1/dist/lumo.min.css">
    <script src="https://cdn.jsdelivr.net/gh/y4ch0/Lumo.CSS/1.0.1/dist/lumo.min.js"></script>
</head>
<body>
    <header class="sticky">
        <div class="container">
            <a aria-label="LumoCSS home" href="/Lumo.CSS">
                <img src="/Lumo.CSS/LumoCSS.svg" alt="LumoCSS logo" height="65" class="logo-dark">
                <img src="/Lumo.CSS/LumoCSS_dark.svg" alt="LumoCSS logo" height="65" class="logo-light">
            </a>
            <nav aria-label="Main navigation">
                <button type="button" role="menu" aria-controls="docs-navigation" aria-expanded="false"></button>
                <ul id="docs-navigation">
                    <button type="button" aria-label="close"></button>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
                <button id="theme-change"></button>
            </nav>
        </div>
    </header>
    <main>
        <div class="container">
            <section>
                <h1>Hello World!</h1>
                <button>Lumo.CSS button</button>
            </section>
        </div>
    </main>
    <footer>
        <div class="container">
            <p>Website footer</p>
        </div>
    </footer>
</body>
</html>