Skip to content

Instantly share code, notes, and snippets.

@nixstrom

nixstrom/index.html

Created October 26, 2018 08:15
Show Gist options
  • Save nixstrom/8d8f9279afb246fd128e9d4b87b30b81 to your computer and use it in GitHub Desktop.
Save nixstrom/8d8f9279afb246fd128e9d4b87b30b81 to your computer and use it in GitHub Desktop.
Download ZIP
Hello // source https://jsbin.com/dunekez
Raw
index.html
<!doctype html>
<title>Hello<style id="jsbin-css">
/* ### GENERAL STYLES; IGNORE THIS PART ### */
:root {
--gutter: 2px;
}
div {
box-sizing: border-box;
}
body,
html {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
body {
padding: 20px;
font-family: sans-serif;
}
/* ###################
### GRID STYLES ###
################### */
.grid {
display: flex;
flex-flow: row wrap;
}
.grid > * {
flex: 1 0 auto;
background: hotpink;
border: solid var(--gutter) white;
padding: var(--gutter);
border-radius: 2px;
}
.grid > .grid {
border: 0;
padding: 0;
}
.g-1of2 { flex-basis: 50%; }
.g-1of3 { flex-basis: 33.33%; }
.g-1of4 { flex-basis: 25%; }
.g-1of5 { flex-basis: 20%; }
.g-1of6 { flex-basis: 16.66%; }
.g-1of7 { flex-basis: 14.29%; }
.g-1of8 { flex-basis: 12.5%; }
.g-1of9 { flex-basis: 12.5%; }
.grid > .g-flex {
flex-grow: 1;
flex-shrink: 1;
}
.grid > .g-fix {
flex-grow: 0;
flex-shrink: 0;
}
.grid > .g-fill {
flex-grow: 1;
}
.grid > .g-shrink {
flex-shrink: 1;
}
.grid--align-start {
justify-content: flex-start;
}
.grid--align-center {
justify-content: center;
}
.grid--align-end {
justify-content: flex-end;
}
.grid--y {
flex-direction: column;
}
.grid--reverse {
flex-direction: row-reverse
}
.grid--y-reverse {
flex-direction: column-reverse
}
</style>
</title>
<h3>Basic grid</h3>
<div class="grid">
<div class="g-1of2">1 of 2</div>
<div class="g-1of2">1 of 2</div>
<div class="g-1of3">1 of 3</div>
<div class="g-1of3">1 of 3</div>
<div class="g-1of3">1 of 3</div>
<div class="g-1of4">1 of 4</div>
<div class="g-1of4">1 of 4</div>
<div class="g-1of4">1 of 4</div>
<div class="g-1of4">1 of 4</div>
<div class="g-1of5">1 of 5</div>
<div class="g-1of5">1 of 5</div>
<div class="g-1of5">1 of 5</div>
<div class="g-1of5">1 of 5</div>
<div class="g-1of5">1 of 5</div>
</div>
<h3>Y-aligned grid</h3>
<div class="grid grid--y">
<div class="g-1of2">1 of 2</div>
<div class="g-1of2 g-shrink">1 of 2</div>
<div class="g-1of2 g-fix">1 of 2</div>
</div>
<h3>Sub-grids</h3>
<div class="grid">
<div class="g-1of2">Main grid</div>
<div class="g-1of2 grid">
<div class="g-1of2">Half</div>
<div class="g-1of2">Half</div>
</div>
</div>
<h3>Sub-grids with alternating axis</h3>
<div class="grid">
<div>Main grid</div>
<div class="grid grid--y">
<div class="g-1of2">Half</div>
<div class="g-1of2">Half</div>
</div>
</div>
<div class="grid grid--y">
<div class="g-1of3">Y-grid</div>
<div class="g-1of3">Y-grid</div>
<div class="grid">
<div class="g-1of2">X-cell</div>
<div class="g-1of2">X-cell</div>
</div>
</div>
<h3 class="tooltip" data-tooltip="Reverse grids">Reverse grids</h3>
<div class="grid grid--reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="grid grid--y-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<h3>Grids with special align</h3>
<div class="grid grid--align-start">
<div class="g-1of4 g-fix">1</div>
<div class="g-1of4 g-fix">2</div>
</div>
<div class="grid grid--align-center">
<div class="g-1of4 g-fix">1</div>
<div class="g-1of4 g-fix">2</div>
</div>
<div class="grid grid--align-end">
<div class="g-1of4 g-fix">1</div>
<div class="g-1of4 g-fix">2</div>
</div>
<h3>Grid with self-aligning child</h3>
<div class="grid">
<div>1</div>
<div class="g-align-end">2</div>
<div>3</div>
</div>
<h3>Special grid filling cells</h3>
<div class="grid">
<div class="g-1of3 g-fill">Allow growing (default)</div>
<div class="g-1of3 g-shrink">Allow shrinking</div>
<div class="g-1of3 g-flex">Allow growing and shrinking (fully flexible)</div>
<div class="g-1of3 g-fix">Disallow any adjustment (force size)</div>
</div>
<script id="jsbin-source-css" type="text/css">/* ### GENERAL STYLES; IGNORE THIS PART ### */
:root {
--gutter: 2px;
}
div {
box-sizing: border-box;
}
body,
html {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
body {
padding: 20px;
font-family: sans-serif;
}
/* ###################
### GRID STYLES ###
################### */
.grid {
display: flex;
flex-flow: row wrap;
}
.grid > * {
flex: 1 0 auto;
background: hotpink;
border: solid var(--gutter) white;
padding: var(--gutter);
border-radius: 2px;
}
.grid > .grid {
border: 0;
padding: 0;
}
.g-1of2 { flex-basis: 50%; }
.g-1of3 { flex-basis: 33.33%; }
.g-1of4 { flex-basis: 25%; }
.g-1of5 { flex-basis: 20%; }
.g-1of6 { flex-basis: 16.66%; }
.g-1of7 { flex-basis: 14.29%; }
.g-1of8 { flex-basis: 12.5%; }
.g-1of9 { flex-basis: 12.5%; }
.grid > .g-flex {
flex-grow: 1;
flex-shrink: 1;
}
.grid > .g-fix {
flex-grow: 0;
flex-shrink: 0;
}
.grid > .g-fill {
flex-grow: 1;
}
.grid > .g-shrink {
flex-shrink: 1;
}
.grid--align-start {
justify-content: flex-start;
}
.grid--align-center {
justify-content: center;
}
.grid--align-end {
justify-content: flex-end;
}
.grid--y {
flex-direction: column;
}
.grid--reverse {
flex-direction: row-reverse
}
.grid--y-reverse {
flex-direction: column-reverse
}
</script>
Raw
jsbin.dunekez.css
/* ### GENERAL STYLES; IGNORE THIS PART ### */
:root {
--gutter: 2px;
}
div {
box-sizing: border-box;
}
body,
html {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
body {
padding: 20px;
font-family: sans-serif;
}
/* ###################
### GRID STYLES ###
################### */
.grid {
display: flex;
flex-flow: row wrap;
}
.grid > * {
flex: 1 0 auto;
background: hotpink;
border: solid var(--gutter) white;
padding: var(--gutter);
border-radius: 2px;
}
.grid > .grid {
border: 0;
padding: 0;
}
.g-1of2 { flex-basis: 50%; }
.g-1of3 { flex-basis: 33.33%; }
.g-1of4 { flex-basis: 25%; }
.g-1of5 { flex-basis: 20%; }
.g-1of6 { flex-basis: 16.66%; }
.g-1of7 { flex-basis: 14.29%; }
.g-1of8 { flex-basis: 12.5%; }
.g-1of9 { flex-basis: 12.5%; }
.grid > .g-flex {
flex-grow: 1;
flex-shrink: 1;
}
.grid > .g-fix {
flex-grow: 0;
flex-shrink: 0;
}
.grid > .g-fill {
flex-grow: 1;
}
.grid > .g-shrink {
flex-shrink: 1;
}
.grid--align-start {
justify-content: flex-start;
}
.grid--align-center {
justify-content: center;
}
.grid--align-end {
justify-content: flex-end;
}
.grid--y {
flex-direction: column;
}
.grid--reverse {
flex-direction: row-reverse
}
.grid--y-reverse {
flex-direction: column-reverse
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment