A lightweight, no-build CSS library for static sites and Astro.js. It focuses on providing a clean, modern base style for standard HTML elements using a semantic CSS variable theming system, without requiring any PostCSS processing or build steps.
Simply download lite.css and include it in the <head> of your HTML document:
<link rel="stylesheet" href="lite.css">Using Lite.css in Astro.js is straightforward since it requires no build configuration.
- Include the file: Place
lite.cssin yourpublicdirectory or import it directly. - Global Import: To apply it globally, import it in your main layout component (e.g.,
src/layouts/Layout.astro):
---
import '../styles/lite.css';
---
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<slot />
</body>
</html>You can customize the theme by overriding the CSS variables defined in :root.
In an Astro.js project, you can do this within a <style is:global> block in your layout, or in a standard HTML project by adding a <style> block or loading a separate CSS file after lite.css.
Example:
/* Customizing the theme */
:root {
--color-primary: #10b981; /* Change to emerald green */
--color-background: #fafafa;
--font-family-base: 'Inter', sans-serif;
--border-radius: 0.5rem;
}Lite.css automatically styles standard HTML elements, including:
- Typography:
h1toh6,p,a,blockquote,code,pre - Lists:
ul,ol - Buttons:
button,.button(with support for disabled states) - Forms:
fieldset,legend,label,input,textarea,select - Tables:
table,th,td
.container: Constrains the maximum width of the content and centers it horizontally.
This project is licensed under the Apache License, Version 2.0. See the LICENSE file for details.