https://github.com/fylgja/fylgja
The flexible and lightweight CSS library designed to streamline your web development.
https://github.com/fylgja/fylgja
css-base css-custom-properties css-library css-preflight css-utilites design-tokens fylgja utility-classes
Last synced: 8 months ago
JSON representation
The flexible and lightweight CSS library designed to streamline your web development.
- Host: GitHub
- URL: https://github.com/fylgja/fylgja
- Owner: fylgja
- License: mit
- Created: 2016-05-24T14:18:06.000Z (over 9 years ago)
- Default Branch: main
- Last Pushed: 2025-04-06T08:25:25.000Z (8 months ago)
- Last Synced: 2025-04-06T15:50:14.492Z (8 months ago)
- Topics: css-base, css-custom-properties, css-library, css-preflight, css-utilites, design-tokens, fylgja, utility-classes
- Language: CSS
- Homepage: https://fylgja.dev
- Size: 2.67 MB
- Stars: 99
- Watchers: 4
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
The flexible and lightweight CSS library designed to streamline your web development.
[](https://github.com/fylgja/fylgja/actions)
[](https://www.npmjs.com/package/fylgja)
[](/LICENSE)
**Fylgja CSS** empowers developers with a modular and customizable approach to styling web projects. Unlike monolithic frameworks, Fylgja provides focused solutions that enhance your workflow without adding unnecessary bloat.
## Why Choose Fylgja?
* **Modular Design:** Include only the components you need, keeping your CSS lean and efficient.
* **Lightweight Core:** Start with a minimal footprint, thanks to optimized components and a size-conscious philosophy.
* **Customization First:** Easily override styles with low specificity and leverage CSS variables for quick adjustments.
* **Seamless Integration:** Works harmoniously with existing tools like TailwindCSS or UnoCSS.
## Core Components
Fylgja offers a suite of modular components to suit your development needs:
* **Fylgja Base:**
* A robust foundation that goes beyond basic resets.
* Provides sensible default styles for common HTML elements using classless styling.
* Ensures cross-browser consistency without unnecessary overrides, leveraging `:where` for zero specificity.
* Example: A better browser default, form and button styles out of the box.
* **Fylgja Tokens (Props):**
* A centralized system for managing design values (colors, spacing, etc.).
* Available as SCSS or CSS variables for easy integration and customization.
* Use Fylgja's build tools to tailor tokens to your project's specific requirements.
* **Fylgja Utilities:**
* A collection of focused CSS utility classes.
* Designed to complement, not replace, utility-first frameworks.
* Seamlessly integrates with Fylgja Tokens, Open Props, or other variable-driven systems.
* **Fylgja Components:**
* Ready-to-use, single-class components for building complex UI elements.
* Accelerates development by providing pre-styled, reusable components.
## Modularity in Action
Fylgja's modularity allows you to pick and choose the components that fit your project's needs. For instance, you can use **Fylgja Base** solely for its form styles, without importing other elements. This granular control ensures optimal performance and minimal bloat.
## Performance Optimized
Fylgja prioritizes performance by delivering lightweight components. For example, the minified **Fylgja Base** Preflight is only 6kb, significantly smaller than many comparable libraries.
## Effortless Customization
Fylgja is designed for effortless customization. Low CSS specificity and the use of CSS variables enable you to easily adapt styles to your project's unique design. The `:where` selector within **Fylgja Base** ensures that your custom styles are never overridden unintentionally.
## Getting Started
Explore the Fylgja documentation at [fylgja.dev](https://fylgja.dev/) to learn how to integrate Fylgja into your workflow.
```bash
npm install fylgja
```
Start building your next project with the flexibility and efficiency of Fylgja.