Skip to content

Commit

Permalink
Demo Grids
Browse files Browse the repository at this point in the history
  • Loading branch information
@sebastianserna
sebastianserna committed May 22, 2020
1 parent 584302b commit cec0ad3
Show file tree
Hide file tree
Showing 16 changed files with 11,195 additions and 0 deletions.
109 changes: 109 additions & 0 deletions docs/content/bulma.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bulma - GridLab</title>
<!-- Styles -->
<link rel="stylesheet" href="../dist/gridlab.css">
</head>
<body>
<header>
<h1>GridLab</h1>
<ul>
<li><a href="bulma.html" class="active">Bulma</a></li>
<li><a href="tailwind.html">Tailwind</a></li>
<li><a href="reflex.html">Reflex</a></li>
<li><a href="flashgrid.html">Flash Grid</a></li>
<li><a href="foundation.html">Foundation</a></li>
<li><a href="pure.html">Pure</a></li>
<li><a href="swanix.html">Swanix</a></li>
</ul>
<hr>
</header>

<main>
<h2>Bulma</h2>
<a href="https://bulma.io/documentation/columns/basics/" target="_blank">https://bulma.io/documentation/columns/basics/</a>

<textarea code-editor="html" code-result-size="440">
<div class="columns">
<div class="column is-four-fifths">is-four-fifths</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-three-quarters">is-three-quarters</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-two-thirds">is-two-thirds</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-three-fifths">is-three-fifths</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-half">is-half</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-two-fifths">is-two-fifths</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-one-third">is-one-third</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-one-quarter">is-one-quarter</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
<div class="columns">
<div class="column is-one-fifth">is-one-fifth</div>
<div class="column">Auto</div>
<div class="column">Auto</div>
</div>
</textarea>

<h2>Basic use</h2>

<textarea code-editor="html" code-result-size="80">
<div class="columns">
<div class="column">
First column
</div>
<div class="column">
Second column
</div>
<div class="column">
Third column
</div>
<div class="column">
Fourth column
</div>
</div>
</textarea>

</main>

<!-- Syntax Highlighter -->
<link href="https://cdn.jsdelivr.net/gh/swanix/coderix/dist/coderix.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/swanix/coderix/dist/coderix.js"></script>
<script>
loadCss = [
"../dist/test/bulma/bulma-grid.css"
];
codeResultInit();
</script>
</body>
</html>
87 changes: 87 additions & 0 deletions docs/content/flashgrid.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Flash Grid - GridLab</title>
<!-- Styles -->
<link rel="stylesheet" href="../dist/gridlab.css">
</head>
<body>
<header>
<h1>GridLab</h1>
<ul>
<li><a href="bulma.html">Bulma</a></li>
<li><a href="tailwind.html">Tailwind</a></li>
<li><a href="reflex.html">Reflex</a></li>
<li><a href="flashgrid.html" class="active">Flash Grid</a></li>
<li><a href="foundation.html">Foundation</a></li>
<li><a href="pure.html">Pure</a></li>
<li><a href="swanix.html">Swanix</a></li>
</ul>
<hr>
</header>

<main>
<h2>Flash Grid</h2>
<a href="https://dev.to/codyhouse/flash-grid-learn-css-grid-by-building-a-grid-system-2c4f" target="_blank">Flash Grid: learn CSS Grid by building a grid system</a>

<textarea code-editor="html" code-result-size="620">
<div class="grid grid-gap-xs">
<div class="child col-1"></div>
<div class="child col-1"></div>
<div class="child col-1"></div>
<div class="child col-1"></div>
<div class="child col-1"></div>
<div class="child col-1"></div>
<div class="child col-1"></div>
<div class="child col-1"></div>
<div class="child col-1"></div>
<div class="child col-1"></div>
<div class="child col-1"></div>
<div class="child col-1"></div>
<div class="child col-2"></div>
<div class="child col-2"></div>
<div class="child col-2"></div>
<div class="child col-2"></div>
<div class="child col-2"></div>
<div class="child col-2"></div>
<div class="child col-3"></div>
<div class="child col-3"></div>
<div class="child col-3"></div>
<div class="child col-3"></div>
<div class="child col-4"></div>
<div class="child col-4"></div>
<div class="child col-4"></div>
<div class="child col-6"></div>
<div class="child col-6"></div>
<div class="child"></div>
</div>
</textarea>

<h2>Breakpoint Modifiers</h2>

<textarea code-editor="html" code-result-size="320">
<div class="grid grid-gap-xs">
<div class="child col-6@sm col-4@md"></div>
<div class="child col-6@sm col-4@md"></div>
<div class="child col-6@sm col-4@md"></div>
<div class="child col-6@sm col-start@md col-end@md"></div>
<div class="child col-6@xs col-start-7@sm col-start-1@md"></div>
</div>
</textarea>

</main>

<!-- Syntax Highlighter -->
<link href="https://cdn.jsdelivr.net/gh/swanix/coderix/dist/coderix.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/swanix/coderix/dist/coderix.js"></script>
<script>
loadCss = [
"../dist/test/flashgrid/flashgrid.css"
];
codeResultInit();
</script>
</body>
</html>
83 changes: 83 additions & 0 deletions docs/content/foundation.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Foundation - GridLab</title>
<!-- Styles -->
<link rel="stylesheet" href="../dist/gridlab.css">
</head>
<body>
<header>
<h1>GridLab</h1>
<ul>
<li><a href="bulma.html">Bulma</a></li>
<li><a href="tailwind.html">Tailwind</a></li>
<li><a href="reflex.html">Reflex</a></li>
<li><a href="flashgrid.html">Flash Grid</a></li>
<li><a href="foundation.html" class="active">Foundation</a></li>
<li><a href="pure.html">Pure</a></li>
<li><a href="swanix.html">Swanix</a></li>
</ul>
<hr>
</header>

<main>

<h2>Foundation</h2>
<a href="https://get.foundation/sites/docs/xy-grid.html" target="_blank">https://get.foundation/sites/docs/xy-grid.html</a>

<textarea code-editor="html" code-result-size="220">
<div class="grid-x">
<div class="cell">full width cell</div>
<div class="cell">full width cell</div>
</div>
<div class="grid-x">
<div class="cell small-6">6 cells</div>
<div class="cell small-6">6 cells</div>
</div>
<div class="grid-x">
<div class="cell medium-6 large-4">12/6/4 cells</div>
<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
</textarea>

<h2>Gutters</h2>

<textarea code-editor="html" code-result-size="220">
<div class="grid-x grid-margin-x">
<div class="cell medium-6 large-4">12/6/4 cells</div>
<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
<div class="grid-x grid-padding-x">
<div class="cell medium-6 large-4">12/6/4 cells</div>
<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
</textarea>

<h2>Grid Container</h2>

<textarea code-editor="html" code-result-size="320">
<div class="grid-container">
<div class="grid-x grid-margin-x">
<div class="cell small-4">cell</div>
<div class="cell small-4">cell</div>
<div class="cell small-4">cell</div>
</div>
</div>
</textarea>

</main>

<!-- Syntax Highlighter -->
<link href="https://cdn.jsdelivr.net/gh/swanix/coderix/dist/coderix.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/swanix/coderix/dist/coderix.js"></script>
<script>
loadCss = [
"../dist/test/foundation/foundation-grid.css"
];
codeResultInit();
</script>
</body>
</html>
71 changes: 71 additions & 0 deletions docs/content/pure.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Pure - GridLab</title>
<!-- Styles -->
<link rel="stylesheet" href="../dist/gridlab.css">
</head>
<body>
<header>
<h1>GridLab</h1>
<ul>
<li><a href="bulma.html">Bulma</a></li>
<li><a href="tailwind.html">Tailwind</a></li>
<li><a href="reflex.html">Reflex</a></li>
<li><a href="flashgrid.html">Flash Grid</a></li>
<li><a href="foundation.html">Foundation</a></li>
<li><a href="pure.html" class="active">Pure</a></li>
<li><a href="swanix.html">Swanix</a></li>
</ul>
<hr>
</header>

<main>
<h2>Pure</h2>
<a href="https://purecss.io/grids/" target="_blank">https://purecss.io/grids/</a>

<textarea code-editor="html" code-result-size="280">
<div class="pure-g">
<div class="pure-u-1-3">
<h3>Column 1</h3>
<p>Lorem ipsum</p>
</div>
<div class="pure-u-1-3">
<h3>Column 2</h3>
<p>Lorem ipsum</p>
</div>
<div class="pure-u-1-3">
<h3>Column 3</h3>
<p>Lorem ipsum</p>
</div>
<div class="pure-u-1-3">
<h3>Column 4</h3>
<p>Lorem ipsum</p>
</div>
<div class="pure-u-1-3">
<h3>Column 5</h3>
<p>Lorem ipsum</p>
</div>
<div class="pure-u-1-3">
<h3>Column 6</h3>
<p>Lorem ipsum</p>
</div>
</div>
</textarea>

</main>

<!-- Syntax Highlighter -->
<link href="https://cdn.jsdelivr.net/gh/swanix/coderix/dist/coderix.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/swanix/coderix/dist/coderix.js"></script>
<script>
loadCss = [
"../dist/test/pure/pure-grid.css"
];
codeResultInit();
</script>
</body>
</html>
Loading

0 comments on commit cec0ad3

Please sign in to comment.