Overview

Get started with Luxa CSS in minutes. You only need one CSS file to use Luxa—no build tools required, just add it to your HTML and start building.

On this page

Luxa CSS is a lightweight CSS library that provides pre-defined classes to style your HTML. It emphasizes minimalism, speed, and ease of maintenance.

Quick start

  1. Add one of these lines to your HTML <head>:
<!-- Expanded (7.23KB) -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/luxacss@latest/dist/expanded/luxa.css"
/>

<!-- Compressed (5.47KB) -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/luxacss@latest/dist/compressed/luxa.min.css"
/>
  1. Start using Luxa CSS classes in your HTML.

Usage options

  • Quick: use the pre-compiled .css file (as shown above);
  • Customisable: import individual CSS modules to tailor Luxa to your needs.

Requirements

Ensure your webpage is responsive:

  1. Use the HTML5 doctype: <!doctype html>;
  2. Include the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Example
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello Luxa!</title>
    <!-- Expanded (7.23KB) -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/luxacss@latest/dist/expanded/luxa.css"
    />
    <!-- Or use compressed (5.47KB) -->
    <!-- <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/luxacss@latest/dist/compressed/luxa.min.css"
    /> -->
  </head>
  <body>
    <main class="container-80">
      <section class="row">
        <h1>Hello World!</h1>
        <p>My first website with <strong>Luxa CSS</strong>!</p>
      </section>
    </main>
  </body>
</html>

This minimal setup gets you started with Luxa CSS. Explore our documentation for more advanced usage and customisation options.

Getting Help

Need help? Open an issue. I'll be happy to help. 🎈