Blaze UI Boxing
Last Updated :
13 Jun, 2022
Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and 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. Its project is available open-source so a large community maintains it.
Blaze UI Boxing provides a complete set of padded cells. We get padding as letterbox padding where the padding is on top and bottom, pillar boxes where the padding is on left and right equally and the last is window boxes where the padding is provided in all four directions.
- Blaze UI Letter Boxes: The padding is applied on top and bottom equally. The different sizes are as follows:
- Blaze UI Pillar Boxes: The padding is applied on right and left equally. The different sizes are as follows:
- Blaze UI Window Boxes: The padding is applied on all four directions equally. The different sizes are as follows:
Syntax: Use the following syntax to create boxing:
<div class="u-letter-box-none">
Data Structures
</div>
Example 1: In the following example, we have the letterbox boxing type.
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=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
</script>
</head>
<body>
<div class="o-container">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Boxing</strong>
<br />
<strong>Letter Boxing</strong>
<br />
<button onclick="changeSize('u-letter-box-none')">
None
</button>
<button onclick="changeSize('u-letter-box-tiny')">
Tiny
</button>
<button onclick="changeSize('u-letter-box-xsmall')">
XSmall
</button>
<button onclick="changeSize('u-letter-box-small')">
Small
</button>
<button onclick="changeSize('u-letter-box-medium')">
Medium
</button>
<button onclick="changeSize('u-letter-box-large')">
Large
</button>
<button onclick="changeSize('u-letter-box-xlarge')">
XLarge
</button>
<button onclick="changeSize('u-letter-box-super')">
Super
</button>
</center>
<br />
<div id="container"
style="background-color: lightgreen;
text-align: center;"
class="u-round-corners u-letter-box-none">
Data Structures
</div>
</div>
<script>
let currentSize = 'u-letter-box-none'
function changeSize(size) {
$('#container').toggleClass(currentSize)
currentSize = size
$('#container').toggleClass(currentSize)
}
</script>
</body>
</html>
|
Output:
Example 2: In the following example, we have the pillarbox boxing type.
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=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
</script>
</head>
<body>
<div class="o-container">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Boxing</strong>
<br />
<strong>Pillar Boxing</strong>
<br />
<button onclick="changeSize('u-pillar-box-none')">
None
</button>
<button onclick="changeSize('u-pillar-box-tiny')">
Tiny
</button>
<button onclick="changeSize('u-pillar-box-xsmall')">
XSmall
</button>
<button onclick="changeSize('u-pillar-box-small')">
Small
</button>
<button onclick="changeSize('u-pillar-box-medium')">
Medium
</button>
<button onclick="changeSize('u-pillar-box-large')">
Large
</button>
<button onclick="changeSize('u-pillar-box-xlarge')">
XLarge
</button>
<button onclick="changeSize('u-pillar-box-super')">
Super
</button>
</center>
<br />
<center class="u-display-flex">
<div id="container"
style="background-color: lightgreen;
margin-right: auto;
margin-left: auto;"
class="u-pillar-box-none">
Data Structures
</div>
</center>
</div>
<script>
let currentSize = 'u-pillar-box-none'
function changeSize(size) {
$('#container').toggleClass(currentSize)
currentSize = size
$('#container').toggleClass(currentSize)
}
</script>
</body>
</html>
|
Output:
Example 3: In the following example, we have window box boxing type.
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=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
</script>
</head>
<body>
<div class="o-container">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Boxing</strong>
<br />
<strong>Window Boxing</strong>
<br />
<button onclick="changeSize('u-window-box-none')">
None</button>
<button onclick="changeSize('u-window-box-tiny')">
Tiny</button>
<button onclick="changeSize('u-window-box-xsmall')">
XSmall</button>
<button onclick="changeSize('u-window-box-small')">
Small</button>
<button onclick="changeSize('u-window-box-medium')">
Medium</button>
<button onclick="changeSize('u-window-box-large')">
Large</button>
<button onclick="changeSize('u-window-box-xlarge')">
XLarge</button>
<button onclick="changeSize('u-window-box-super')">
Super</button>
</center>
<br />
<center class="u-display-flex">
<div id="container"
style="background-color: lightgreen;
margin-right: auto;
margin-left: auto;"
class="u-window-box-none">
Data Structures
</div>
</center>
</div>
<script>
let currentSize = 'u-window-box-none'
function changeSize(size) {
$('#container').toggleClass(currentSize)
currentSize = size
$('#container').toggleClass(currentSize)
}
</script>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/utils/boxing/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...