Skip to content

Instantly share code, notes, and snippets.

@markhillard

markhillard/snap-2-0.markdown

Last active December 1, 2022 04:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save markhillard/645df83ca9d1a6146ca0a0070e0e33e6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save markhillard/645df83ca9d1a6146ca0a0070e0e33e6 to your computer and use it in GitHub Desktop.
Download ZIP
Snap 2.0
Raw
snap-2-0.markdown

Snap 2.0

Flexbox grid system featuring infinitely nestable rows/columns with automatic sizing and utility classes for column offsets, wrapping, ordering, alignment, and space distribution.

A Pen by Mark Hillard on CodePen.

License.

Raw
style.css
/* =========================================================================================
Global
========================================================================================= */
/* Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap");
/* General */
html,
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
background-color: #fff;
color: #2e3532;
font-family: "Outfit", sans-serif;
font-size: 100%;
font-weight: 400;
height: 100%;
letter-spacing:.03rem;
line-height: 1.618;
overflow-x: hidden;
}
main {
margin: 3rem 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
@media screen and (max-width: 800px) {
main {
margin: 2rem 0;
}
}
/* Typography */
h1,
h2 {
font-weight: inherit;
line-height: 1.2;
margin: 2rem 0 1rem;
}
h1 {
font-size: 3.5rem;
font-weight: 800;
}
h2 {
font-size: 2rem;
font-weight: 600;
}
p {
font-size:1.2rem;
margin-bottom: 2.4rem;
}
/* Demo Overrides */
.row {
background-color: rgba(0, 0, 0, .035);
}
.row .row {
background-color: transparent;
}
.row .col,
.row [class*=" col-"],
.row [class^="col-"] {
background-color: rgba(126, 145, 129, .35);
font-size: 1.3rem;
}
.row .col::before,
.row [class*=" col-"]::before,
.row [class^="col-"]::before {
content: attr(class);
display: block;
overflow: hidden;
padding: .865rem;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =========================================================================================
Snap 2.0 (Grid)
========================================================================================= */
/* Container (Base Width)
================================================== */
.container {
margin: 0 auto;
max-width: 960px;
padding: 0 1rem;
width: 90%;
}
/* Global (Rows & Columns)
================================================== */
.row {
display: flex;
flex-direction: row;
margin: 0 -1rem;
position: relative;
}
.row .row {
padding: 0;
}
.row .col,
.row [class*=" col-"],
.row [class^="col-"] {
flex: 1 1 100%;
margin: 1rem;
min-width: 0;
position: relative;
}
.row .row .col,
.row .row [class*=" col-"],
.row .row [class^="col-"] {
margin-bottom: 0;
margin-top: 0;
}
/* .row .col:empty,
.row [class*=" col-"]:empty,
.row [class^="col-"]:empty {
display: none !important;
} */
/* Column Wrapping
================================================== */
.row.wrap {
flex-wrap: wrap;
}
/* Reverse Column Ordering
================================================== */
.row.reverse {
flex-direction: row-reverse;
}
/* Column Ordering (Desktop)
================================================== */
.row .col.desktop-first,
.row [class*=" col-"].desktop-first,
.row [class^="col-"].desktop-first {
order: -1;
}
.row .col.desktop-last,
.row [class*=" col-"].desktop-last,
.row [class^="col-"].desktop-last {
order: 1;
}
/* Vertical Column Alignment
================================================== */
.row.align-top {
align-items: flex-start;
}
.row.align-middle {
align-items: center;
}
.row.align-bottom {
align-items: flex-end;
}
/* Horizontal Column Alignment
================================================== */
.row.align-start {
justify-content: flex-start;
}
.row.align-center {
justify-content: center;
}
.row.align-end {
justify-content: flex-end;
}
/* Shrink Columns
================================================== */
.row.shrink > .col,
.row.shrink > [class*=" col-"],
.row.shrink > [class^="col-"] {
flex: 0 0 auto;
}
/* Column Distribution
================================================== */
.row.around {
justify-content: space-around;
}
.row.between {
justify-content: space-between;
}
/* Grid (12 Columns)
================================================== */
.row .col-12 {
flex-basis: 100%;
max-width: 100%;
}
.row .col-11 {
flex-basis: 91.666%;
max-width: 91.666%;
}
.row .col-10 {
flex-basis: 83.333%;
max-width: 83.333%;
}
.row .col-9 {
flex-basis: 75%;
max-width: 75%;
}
.row .col-8 {
flex-basis: 66.666%;
max-width: 66.666%;
}
.row .col-7 {
flex-basis: 58.333%;
max-width: 58.333%;
}
.row .col-6 {
flex-basis: 50%;
max-width: 50%;
}
.row .col-5 {
flex-basis: 41.666%;
max-width: 41.666%;
}
.row .col-4 {
flex-basis: 33.333%;
max-width: 33.333%;
}
.row .col-3 {
flex-basis: 25%;
max-width: 25%;
}
.row .col-2 {
flex-basis: 16.666%;
max-width: 16.666%;
}
.row .col-1 {
flex-basis: 8.333%;
max-width: 8.333%;
}
/* Column Offset
================================================== */
.row .offset-11 {
margin-left: 91.666% !important;
}
.row .offset-10 {
margin-left: 83.333% !important;
}
.row .offset-9 {
margin-left: 75% !important;
}
.row .offset-8 {
margin-left: 66.666% !important;
}
.row .offset-7 {
margin-left: 58.333% !important;
}
.row .offset-6 {
margin-left: 50% !important;
}
.row .offset-5 {
margin-left: 41.666% !important;
}
.row .offset-4 {
margin-left: 33.333% !important;
}
.row .offset-3 {
margin-left: 25% !important;
}
.row .offset-2 {
margin-left: 16.666% !important;
}
.row .offset-1 {
margin-left: 8.333% !important;
}
/* Media Queries (Rows & Columns)
================================================== */
/* Mobile & Tablet */
@media screen and (max-width: 800px) {
.container {
padding: 0;
}
.row {
flex-direction: column;
}
.row.reverse {
flex-direction: column-reverse;
}
.row .col,
.row [class*=" col-"],
.row [class^="col-"] {
flex-basis: 100%;
max-width: 100%;
}
.row .col.desktop-first,
.row .col.desktop-last,
.row [class*=" col-"].desktop-first,
.row [class*=" col-"].desktop-last,
.row [class^="col-"].desktop-first,
.row [class^="col-"].desktop-last {
order: unset;
}
.row [class*="offset-"] {
margin-left: 1rem !important;
}
}
/* Tablet */
@media only screen and (min-width:480px) and (max-width:800px) {
.row.tablet {
flex-direction: row;
}
}
/* Mobile */
@media only screen and (max-width:479px) {
.row {
align-items: unset !important;
margin: 0;
}
.row .col,
.row [class*=" col-"],
.row [class^="col-"] {
margin: 1rem 0;
}
.row [class*="offset-"] {
margin-left: 0 !important;
}
}
/* Automatic Clearing
================================================== */
.container::after,
.row:not(.between):not(.around)::after,
.row [class*=" col-"]::after,
.row [class^="col-"]::after,
.clearfix::after {
clear: both;
content: "";
display: table;
}
Raw
test.html
<main>
<header>
<div class="container">
<h1>Snap 2.0</h1>
<p>Flexbox grid system featuring infinitely nestable rows/columns with automatic sizing and utility classes for column offsets, wrapping, ordering, alignment, and space distribution.</p>
</div>
</header>
<section id="base-grid">
<div class="container">
<h2>12 Column Grid</h2>
<div class="row">
<div class="col-12"></div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-11"></div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-10"></div>
</div>
<div class="row tablet">
<div class="col-3 desktop-last"></div>
<div class="col-9 desktop-first">
<div class="row">
<div class="col-8">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<div class="col-4"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-4"></div>
<div class="col-8"></div>
</div>
<div class="row">
<div class="col-5"></div>
<div class="col-7"></div>
</div>
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>
<div class="row">
<div class="col-7"></div>
<div class="col-5"></div>
</div>
<div class="row">
<div class="col-8"></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-9"></div>
<div class="col-3"></div>
</div>
<div class="row">
<div class="col-10"></div>
<div class="col-2"></div>
</div>
<div class="row">
<div class="col-11"></div>
<div class="col-1"></div>
</div>
<div class="row">
<div class="col-12"></div>
</div>
</div>
</section>
<section id="automagic">
<div class="container">
<h2>Automagic Columns</h2>
<div class="row">
<div class="col">
<div class="row tablet">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
<div class="row tablet">
<div class="col"></div>
<div class="col">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</section>
<section id="wrapping">
<div class="container">
<h2>Column Wrapping</h2>
<div class="row wrap">
<div class="col-2"></div>
<div class="col-3"></div>
<div class="col-4"></div>
<div class="col-5"></div>
</div>
</div>
</section>
<section id="offset">
<div class="container">
<h2>Column Offset</h2>
<div class="row">
<div class="col-12"></div>
</div>
<div class="row">
<div class="col-11 offset-1"></div>
</div>
<div class="row">
<div class="col-10 offset-2"></div>
</div>
<div class="row">
<div class="col-9 offset-3"></div>
</div>
<div class="row">
<div class="col-8 offset-4"></div>
</div>
<div class="row">
<div class="col-7 offset-5"></div>
</div>
<div class="row">
<div class="col-6 offset-6"></div>
</div>
<div class="row">
<div class="col-5 offset-7"></div>
</div>
<div class="row">
<div class="col-4 offset-8"></div>
</div>
<div class="row">
<div class="col-3 offset-9"></div>
</div>
<div class="row">
<div class="col-2 offset-10"></div>
</div>
<div class="row">
<div class="col-1 offset-11"></div>
</div>
</div>
</section>
<section id="v-alignment">
<div class="container">
<h2>Vertical Column Alignment</h2>
<div class="row tablet align-middle">
<div class="col-5"></div>
<div class="col-7">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
</div>
</section>
<section id="h-alignment">
<div class="container">
<h2>Horizontal Column Alignment</h2>
<div class="row tablet align-center">
<div class="col-2"></div>
<div class="col-4">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<div class="col-2"></div>
</div>
</div>
</section>
<section id="distribution">
<div class="container">
<h2>Column Distribution</h2>
<div class="row tablet between">
<div class="col-2"></div>
<div class="col-4"></div>
<div class="col-2"></div>
</div>
<div class="row tablet around">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>
</div>
</section>
</main>
Raw
test.js
// ███████ ███ ██ █████ ██████ ██████ ██████
// ██ ████ ██ ██ ██ ██ ██ ██ ██ ████
// ███████ ██ ██ ██ ███████ ██████ █████ ██ ██ ██
// ██ ██ ██ ██ ██ ██ ██ ██ ████ ██
// ███████ ██ ████ ██ ██ ██ ███████ ██ ██████
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment