bitandblack-rows
Version:
A small and simple CSS gutter to create rows and cells using the flexbox model.
96 lines (88 loc) • 4.28 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Rows / Position</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;
}
.row__cell.row__cell--last-of-row.row__cell--first-of-column > div {
background-color: rgba(0, 125, 125, .5);
}
.row__cell.row__cell--first-of-row.row__cell--first-of-column > div {
background-color: rgba(125, 125, 0, .5);
}
.row__cell.row__cell--first-of-row.row__cell--last-of-column > div {
background-color: rgba(0, 125, 0, .5);
}
.row__cell.row__cell--last-of-row.row__cell--last-of-column > div {
background-color: rgba(125, 0, 0, .5);
}
.container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
margin-bottom: 1em;
}
</style>
</head>
<body>
<section class="container">
<h1>Position</h1>
<p>Here you find an example about how <code>bitandblack/rows</code> adds information about cell's positions.</p>
<p>In this example, all cells in the corners should be colored, independent of the viewport and which cell it is.</p>
</section>
<section class="container">
<div class="row">
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--tablet-landscape-cell3 row__cell--desktop-cell4">
<div>Cell #0</div>
</div>
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--tablet-landscape-cell3 row__cell--desktop-cell4">
<div>Cell #1</div>
</div>
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--tablet-landscape-cell3 row__cell--desktop-cell4">
<div>Cell #2</div>
</div>
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--tablet-landscape-cell3 row__cell--desktop-cell4">
<div>Cell #3</div>
</div>
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--tablet-landscape-cell6 row__cell--desktop-cell4">
<div>Cell #4</div>
</div>
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--tablet-landscape-cell3 row__cell--desktop-cell4">
<div>Cell #5</div>
</div>
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--tablet-landscape-cell3 row__cell--desktop-cell4">
<div>Cell #6</div>
</div>
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--tablet-landscape-cell3 row__cell--desktop-cell4">
<div>Cell #6</div>
</div>
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--tablet-landscape-cell6 row__cell--desktop-cell4">
<div>Cell #7</div>
</div>
<div class="row__cell row__cell--cell12 row__cell--tablet-portrait-cell6 row__cell--tablet-landscape-cell3 row__cell--desktop-cell4">
<div>Cell #8</div>
</div>
</div>
</section>
<footer class="container">
© Bit&Black · <a href="https://www.bitandblack.com" target="_blank">www.bitandblack.com</a>
</footer>
<script src="build/example.js" async></script>
</body>
</html>