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@1.0.9/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@1.0.9/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.