bitandblack-rows
Version:
A small and simple CSS gutter to create rows and cells using the flexbox model.
161 lines (159 loc) • 6.08 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rows / Spaces</title>
<link href="build/example.css" rel="stylesheet">
<style>
.row {
width: 100%;
margin-bottom: 2em;
}
.item {
border: 1px solid #aaa;
margin: 1em;
display: inline-block;
vertical-align: top;
padding: 1em;
}
.container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
</style>
</head>
<body>
<section class="container">
<h1>Spaces</h1>
<p>Here you find an example for the space classes.</p>
</section>
<section class="container">
<h2>Margins</h2>
<div class="row">
<div class="item">
<div class="mt-1">Margin top 1 rem</div>
</div>
<div class="item">
<div class="mt-2">Margin top 2 rem</div>
</div>
<div class="item">
<div class="mt-3">Margin top 3 rem</div>
</div>
<div class="item">
<div class="mt-4">Margin top 4 rem</div>
</div>
<div class="item">
<div class="mt-5">Margin top 5 rem</div>
</div>
</div>
<div class="row">
<div class="item">
<div class="mb-1">Margin bottom 1 rem</div>
</div>
<div class="item">
<div class="mb-2">Margin bottom 2 rem</div>
</div>
<div class="item">
<div class="mb-3">Margin bottom 3 rem</div>
</div>
<div class="item">
<div class="mb-4">Margin bottom 4 rem</div>
</div>
<div class="item">
<div class="mb-5">Margin bottom 5 rem</div>
</div>
</div>
<div class="row">
<div class="item">
<div class="ml-1">Margin left 1 rem</div>
</div>
<div class="item">
<div class="ml-2">Margin left 2 rem</div>
</div>
<div class="item">
<div class="ml-3">Margin left 3 rem</div>
</div>
<div class="item">
<div class="ml-4">Margin left 4 rem</div>
</div>
<div class="item">
<div class="ml-5">Margin left 5 rem</div>
</div>
</div>
<div class="row">
<div class="item">
<div class="mr-1">Margin right 1 rem</div>
</div>
<div class="item">
<div class="mr-2">Margin right 2 rem</div>
</div>
<div class="item">
<div class="mr-3">Margin right 3 rem</div>
</div>
<div class="item">
<div class="mr-4">Margin right 4 rem</div>
</div>
<div class="item">
<div class="mr-5">Margin right 5 rem</div>
</div>
</div>
<div class="row">
<div class="item">
<div class="mx-1">Margin left and right 1 rem</div>
</div>
<div class="item">
<div class="mx-2">Margin left and right 2 rem</div>
</div>
<div class="item">
<div class="mx-3">Margin left and right 3 rem</div>
</div>
<div class="item">
<div class="mx-4">Margin left and right 4 rem</div>
</div>
<div class="item">
<div class="mx-5">Margin left and right 5 rem</div>
</div>
</div>
<div class="row">
<div class="item">
<div class="my-1">Margin top and bottom 1 rem</div>
</div>
<div class="item">
<div class="my-2">Margin top and bottom 2 rem</div>
</div>
<div class="item">
<div class="my-3">Margin top and bottom 3 rem</div>
</div>
<div class="item">
<div class="my-4">Margin top and bottom 4 rem</div>
</div>
<div class="item">
<div class="my-5">Margin top and bottom 5 rem</div>
</div>
</div>
<div class="row">
<div class="item">
<div class="m-1">Margin 1 rem</div>
</div>
<div class="item">
<div class="m-2">Margin 2 rem</div>
</div>
<div class="item">
<div class="m-3">Margin 3 rem</div>
</div>
<div class="item">
<div class="m-4">Margin 4 rem</div>
</div>
<div class="item">
<div class="m-5">Margin 5 rem</div>
</div>
</div>
<p>The same goes for paddings.</p>
</section>
<footer class="container">
© Bit&Black · <a href="https://www.bitandblack.com" target="_blank">www.bitandblack.com</a>
</footer>
</body>
</html>