bitandblack-rows
Version:
A small and simple CSS gutter to create rows and cells using the flexbox model.
280 lines (276 loc) • 11.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rows / Layout</title>
<link href="build/example.css" rel="stylesheet">
<style>
.row {
border: 0 solid #aaa;
margin-bottom: 1em;
}
.row__cell {
margin-bottom: 1em;
}
.row__cell > div {
background-color: #ddd;
padding: 10px 0;
text-align: center;
}
.row__cell .row__cell > div {
background-color: #aaa;
}
.container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
</style>
</head>
<body>
<section class="container">
<h1>Layout</h1>
<p>Here you find an example for the layout classes.</p>
</section>
<section class="container">
<h2>Cells in a grid of 12</h2>
<div class="row">
<div class="row__cell row__cell--cell12">
<div>12 rows cell</div>
</div>
</div>
<div class="row">
<div class="row__cell row__cell--cell6">
<div>6 rows cell</div>
</div>
<div class="row__cell row__cell--cell6">
<div>6 rows cell</div>
</div>
</div>
<div class="row">
<div class="row__cell row__cell--cell4">
<div>4 rows cell</div>
</div>
<div class="row__cell row__cell--cell4">
<div>4 rows cell</div>
</div>
<div class="row__cell row__cell--cell4">
<div>4 rows cell</div>
</div>
</div>
<div class="row">
<div class="row__cell row__cell--cell3">
<div>3 rows cell</div>
</div>
<div class="row__cell row__cell--cell3">
<div>3 rows cell</div>
</div>
<div class="row__cell row__cell--cell3">
<div>3 rows cell</div>
</div>
<div class="row__cell row__cell--cell3">
<div>3 rows cell</div>
</div>
</div>
<div class="row">
<div class="row__cell row__cell--cell2">
<div>2 rows cell</div>
</div>
<div class="row__cell row__cell--cell2">
<div>2 rows cell</div>
</div>
<div class="row__cell row__cell--cell2">
<div>2 rows cell</div>
</div>
<div class="row__cell row__cell--cell2">
<div>2 rows cell</div>
</div>
<div class="row__cell row__cell--cell2">
<div>2 rows cell</div>
</div>
<div class="row__cell row__cell--cell2">
<div>2 rows cell</div>
</div>
</div>
<div class="row">
<div class="row__cell row__cell--cell1">
<div>1 row cell</div>
</div>
<div class="row__cell row__cell--cell1">
<div>1 row cell</div>
</div>
<div class="row__cell row__cell--cell1">
<div>1 row cell</div>
</div>
<div class="row__cell row__cell--cell1">
<div>1 row cell</div>
</div>
<div class="row__cell row__cell--cell1">
<div>1 row cell</div>
</div>
<div class="row__cell row__cell--cell1">
<div>1 row cell</div>
</div>
<div class="row__cell row__cell--cell1">
<div>1 row cell</div>
</div>
<div class="row__cell row__cell--cell1">
<div>1 row cell</div>
</div>
<div class="row__cell row__cell--cell1">
<div>1 row cell</div>
</div>
<div class="row__cell row__cell--cell1">
<div>1 row cell</div>
</div>
<div class="row__cell row__cell--cell1">
<div>1 row cell</div>
</div>
<div class="row__cell row__cell--cell1">
<div>1 row cell</div>
</div>
</div>
</section>
<section class="container">
<h2>Cells in different sizes</h2>
<div class="row">
<div class="row__cell row__cell--cell8">
<div>8 rows cell</div>
</div>
<div class="row__cell row__cell--cell4">
<div>4 rows cell</div>
</div>
</div>
<div class="row">
<div class="row__cell row__cell--cell2">
<div>2 rows cell</div>
</div>
<div class="row__cell row__cell--cell6">
<div>6 rows cell</div>
</div>
<div class="row__cell row__cell--cell4">
<div>4 rows cell</div>
</div>
</div>
</section>
<section class="container">
<h2>Cells with margins</h2>
<div class="row">
<div class="row__cell row__cell--cell4 row__cell--leftMarginCell1">
<div>4 rows cell with a margin left of 1 cell</div>
</div>
<div class="row__cell row__cell--cell4 row__cell--leftMarginCell3">
<div>4 rows cell with a margin left of 3 cells</div>
</div>
</div>
</section>
<section class="container">
<h2>Without gutter</h2>
<div class="row row--gutter-disabled">
<div class="row__cell row__cell--cell4">
<div>4 rows cell without gutter</div>
</div>
<div class="row__cell row__cell--cell4">
<div>4 rows cell without gutter</div>
</div>
<div class="row__cell row__cell--cell4">
<div>4 rows cell without gutter</div>
</div>
</div>
</section>
<section class="container">
<h2>Responsive</h2>
<div class="row">
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--desktop-cell4">
<div>12 rows per default, 6 rows when device has the resolution of a tablet in portrait or wider, 4 rows when device has a desktop resolution</div>
</div>
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--desktop-cell4">
<div>12 rows per default, 6 rows when device has the resolution of a tablet in portrait or wider, 4 rows when device has a desktop resolution</div>
</div>
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--desktop-cell4">
<div>12 rows per default, 6 rows when device has the resolution of a tablet in portrait or wider, 4 rows when device has a desktop resolution</div>
</div>
</div>
</section>
<section class="container">
<h2>Fit one row</h2>
<div class="row row--fit-row">
<div class="row__cell">
<div>Auto size, all cells in one row</div>
</div>
<div class="row__cell">
<div>Auto size, all cells in one row</div>
</div>
<div class="row__cell">
<div>Auto size, all cells in one row</div>
</div>
<div class="row__cell">
<div>Auto size, all cells in one row</div>
</div>
<div class="row__cell">
<div>Auto size, all cells in one row</div>
</div>
</div>
</section>
<section class="container">
<h2>Flexible width</h2>
<div class="row">
<div class="row__cell row__cell--width-flexible">
<div>Auto width as wide as possible</div>
</div>
<div class="row__cell">
<div>Auto size fitting the content</div>
</div>
</div>
</section>
<section class="container">
<h2>Nested gutter with different values</h2>
<p>The CSS custom property <code>--bb-rows-gutter</code> can be used to change the width of the gutter.</p>
<p>The following gutter uses <code>--bb-rows-gutter: 15px;</code></p>
<div class="row" style="--bb-rows-gutter: 15px">
<div class="row__cell row__cell--cell6">
<div>
<p>6 rows</p>
<p>The following gutter uses <code>--bb-rows-gutter: 25px;</code></p>
</div>
<div>
<div class="row" style="--bb-rows-gutter: 25px">
<div class="row__cell row__cell--cell4">
<div>4 rows</div>
</div>
<div class="row__cell row__cell--cell4">
<div>4 rows</div>
</div>
<div class="row__cell row__cell--cell4">
<div>4 rows</div>
</div>
</div>
</div>
</div>
<div class="row__cell row__cell--cell6">
<div>
<p>6 rows</p>
<p>The following gutter uses <code>--bb-rows-gutter: 5px;</code></p>
</div>
<div>
<div class="row" style="--bb-rows-gutter: 5px">
<div class="row__cell row__cell--cell4">
<div>4 rows</div>
</div>
<div class="row__cell row__cell--cell4">
<div>4 rows</div>
</div>
<div class="row__cell row__cell--cell4">
<div>4 rows</div>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="container">
© Bit&Black · <a href="https://www.bitandblack.com" target="_blank">www.bitandblack.com</a>
</footer>
</body>
</html>