@nitro-ui/utility-width
Version:
Utility Width component for Nitro UI.
193 lines (182 loc) • 12.3 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Utility Width - Nitro UI</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="../dist/css/width.min.css">
</head>
<body class="bg-light">
<header class="bg-white border-bottom">
<div class="container py-5">
<h2 class="font-weight-bold mb-3">Width</h2>
<div class="text-muted"></div>
</div>
</header>
<article>
<div class="container py-5">
<div class="row">
<div class="col-md-4">
<div class="text-muted">u-width-1</div>
</div>
<div class="col-md-8">
<div class="text-muted small">u-width-1</div>
<div class="u-width-1" style="background:#ECEEF3; margin-bottom:12px;">width = 100%</div>
</div>
</div>
<hr class="mt-4 mb-5">
<div class="row">
<div class="col-md-4">
<div class="text-muted">u-width-1/2</div>
</div>
<div class="col-md-8">
<div class="text-muted small">u-width-1/2</div>
<div class="u-width-1/2" style="background:#ECEEF3; margin-bottom:12px;">width = 50%</div>
</div>
</div>
<hr class="mt-4 mb-5">
<div class="row">
<div class="col-md-4">
<div class="text-muted">u-width-*/3</div>
</div>
<div class="col-md-8">
<div class="text-muted small">u-width-1/3</div>
<div class="u-width-1/3" style="background:#ECEEF3; margin-bottom:12px;">width = 33.333%</div>
<div class="text-muted small">u-width-2/3</div>
<div class="u-width-2/3" style="background:#ECEEF3; margin-bottom:12px;">width = 66.666%</div>
</div>
</div>
<hr class="mt-4 mb-5">
<div class="row">
<div class="col-md-4">
<div class="text-muted">u-width-*/4</div>
</div>
<div class="col-md-8">
<div class="text-muted small">u-width-1/4</div>
<div class="u-width-1/4" style="background:#ECEEF3; margin-bottom:12px;">width = 25%</div>
<div class="text-muted small">u-width-2/4</div>
<div class="u-width-2/4" style="background:#ECEEF3; margin-bottom:12px;">width = 50%</div>
<div class="text-muted small">u-width-3/4</div>
<div class="u-width-3/4" style="background:#ECEEF3; margin-bottom:12px;">width = 75%</div>
</div>
</div>
<hr class="mt-4 mb-5">
<div class="row">
<div class="col-md-4">
<div class="text-muted">u-width-*/5</div>
</div>
<div class="col-md-8">
<div class="text-muted small">u-width-1/5</div>
<div class="u-width-1/5" style="background:#ECEEF3; margin-bottom:12px;">width = 20%</div>
<div class="text-muted small">u-width-2/5</div>
<div class="u-width-2/5" style="background:#ECEEF3; margin-bottom:12px;">width = 40%</div>
<div class="text-muted small">u-width-3/5</div>
<div class="u-width-3/5" style="background:#ECEEF3; margin-bottom:12px;">width = 60%</div>
<div class="text-muted small">u-width-4/5</div>
<div class="u-width-4/5" style="background:#ECEEF3; margin-bottom:12px;">width = 80%</div>
</div>
</div>
<hr class="mt-4 mb-5">
<div class="row">
<div class="col-md-4">
<div class="text-muted">u-width-*/6</div>
</div>
<div class="col-md-8">
<div class="text-muted small">u-width-1/6</div>
<div class="u-width-1/6" style="background:#ECEEF3; margin-bottom:12px;">width = 16.666%</div>
<div class="text-muted small">u-width-2/6</div>
<div class="u-width-2/6" style="background:#ECEEF3; margin-bottom:12px;">width = 33.333%</div>
<div class="text-muted small">u-width-3/6</div>
<div class="u-width-3/6" style="background:#ECEEF3; margin-bottom:12px;">width = 50%</div>
<div class="text-muted small">u-width-4/6</div>
<div class="u-width-4/6" style="background:#ECEEF3; margin-bottom:12px;">width = 66.666%</div>
<div class="text-muted small">u-width-5/6</div>
<div class="u-width-5/6" style="background:#ECEEF3; margin-bottom:12px;">width = 83.333%</div>
</div>
</div>
<hr class="mt-4 mb-5">
<div class="row">
<div class="col-md-4">
<div class="text-muted">u-width-*/8</div>
</div>
<div class="col-md-8">
<div class="text-muted small">u-width-1/8</div>
<div class="u-width-1/8" style="background:#ECEEF3; margin-bottom:12px;">width = 12.5%</div>
<div class="text-muted small">u-width-2/8</div>
<div class="u-width-2/8" style="background:#ECEEF3; margin-bottom:12px;">width = 25%</div>
<div class="text-muted small">u-width-3/8</div>
<div class="u-width-3/8" style="background:#ECEEF3; margin-bottom:12px;">width = 37.5%</div>
<div class="text-muted small">u-width-4/8</div>
<div class="u-width-4/8" style="background:#ECEEF3; margin-bottom:12px;">width = 50%</div>
<div class="text-muted small">u-width-5/8</div>
<div class="u-width-5/8" style="background:#ECEEF3; margin-bottom:12px;">width = 62.5%</div>
<div class="text-muted small">u-width-6/8</div>
<div class="u-width-6/8" style="background:#ECEEF3; margin-bottom:12px;">width = 75%</div>
<div class="text-muted small">u-width-7/8</div>
<div class="u-width-7/8" style="background:#ECEEF3; margin-bottom:12px;">width = 87.5%</div>
</div>
</div>
<hr class="mt-4 mb-5">
<div class="row">
<div class="col-md-4">
<div class="text-muted">u-width-*/10</div>
</div>
<div class="col-md-8">
<div class="text-muted small">u-width-1/10</div>
<div class="u-width-1/10" style="background:#ECEEF3; margin-bottom:12px;">width = 10%</div>
<div class="text-muted small">u-width-2/10</div>
<div class="u-width-2/10" style="background:#ECEEF3; margin-bottom:12px;">width = 20%</div>
<div class="text-muted small">u-width-3/10</div>
<div class="u-width-3/10" style="background:#ECEEF3; margin-bottom:12px;">width = 30%</div>
<div class="text-muted small">u-width-4/10</div>
<div class="u-width-4/10" style="background:#ECEEF3; margin-bottom:12px;">width = 40%</div>
<div class="text-muted small">u-width-5/10</div>
<div class="u-width-5/10" style="background:#ECEEF3; margin-bottom:12px;">width = 50%</div>
<div class="text-muted small">u-width-6/10</div>
<div class="u-width-6/10" style="background:#ECEEF3; margin-bottom:12px;">width = 60%</div>
<div class="text-muted small">u-width-7/10</div>
<div class="u-width-7/10" style="background:#ECEEF3; margin-bottom:12px;">width = 70%</div>
<div class="text-muted small">u-width-8/10</div>
<div class="u-width-8/10" style="background:#ECEEF3; margin-bottom:12px;">width = 80%</div>
<div class="text-muted small">u-width-9/10</div>
<div class="u-width-9/10" style="background:#ECEEF3; margin-bottom:12px;">width = 90%</div>
</div>
</div>
<hr class="mt-4 mb-5">
<div class="row">
<div class="col-md-4">
<div class="text-muted">u-width-*/12</div>
</div>
<div class="col-md-8">
<div class="text-muted small">u-width-1/12</div>
<div class="u-width-1/12" style="background:#ECEEF3; margin-bottom:12px;">width = 8.333%</div>
<div class="text-muted small">u-width-2/12</div>
<div class="u-width-2/12" style="background:#ECEEF3; margin-bottom:12px;">width = 16.666%</div>
<div class="text-muted small">u-width-3/12</div>
<div class="u-width-3/12" style="background:#ECEEF3; margin-bottom:12px;">width = 25%</div>
<div class="text-muted small">u-width-4/12</div>
<div class="u-width-4/12" style="background:#ECEEF3; margin-bottom:12px;">width = 33.333%</div>
<div class="text-muted small">u-width-5/12</div>
<div class="u-width-5/12" style="background:#ECEEF3; margin-bottom:12px;">width = 41.666%</div>
<div class="text-muted small">u-width-6/12</div>
<div class="u-width-6/12" style="background:#ECEEF3; margin-bottom:12px;">width = 50%</div>
<div class="text-muted small">u-width-7/12</div>
<div class="u-width-7/12" style="background:#ECEEF3; margin-bottom:12px;">width = 58.333%</div>
<div class="text-muted small">u-width-8/12</div>
<div class="u-width-8/12" style="background:#ECEEF3; margin-bottom:12px;">width = 66.666%</div>
<div class="text-muted small">u-width-9/12</div>
<div class="u-width-9/12" style="background:#ECEEF3; margin-bottom:12px;">width = 75%</div>
<div class="text-muted small">u-width-10/12</div>
<div class="u-width-10/12" style="background:#ECEEF3; margin-bottom:12px;">width = 83.333%</div>
<div class="text-muted small">u-width-11/12</div>
<div class="u-width-11/12" style="background:#ECEEF3; margin-bottom:12px;">width = 91.666%</div>
</div>
</div>
<hr class="mt-4 mb-5">
</div>
</article>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>