Blaze UI Pillar Boxes

Last Updated : 09 May, 2022

Blaze UI is a CSS open-source lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive.

Blaze UI Pillar Boxes is used to create cells with equals padding in both left and right direction. The cells are symmetric on the left and right looking like pillars. We can use them for displaying items in a grid or flex them in a grid or inline.

Blaze UI Pillar Boxes Classes: The following are the different classes according to their padding in descending order.

u-pillar-box-super: It has the largest padding.
u-pillar-box-xlarge: It has lesser padding than super.
u-pillar-box-large: It has large padding.
u-pillar-box-medium: It has medium padding.
u-pillar-box-small: It has smaller padding than medium.
u-pillar-box-xsmall: It has greater padding than tiny.
u-pillar-box-tiny: It has very less padding.
u-pillar-box-none: It has no padding.

Syntax: Apply the classes to any element like container as follows:

<div class="u-pillar-box-super">....</div>

Example 1: In the following example, we have three items with a pillar box padding applied using jQuery and then we modify them using the buttons provided.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Blaze UI Pillar Boxes</strong>
    </center>
 
    <div class="u-pillar-box-super"></div>
    <div style="border-width:1px; 
                border-color:black; border-style:solid;">
        <div style="display: flex;">
            <div class="item" style="border-width:1px; 
                    border-color:green; border-style:solid;">
                Car
            </div>
            <div class="item" style="border-width:1px; 
                    border-color:green; border-style:solid;">
                Chair
            </div>
            <div class="item" style="border-width:1px; 
                    border-color:green; border-style:solid;">
                Ludo
            </div>
        </div>
    </div>
    <center style="padding:4px;">
        <button class="c-button c-button--success 
            u-small" onclick="toggleStyle(0)">
            Super
        </button>
        <button class="c-button c-button--success 
            u-small" onclick="toggleStyle(1)">
            Xlarge
        </button>
        <button class="c-button c-button--success 
            u-small" onclick="toggleStyle(2)">
            Large
        </button>
        <button class="c-button c-button--success 
            u-small" onclick="toggleStyle(3)">
            Medium
        </button>
        <button class="c-button c-button--success 
            u-small" onclick="toggleStyle(4)">
            Small
        </button>
        <button class="c-button c-button--success 
            u-small" onclick="toggleStyle(5)">
            Xsmall
        </button>
        <button class="c-button c-button--success 
            u-small" onclick="toggleStyle(6)">
            Tiny
        </button>
        <button class="c-button c-button--success 
            u-small" onclick="toggleStyle(7)">
            None
        </button>
    </center>
     
    <script>
        const pillarStyles = [
            'u-pillar-box-super',
            'u-pillar-box-xlarge',
            'u-pillar-box-large',
            'u-pillar-box-medium',
            'u-pillar-box-small',
            'u-pillar-box-xsmall',
            'u-pillar-box-tiny',
            'u-pillar-box-none',
        ]
        let current = pillarStyles[0]
        $('.item').addClass(current)
        function toggleStyle(index) {
            $('.item').removeClass(current)
            current = pillarStyles[index]
            $('.item').addClass(current)
        }
    </script>
</body>
 
</html>

Output:

Example 2: The following code demonstrates Blaze UI super pillar boxes with some details in them.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" />
    <script type="module" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.esm.js">
    </script>
    <script nomodule="" src=
"https://unpkg.com/@blaze/atoms@x.x.x/dist/blaze-atoms/blaze-atoms.js">
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">
    </script>
 
    <style>
        .card {
            background-color: lightgreen;
            margin: 8px;
            border-radius: 4px;
        }
 
        .card h3 {
            color: rgb(12, 58, 22);
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Blaze UI Pillar Boxes</strong>
    </center>
    <center class="u-display-flex">
        <div class="u-pillar-box-super card">
            <h3>Data Structures</h3>
             
<p>
                A data structure is a particular way 
                of organizing data in a computer
                so that it can be used effectively.
            </p>
 
        </div>
        <div class="u-pillar-box-super card">
            <h3>Algorithms</h3>
             
<p>
                an algorithm is a finite sequence 
                of well-defined instructions,
                typically used to solve a class of 
                specific problems or to perform a
                computation.
            </p>
 
        </div>
        <div class="u-pillar-box-super card">
            <h3>Machine Learning</h3>
             
<p>
                Machine Learning is the field of 
                study that gives computers the
                capability to learn without being 
                explicitly programmed.
            </p>
 
        </div>
    </center>
</body>
 
</html>