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 styles both
lists seemlessly.
The difference between the 2 list types are:
<ul>
is known for Unordered List which provides bullet points<ol>
is known for Ordered List which provides numbering points.
For list items, it is always <li>
for both types of list.
This component is available starting from v1.11.0
.
Sass Styling Parts
The Sass script that is responsible for styling list are:
assets/css/bissetii/modules/core/_List.sass
This is Bissetii core module so it is always included in the CSS compilation.
Javascript Parts
This component does not rely on any Javascript.
HTML Parts
Bissetii renders native list (unless otherwise specified like <nav>
list).
Ordered List
For ordered list, Bissetii recommends the following HTML syntax:
<ol>
<li>...</li>
<li>...</li>
<li>...</li>
</ol>
This will render like the following:
This is No "A" first item
This is No "C" second item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac posuere nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut magna blandit, fringilla mauris id, hendrerit magna. Suspendisse ullamcorper mi fermentum metus feugiat, nec posuere dolor ultricies. In nec orci aliquet, consequat lorem vel, condimentum elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus cursus bibendum nibh, eget maximus mi imperdiet sit amet. Quisque mollis tellus in ex porta, a accumsan orci porttitor. Sed finibus congue dignissim. Suspendisse cursus lorem ut augue sagittis varius. Ut maximus nibh vel dui maximus euismod. more...
Unordered List
For unordered list, Bissetii recommends the following HTML syntax:
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
This will render something like:
This is No "A" first item
This is No "C" second item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac posuere nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut magna blandit, fringilla mauris id, hendrerit magna. Suspendisse ullamcorper mi fermentum metus feugiat, nec posuere dolor ultricies. In nec orci aliquet, consequat lorem vel, condimentum elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus cursus bibendum nibh, eget maximus mi imperdiet sit amet. Quisque mollis tellus in ex porta, a accumsan orci porttitor. Sed finibus congue dignissim. Suspendisse cursus lorem ut augue sagittis varius. Ut maximus nibh vel dui maximus euismod. more...