Foundation CSS Prototyping Utilities List Styling

Last Updated : 27 Apr, 2022

A Foundation is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. It’s more complex, versatile, and configurable. It also comes with a command-line interface, making it simple to use with module bundlers. Email framework provides you with responsive HTML emails, which can be read on any device. Foundation for Apps allows you to build fully responsive web applications.

In this article, we will learn about foundation CSS prototyping utility list styling.

What are Prototyping utilities?

Quickly prototype layouts and UI with Foundation’s Prototyping Utilities. These optional classes and mixins are great for quickly turning sketches and mockups into coded prototypes.

What is a list styling utility?

This utility helps to provide some styling to the lists.

This supports two types of lists.

Ordered List: An ordered list defines a list of items in which the order of the items are matters. An ordered list is also called a number list. The ordering is given by a numbering scheme, using arabic numbers, letters, roman numerals.

Ordered List classes:

no-bullet: It is used to set a no-bullet list which is by default enabled.
list-decimal: It is used to set a list with decimal numbers i.e 1,2,3
list-lower-alpha: It is used to set a list with a,b,c,d etc.
list-lower-latin: It is used to set a list with a,b,c,d etc.
list-lower-roman: It is used to set a list with i, ii, iii, iv, etc.
list-upper-alpha: It is used to set a list with A, B, C, D, etc.
list-upper-latin: It is used to set a list with A, B, C, D, etc.
list-upper-roman: It is used to set a list with I, II , III, IV, etc.

Syntax:

<ol class="no-bullet">...</ol>

Note: In the above syntax replace the class name as per the need.

Unordered List: An unordered list defines a list of items in which the order of the items does not exist. It is also known as a bulleted list. In an unordered list, each element in the list is defined using the <li> tag.

Unordered List classes:

no-bullet: It is used to set a no-bullet list which is by default enabled.
list-disc: It is used to set a filled circle for the list marker.
list-circle: It is used to set a circle for the list marker.
list-square: It is used to set a square for the list marker.

Syntax:

<ul class="list-disc">...</ul>

Enabling Font-Styling Utility:

Syntax:

@include foundation-prototype-list-style-type;

Example 1: In this example; we will learn to use different classes of an ordered list.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Foundation Template</title>
     <meta name="viewport" content=
          "width = device-width, initial-scale = 1">
    
     <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
     <link rel="stylesheet"  href=
 "https://get.foundation/sites/docs/assets/css/docs.css">     
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Ordered Lists</h3>
    <h5 style="color:red">No Bullet</h5>
    <ol class="no-bullet">
        <li>Apple</li>
        <li>Orange</li>
        <li>Guava</li>
    </ol>
    <h5 style="color:red">List-Decimal</h5>
    <ol class="list-decimal">
        <li>Banana</li>
        <li>Pineapple</li>
        <li>Cherry</li>
    </ol>
    <h5 style="color:red">List-Lower-Alpha</h5>
    <ol class="list-lower-alpha">
        <li>Strawberry</li>
        <li>Grapes</li>
        <li>Melon</li>
    </ol>
    <h5 style="color:red">List-Lower-Latin</h5>
    <ol class="list-lower-latin">
        <li>Water-melon</li>
        <li>Litchi</li>
        <li>Kiwi</li>
    </ol>
    <h5 style="color:red">List-Lower-Roman</h5>
    <ol class="list-lower-roman">
        <li>Dragon-Fruit</li>
        <li>Mango</li>
        <li>Apricots</li>
    </ol>
    <h5 style="color:red">List-Upper-Alpha</h5>
    <ol class="list-upper-alpha">
        <li>Avacadoes</li>
        <li>Lemon</li>
        <li>Pear</li>
 
    </ol>
    <h5 style="color:red">List-Upper-Latin</h5>
    <ol class="list-upper-latin">
        <li>Mandarins</li>
        <li>Dates</li>
        <li>Raspberry</li>
    </ol>
    <h5 style="color:red">List-Upper-Roman</h5>
    <ol class="list-upper-roman">
        <li>Gooseberry</li>
        <li>Bore</li>
        <li>Peaches</li>
    </ol>
</body>
</html>

Output:

Example 2: In this example; we will learn to use different classes of an unordered list.

HTML

<!DOCTYPE html>
<html>
 
<head>
     <title>Foundation Template</title>
     <meta name="viewport" content=
         "width = device-width, initial-scale = 1">
    
     <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
     <link rel="stylesheet"  href=
"https://get.foundation/sites/docs/assets/css/docs.css">  
 
</head>
 
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>UnOrdered Lists</h3>
    <h5 style="color:red">No Bullet</h5>
    <ul class="no-bullet">
 
        <li>Apple</li>
        <li>Orange</li>
        <li>Guava</li>
    </ul>
    <h5 style="color:red">List-Disc</h5>
    <ul class="list-disc">
 
        <li>Banana</li>
        <li>Pineapple</li>
        <li>Cherry</li>
    </ul>
    <h5 style="color:red">List-Circle</h5>
    <ul class="list-circle">
 
        <li>Strawberry</li>
        <li>Grapes</li>
        <li>Melon</li>
    </ul>     
    <h5 style="color:red">List-Square</h5>
    <ul class="list-square">
        <li>Water-melon</li>
        <li>Litchi</li>
        <li>Kiwi</li>
    </ul>
</body>
</html>