tessl/npm-primeflex
PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
list-style.mddocs/
List Style Utilities
List style utilities control the appearance of list markers for ordered and unordered lists. These utilities provide control over bullet points, numbering, and marker removal.
Capabilities
List Style Types
Control the type of marker displayed for list items.
.list-none { list-style: none; }
.list-disc { list-style: disc; }
.list-decimal { list-style: decimal; }Usage Examples
Navigation Lists
<!-- Remove list markers for navigation -->
<ul class="list-none flex gap-3">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>Content Lists
<!-- Standard bulleted list -->
<ul class="list-disc pl-4">
<li>First item with bullet point</li>
<li>Second item with bullet point</li>
<li>Third item with bullet point</li>
</ul>
<!-- Numbered list -->
<ol class="list-decimal pl-4">
<li>First step in process</li>
<li>Second step in process</li>
<li>Third step in process</li>
</ol>Custom Styled Lists
<!-- List without default markers for custom styling -->
<ul class="list-none">
<li class="flex align-items-center gap-2 mb-2">
<i class="pi pi-check text-green-500"></i>
<span>Completed task</span>
</li>
<li class="flex align-items-center gap-2 mb-2">
<i class="pi pi-times text-red-500"></i>
<span>Incomplete task</span>
</li>
<li class="flex align-items-center gap-2 mb-2">
<i class="pi pi-clock text-yellow-500"></i>
<span>Pending task</span>
</li>
</ul>Nested Lists
<!-- Mixed list styles for hierarchy -->
<ul class="list-disc pl-4">
<li>Main category
<ul class="list-none pl-4 mt-2">
<li class="mb-1">• Subcategory item</li>
<li class="mb-1">• Another subcategory item</li>
</ul>
</li>
<li>Another main category
<ol class="list-decimal pl-4 mt-2">
<li>Numbered subcategory</li>
<li>Another numbered subcategory</li>
</ol>
</li>
</ul>Card List Layout
<!-- Card-style list without markers -->
<ul class="list-none grid gap-3">
<li class="p-3 border-1 border-round">
<h4 class="font-bold mb-2">Card Item 1</h4>
<p class="text-color-secondary">Description for the first item</p>
</li>
<li class="p-3 border-1 border-round">
<h4 class="font-bold mb-2">Card Item 2</h4>
<p class="text-color-secondary">Description for the second item</p>
</li>
</ul>Usage Guidelines
List None:
- Use for navigation menus and custom-styled lists
- Essential for flexbox and grid-based list layouts
- Removes default spacing and markers completely
List Disc:
- Standard bullet points for unordered lists
- Good for feature lists and general content
- Browser default for
<ul>elements
List Decimal:
- Numbered markers for ordered sequences
- Ideal for step-by-step instructions and procedures
- Browser default for
<ol>elements
Best Practices:
- Combine with padding utilities (
pl-4) to maintain proper indentation - Use
list-nonewith custom markers (icons, emojis) for enhanced designs - Consider accessibility when removing list semantics
Responsive Variants
All list style utilities support responsive variants:
sm:list-none- Remove list markers on small screens and upmd:list-disc- Apply disc markers on medium screens and uplg:list-decimal- Apply decimal markers on large screens and upxl:list-none- Remove markers on extra large screens and up
Install with Tessl CLI
npx tessl i tessl/npm-primeflex