Components

All Fylgja components and plugins in one swipe away

NativeElements

Fylgja Components that require no additional CSS classes to work

Base

Common defaults to make your body and typography look good and easy to change to your needs.

Form

The form component is super easy to use, it's a zero config module that styles all form elements directly. Allowing you to focus on the form itself.

Control

The control component styles the default `input[radio]` and `input[checkbox]`, allowing an easier control on the style of both these elements.

Dialog

The dialog combines 3 components in 1, it a modal by default, and with a small change it's a offcanvas, notification popup aka the snackbar.

Code

The Code component is a extension component on the base component.

Details

The details component enhances the default details behavior.

Progress

The progress component is used to show progress indication in a form or somethings else.

Table

TThe table component is super easy to use, since it is a zero config module that styles the table directly. Allowing you to focus on the table it self.

Offcanvas

The dialog combines 3 components in 1, it a modal by default, and with a small change it's a offcanvas, notification popup aka the snackbar.

Layouts

Fylgja Components that make it easier to apply layout styles

Auto Grid

A super small grid with auto flowing behavior, based on the container size. Using a similar method to container queries.

Aspect Ratio

The aspect ratio component is used to set videos to a certain responsive aspect ratio, but can also be used for images and other content.

Card

The card component is a wrapper component. It allows you to make visual sectioned content, that is not part of the main flow.

Container

The container component is wrapper component, to make all child elements fit better in the page.

Scroll-slider

This CSS slider component allows you to make sliders with ease, and has no requirements to any Javascript.

Section

The Section component is a wrapper component to show content in a sectioned area.

Typography

Fylgja Components that make it easier to apply typography styles

Base

Common defaults to make your body and typography look good and easy to change to your needs.

Code

The Code component is a extension component on the base component.

Details

The details component enhances the default details behavior.

List

The list component adds more control on how you can style lists. By adding a custom marker option with full flexibility to style and animate.

Table

TThe table component is super easy to use, since it is a zero config module that styles the table directly. Allowing you to focus on the table it self.

Forms

Fylgja Components that make it easier to apply form styles

Form

The form component is super easy to use, it's a zero config module that styles all form elements directly. Allowing you to focus on the form itself.

Control

The control component styles the default `input[radio]` and `input[checkbox]`, allowing an easier control on the style of both these elements.

Input-group

The input group extends upon the `@fylgja/form`. By providing a wrapper that allows for more complex form field styles.

Progress

The progress component is used to show progress indication in a form or somethings else.

Elements

Fylgja components that make it easier to apply element specific styles

Avatar

The avatar component allows you to make an avatar style with ease.

Badge

The badges component serves as a small blocks to indicate notifications, or to highlight an item.

Button

The Button component serves as an interactive element. To call your users to an action.

Utilities

Fylgja Utilities that make it easier to apply styles and spacing

Utilpack

Build and use your own CSS utility classes with Sass using the Fylgja utilpack.

Aria-only

The aria-only (a.k.a. sr-only) visually hides elements. But keeps it accessible to screen-readers and other aria tools.

Elevation

The Elevation component is a util package for shadows, where it offers shadows as CSS variables.

Gradient

Add gradient's with ease via the gradient utility class.

Hashlink

The Hashlink is a small utility component, which adds smooth scrolling to the page via CSS and a scroll offset to any element with a id.

Scrollbar

Customize or hide the scrollbar with ease.

Stretched-link

Make any component fully clickable via a nested link.

Transform

Add transforms with ease, with the power of CSS variables.

Transition

Add transitions with ease, with the power of CSS variables.

Theme

Helper component for adding theme specific variables to multiple components.

Mq

Helper component for adding media query specific variables to multiple components.

Plugins

Fylgja Plugins that improve on the core components or add extra functionally

Sass Extend

Adds more SCSS super power functions.

Stylelint Config

A sharable stylelint config object that enforces Fylgja's CSS rules.

Flex Grid

Create a complete grid using flexbox, and only set the columns you need.

Font Face

Add fonts with ease, via the font-face mixin