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
- 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"
/>
- 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:
- Use the HTML5 doctype:
<!doctype html>
; - 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.