Fylgja component - 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.

Installation  # 

npm install @fylgja/list

Then include the component in to your code via;

@use "@fylgja/list";
// Or via PostCSS and other options as plain CSS
@import "@fylgja/list/list.css";

How to use  # 

Out of the box this will work by just adding the class .list-style to any ul or ol tag.

The .list-style will replace the default list style with a ::before with editable content inside.

This way you have the same list but now can edit the style of the marker.

Here is a sample with a custom check mark style.

<style>
.list-style.-checkmark {
--marker-icon: "✓";
--marker-gap: 1ch;
--marker-color: #4caf50;
}
</style>
<ul class="list-style -checkmark">..</ul>

Unset list style  # 

The list style also comes with a CSS variable class, none, this will unset the list style.

<ul class="list-style -none">..</ul>

Build new lists (SCSS only)  # 

The list component also comes with a build in mixin, that will create the marker style.

Call the mixin list-style() and pass the props as seen down here.

This allows creation of a custom lists in CSS, without writing any sub classes that are needed.

.list-style.-custom {
// Prop names with defaults
@include list-style(
$symbol, // list marker to use
$style: string, // list style to generate (string, image, counter)
$gap: false, // extra space after the list marker
$color: false,
$prefix: false, // only works for the counter style
$suffix: false // only works for the counter style
);
// Just an icon
@include list-style("✓");
// Icon with a custom gap
@include list-style("✓", $gap: 2ch);
// Icon as numbered list (<ol> style)
@include list-style(decimal, counter);
@include list-style(decimal, counter, $suffix: "."); // with suffix
// Icon as image, via background-image
@include list-style(url("data:image/svg+xml,..."), image);
}

Config  # 

As with almost all of our components, CSS variables can be configured to add your own look/style.

Want direct control on the base styles, here are the following SCSS variables can you modify.

$enable-list-style-none: true !default;

$list-marker-gap: 1ch !default;
$list-marker-icon: "•" !default;
$list-marker-color: null !default;

// Only for the image style
$list-marker-icon-width: 1em !default;
$list-marker-icon-height: 1.5em !default; // Same as line-height default

FAQ  # 

Do I still needs this with the pseudo :marker

No if you plan to just set an icon and the color,

then native solution via the :marker pseudo selector, is all you need.

But if you plan to do more like animation or need better browser support,

You should use this.

We are planing to update the logic for the list-style to the pseudo :marker,

when browser support is better and more stable.

Noticed a typo or is something unclear? Help us improve this page on GitHub.