Hugo Classless is a minimal Hugo theme that generates pure semantic HTML and lets you style your site by plugging in any classless CSS framework such as Pico.css, Water.css, or Simple.css.
What is Hugo Classless?
Hugo Classless is a free, MIT-licensed Hugo theme by mozanunal that outputs clean, semantically structured HTML without any preset CSS classes. It takes Hugo site content written in Markdown as input and produces a static website whose appearance is controlled entirely by a classless stylesheet you choose. The theme runs on the Hugo static site generator, with all settings configured through the site's hugo.yml file.
Key Features
- Plug and Play Styling — Works out of the box with any classless CSS framework because it emits standard semantic tags like header, main, article, nav, and time.
- Dark, Light, and System Toggle — A built-in navbar toggle switches between forced light, forced dark, and automatic system preference; each theme can provide an optional separate dark stylesheet.
- Live Theme-Switcher — Enables a dropdown on your site that rotates between different classless frameworks on the fly, perfect for demonstrating how the same HTML changes appearance.
- Fully Configurable via hugo.yml — The navigation menu, theme list, dark mode, and author/description metadata are all set from one configuration file.
- Minimal and Fast — Ships with no bloated JavaScript or complex dependencies, just the HTML, CSS, and a small toggle script.
- Built-in Math Typesetting — Supports KaTeX for mathematical formulas, toggled per page with
math: truein front matter. - SEO Friendly — Uses semantic tags and proper metadata to help search engines index content correctly.
Who is it for?
- Bloggers and writers who want a lightweight Hugo blog without wrestling with complex CSS can publish Markdown posts and pick a stylesheet.
- Frontend developers experimenting with classless CSS frameworks like Pico.css or Water.css can use this theme as a clean test harness.
- Minimalists who value semantic HTML and instant theming can build personal sites or documentation pages with zero design overhead.
What can you do with Hugo Classless?
- Start a personal blog — Create new posts with
hugo new posts/my-first-post.md, setdraft: false, and the theme renders semantic pages you can style with any classless framework. - Prototype with different frameworks — Use the live theme-switcher to compare Pico.css, Simple.css, Sakura.css, and others on the same content.
- Publish math-heavy documentation — Enable KaTeX in
hugo.ymland write inline math with\( ... \)and block math with\[ ... \]in your Markdown.
How does Hugo Classless work?
Install it as a git submodule by running git submodule add https://github.com/mozanunal/hugo-classless.git themes/hugo-classless, then set theme: 'hugo-classless' in your hugo.yml. For production you point themeBase, themeLight, and themeDark to CSS files inside assets/, or you define a list of theme URLs in the themes parameter to enable the live switcher.
Pricing
The theme is free and open source under the MIT License, with no paid tiers or premium features.
FAQ
Is Hugo Classless free?
Yes, Hugo Classless is free and released under the MIT License. You can use it for personal and commercial projects, modify it, and redistribute it without paying licensing fees.
What classless CSS frameworks work with this theme?
Any classless CSS framework works because the theme outputs no preset classes. The exampleSite includes pre-configured entries for Pico.css, Water.css, Simple.css, Sakura.css, Almond.css, New.css, Missing.css, and others, which you can copy into your own hugo.yml.
How do I install Hugo Classless?
You can add it as a git submodule from the GitHub repository or download the latest release ZIP and extract it into the themes/hugo-classless directory. After either method, set theme: 'hugo-classless' in your site's hugo.yml file.
Does Hugo Classless support dark mode?
Yes, the theme includes a three-state toggle for light, dark, and system preference. To enable true dark mode, provide a separate dark stylesheet via the themeDark parameter in production mode or the dark field in each theme entry in demo mode.
Can I use math formulas with this theme?
Yes, if you enable markup.katex.enabled: true in your hugo.yml and set math: true in a page's front matter, the theme renders KaTeX formulas. Use \( ... \) for inline math and \[ ... \] for block math.
