Overview

You only need one CSS file to use Luxa.

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 this line to your HTML <head>:
<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);
  • Customizable: install the .scss files 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>
    <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 customization options.

Getting Help

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