List Component

List is a common component used in web pages. There are 2 common lists from W3C HTML: ordered list (ol) and unordered list (ul). Bissetii supports both list types seemlessly.

This component is available starting from v1.11.0.

Hugo

Hugo supports list seamlessly so no special development is required.

Go

Coming soon.

HTML

Bissetii supports List component seamlessly across multiple output formats. Additionally, starting from version v1.13.0, the use of CSS variable is vital for its upgrade from v1.12.5.

Bissetii HTML codes for this component are the same for Vanilla HTML5 and AMPHTML.

Ordered List

Bissetii supports ordered list (usually numeric) using the following HTML pattern:

<ol>
	<li>
		...
	</li>
	<li>
		...
	</li>
	...
</ol>

Here is an example:

Unordered List

Bissetii supports unordered list (usually disc bullet) using the following HTML pattern:

<ul>
	<li>
		...
	</li>
	<li>
		...
	</li>
	...
</ul>

Here is an example:

CSS

Bissetii provided a list of CSS variables dedicated for list styling alteration without needing to recompile Sass. These variables are best applied directly to the List HTML tags. Example:

<ul style="--list-position: fixed; --li-print-break-inside: initial;">
	<li>
		...
	</li>
	<li>
		...
	</li>
	...
</ul>

--list-position

Set the list layout position. The acceptable value shall be compatible with position: CSS field. The default value is relative.

--list-padding-left

Set the list distance from the left using padding. The acceptable value shall be compatible with padding-left: CSS field. The default is 2.5rem.

--list-margin

Set the list distance using margin. The acceptable value shall be compatible with margin: CSS field. The default is 1rem 1rem 1rem 3rem.

--list-style-type

Set the list icon type. The acceptable value shall be compatible with list-style-type: CSS field. The default are:

1. auto as default.
2. decimal for ordered list (<ol>)
3. disc for unordered list (<ul>)

--list-style-position

Set the list style position. The acceptable value shall be compatible with list-style-position: CSS field. The default is outside.

--list-style-image

Set the list style image. The acceptable value shall be compatible with list-style-image: CSS field. The default is none.

--li-print-break-inside

Set the print behavior for breaking the content within the list item <li>. The acceptable value shall be compatible with break-inside: CSS field. The default is avoid.

Javascript

This component does not rely on any Javascript.

Sass

Depending on release version, the Sass files work differently. Bissetii does not package Sass codes explictly so please view them via the git repository.

v1.13.0 and Above

Bissetii uses Dart Sass to compile the styling Sass codes into CSS file. This component’s Sass codes are available at the following location:

pkg/components/internal/list

v1.12.5 and Before

assets/css/bissetii/modules/core/_List.scss

Researches

Here are the researches done to ensure List component meets the necessary quality assurances:

SCHEDULED COMING SOON

Epilogue

That’s all about List component in Bissetii. If you need more feature or need to report a bug, please feel free to file an issue at our Issue Section.