Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fylgja/fylgja

The modular highly customisable CSS framework. Powered by CSS Components, Utilities and Props for building your Web UI.
https://github.com/fylgja/fylgja

css css-colors css-components css-custom-media-queries css-custom-properties css-easing-functions css-framework css-library css-utilities css-variables fylgja postcss scss

Last synced: 11 days ago
JSON representation

The modular highly customisable CSS framework. Powered by CSS Components, Utilities and Props for building your Web UI.

Host: GitHub
URL: https://github.com/fylgja/fylgja
Owner: fylgja
License: mit
Created: 2016-05-24T14:18:06.000Z (over 8 years ago)
Default Branch: main
Last Pushed: 2024-10-25T16:22:30.000Z (18 days ago)
Last Synced: 2024-10-27T15:05:09.955Z (16 days ago)
Topics: css, css-colors, css-components, css-custom-media-queries, css-custom-properties, css-easing-functions, css-framework, css-library, css-utilities, css-variables, fylgja, postcss, scss
Language: SCSS
Homepage: https://fylgja.dev
Size: 2.07 MB
Stars: 92
Watchers: 5
Forks: 1
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

README

        




  

    

  



[![NPM version](https://img.shields.io/npm/v/fylgja?logo=npm&style=flat-square)](https://www.npmjs.com/package/fylgja)

[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/fylgja/fylgja/test.yml?branch=main&color=%2343a047&style=flat-square)](https://github.com/fylgja/fylgja/actions)

[![License](https://img.shields.io/github/license/fylgja/fylgja?color=%23234&style=flat-square)](/LICENSE)



Fylgja is a component-based CSS framework that allows you to pick and choose the components you need. Each component is built as a foundation for a specific component, so you can style it to your own look without having to build the base styles from scratch every time.

Fylgja is powered by SCSS, but can also be used with PostCSS or as plain CSS. This makes it easy to include Fylgja in your projects, regardless of your preferred setup.

## Learn more

* [Website](https://fylgja.dev/)

* [Installation](https://fylgja.dev/getting-started/)

* [Guides/Docs](https://fylgja.dev/guides/)

* [Features](https://fylgja.dev/features/)

  * [Accessibility](https://fylgja.dev/features/accessibility/)

  * [Darkmode](https://fylgja.dev/features/darkmode/)

  * [Design Tokens](https://fylgja.dev/features/design-tokens/)

  * [Native Elements (a.k.a. classless)](https://fylgja.dev/features/native-styles/)

  * [RTL (Right to Left)](https://fylgja.dev/features/rtl/)

* [Support](https://fylgja.dev/support/)

* [Testing/Playground](https://stackblitz.com/edit/fylgja-playground)

* [Documentation Github Repo](https://github.com/fylgja/site)

## Checkout all Fylgja CSS Components

[On Fylgja.dev](https://fylgja.dev/components/)

Or on npmjs.com, using on of the links below:

[Aria Only](https://www.npmjs.com/package/@fylgja/aria-only) -

[Aspect Ratio](https://www.npmjs.com/package/@fylgja/aspect-ratio) -

[Auto Grid](https://www.npmjs.com/package/@fylgja/auto-grid) -

[Avatar](https://www.npmjs.com/package/@fylgja/avatar) -

[Badge](https://www.npmjs.com/package/@fylgja/badge) -

[Base](https://www.npmjs.com/package/@fylgja/base) -

[Borders](https://www.npmjs.com/package/@fylgja/borders) -

[Breadcrumbs](https://www.npmjs.com/package/@fylgja/breadcrumbs) -

[Button](https://www.npmjs.com/package/@fylgja/button) -

[Card](https://www.npmjs.com/package/@fylgja/card) -

[Code](https://www.npmjs.com/package/@fylgja/code) -

[Colors](https://www.npmjs.com/package/@fylgja/colors) -

[Container](https://www.npmjs.com/package/@fylgja/container) -

[Control](https://www.npmjs.com/package/@fylgja/control) -

[Details](https://www.npmjs.com/package/@fylgja/details) -

[Dialog](https://www.npmjs.com/package/@fylgja/dialog) -

[Easing](https://www.npmjs.com/package/@fylgja/easing) -

[Fonts](https://www.npmjs.com/package/@fylgja/fonts) -

[Form](https://www.npmjs.com/package/@fylgja/form) -

[Gradient](https://www.npmjs.com/package/@fylgja/gradient) -

[Hashlink](https://www.npmjs.com/package/@fylgja/hashlink) -

[Input Group](https://www.npmjs.com/package/@fylgja/input-group) -

[List](https://www.npmjs.com/package/@fylgja/list) -

[Marquee](https://www.npmjs.com/package/@fylgja/marquee) -

[Menu](https://www.npmjs.com/package/@fylgja/menu) -

[Mq](https://www.npmjs.com/package/@fylgja/mq) -

[Pagination](https://www.npmjs.com/package/@fylgja/pagination) -

[Print](https://www.npmjs.com/package/@fylgja/print) -

[Progress](https://www.npmjs.com/package/@fylgja/progress) -

[Range](https://www.npmjs.com/package/@fylgja/range) -

[Scroll Slider](https://www.npmjs.com/package/@fylja/scroll-slider/) -

[Scrollbar](https://www.npmjs.com/package/@fylgja/scrollbar) -

[Section](https://www.npmjs.com/package/@fylgja/section) -

[Shadow](https://www.npmjs.com/package/@fylgja/shadow) -

[Sizes](https://www.npmjs.com/package/@fylgja/sizes) -

[Stretched Link](https://www.npmjs.com/package/@fylja/stretched-link/) -

[Table](https://www.npmjs.com/package/@fylgja/table) -

[Tokens](https://www.npmjs.com/package/@fylgja/tokens) -

[Transform](https://www.npmjs.com/package/@fylgja/transform) -

[Transition](https://www.npmjs.com/package/@fylgja/transition) -

[Utilpack](https://www.npmjs.com/package/@fylgja/utilpack) -

[Z-layer](https://www.npmjs.com/package/@fylgja/z-layer)