Skip to content

Commit

Permalink
Add new layout grid/expand w/h classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@shaunmackey
shaunmackey committed Jan 6, 2024
1 parent 1dea1a8 commit b771f18
Show file tree
Hide file tree
Showing 13 changed files with 627 additions and 218 deletions.
461 changes: 452 additions & 9 deletions dist/zen.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/zen.css.map
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/zen.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/zen.min.css.map
View file

Large diffs are not rendered by default.

196 changes: 18 additions & 178 deletions docs/examples/formatting.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,10 +102,9 @@ <h3>Gap Classes</h3>
</table>
</section>

<!-- Width and Height Classes -->
<section>
<h3>Width and Height Classes</h3>
<p>These classes define specific width and height for elements, ranging from 10px to 300px.</p>
<p>These classes define specific width and height for elements, ranging from 0px to 350px, incremented by 5px.</p>
<table class="responsive-table striped zebra">
<thead>
<tr>
Expand All @@ -115,195 +114,36 @@ <h3>Width and Height Classes</h3>
</tr>
</thead>
<tbody>
<!-- Displaying initial few sizes -->

<tr>
<td>.w-sm</td>
<td>Quarter width</td>
<td>width: 25%;</td>
</tr>
<tr>
<td>.w-md</td>
<td>Half width</td>
<td>width: 50%;</td>
</tr>
<tr>
<td>.w-lg</td>
<td>Three-Quarters width</td>
<td>width: 75%;</td>
</tr>
<tr>
<td>.w-full</td>
<td>Full width</td>
<td>width: 100%;</td>
</tr>
<tr>
<td>.h-full</td>
<td>Full height</td>
<td>height: 100%;</td>
</tr>
<tr>
<td>.w-10</td>
<td>Width: 10px</td>
<td>width: 10px;</td>
</tr>
<tr>
<td>.w-20</td>
<td>Width: 20px</td>
<td>width: 20px;</td>
</tr>
<tr>
<td>.w-25</td>
<td>Width: 25px</td>
<td>width: 25px;</td>
</tr>
<tr>
<td>.w-30</td>
<td>Width: 30px</td>
<td>width: 30px;</td>
</tr>
<tr>
<td>.w-40</td>
<td>Width: 40px</td>
<td>width: 40px;</td>
</tr>
<tr>
<td>.w-50</td>
<td>Width: 50px</td>
<td>width: 50px;</td>
</tr>
<tr>
<td>.w-75</td>
<td>Width: 75px</td>
<td>width: 75px;</td>
</tr>
<tr>
<td>.w-100</td>
<td>Width: 100px</td>
<td>width: 100px;</td>
</tr>
<tr>
<td>.w-125</td>
<td>Width: 125px</td>
<td>width: 125px;</td>
</tr>
<tr>
<td>.w-150</td>
<td>Width: 150px</td>
<td>width: 150px;</td>
</tr>
<tr>
<td>.w-175</td>
<td>Width: 175px</td>
<td>width: 175px;</td>
</tr>
<tr>
<td>.w-200</td>
<td>Width: 200px</td>
<td>width: 200px;</td>
</tr>
<tr>
<td>.w-225</td>
<td>Width: 225px</td>
<td>width: 225px;</td>
</tr>
<tr>
<td>.w-250</td>
<td>Width: 250px</td>
<td>width: 250px;</td>
</tr>
<tr>
<td>.w-275</td>
<td>Width: 275px</td>
<td>width: 275px;</td>
</tr>
<tr>
<td>.w-300</td>
<td>Width: 300px</td>
<td>width: 300px;</td>
</tr>
<tr>
<td>.h-10</td>
<td>Height: 10px</td>
<td>height: 10px;</td>
</tr>
<tr>
<td>.h-20</td>
<td>Height: 20px</td>
<td>height: 20px;</td>
</tr>
<tr>
<td>.h-25</td>
<td>Height: 25px</td>
<td>height: 25px;</td>
</tr>
<tr>
<td>.h-30</td>
<td>Height: 30px</td>
<td>height: 30px;</td>
</tr>
<tr>
<td>.h-40</td>
<td>Height: 40px</td>
<td>height: 40px;</td>
</tr>
<tr>
<td>.h-50</td>
<td>Height: 50px</td>
<td>height: 50px;</td>
</tr>
<tr>
<td>.h-75</td>
<td>Height: 75px</td>
<td>height: 75px;</td>
</tr>
<tr>
<td>.h-100</td>
<td>Height: 100px</td>
<td>height: 100px;</td>
</tr>
<tr>
<td>.h-125</td>
<td>Height: 125px</td>
<td>height: 125px;</td>
</tr>
<tr>
<td>.h-150</td>
<td>Height: 150px</td>
<td>height: 150px;</td>
</tr>
<tr>
<td>.h-175</td>
<td>Height: 175px</td>
<td>height: 175px;</td>
</tr>
<tr>
<td>.h-200</td>
<td>Height: 200px</td>
<td>height: 200px;</td>
<td>.w-5</td>
<td>Width: 5px</td>
<td>Width: 5px;</td>
</tr>
<tr>
<td>.h-225</td>
<td>Height: 225px</td>
<td>height: 225px;</td>
<td>.h-5</td>
<td>Height: 5px</td>
<td>Height: 5px;</td>
</tr>
<tr>
<td>.h-250</td>
<td>Height: 250px</td>
<td>height: 250px;</td>
<td colspan="3" style="text-align: center;">-- -- --</td>
</tr>

<tr>
<td>.h-275</td>
<td>Height: 275px</td>
<td>height: 275px;</td>
<td>.w-350</td>
<td>Width: 350px</td>
<td>Width: 350px;</td>
</tr>
<tr>
<td>.h-300</td>
<td>Height: 300px</td>
<td>height: 300px;</td>
<td>.h-350</td>
<td>Height: 350px</td>
<td>Height: 350px;</td>
</tr>
</tbody>
</table>
</section>

<!-- Directional Modifiers -->
<section>
<h3>Directional Modifiers</h3>
Expand Down
109 changes: 108 additions & 1 deletion docs/examples/layout-grids.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@ <h1 class="headline">Layout Grids</h1>
</z-row>
</z-container>




<!----------------------------------------------------------------------->
<!--- Component --->
<!----------------------------------------------------------------------->
Expand Down Expand Up @@ -225,6 +228,10 @@ <h3>Featured Columns</h3>
</z-row>
</z-container>
<z-container>
<z-row>
<z-col class="feature-xl theme-light">feature-xl</z-col>
<z-col class="theme-light">col</z-col>
</z-row>
<z-row>
<z-col class="feature-lg theme-light">feature-lg</z-col>
<z-col class="theme-light">col</z-col>
Expand All @@ -250,6 +257,10 @@ <h3>Featured Columns</h3>
<a href="#" class="title accordion-toggle" aria-expanded="false" aria-controls="content5"><i class="zenicon-build-circle down-1"></i> Code Example</a>
<div id="content5" class="expanded-content full-height p-0" aria-hidden="true">
<pre class="copy-text square"><code class="language-html">&lt;z-container&gt;
&lt;z-row&gt;
&lt;z-col class="feature-xl theme-light"&gt;feature-xl&lt;/z-col&gt;
&lt;z-col class="theme-light"&gt;col&lt;/z-col&gt;
&lt;/z-row&gt;
&lt;z-row&gt;
&lt;z-col class="feature-lg theme-light"&gt;feature-lg&lt;/z-col&gt;
&lt;z-col class="theme-light"&gt;col&lt;/z-col&gt;
Expand Down Expand Up @@ -334,7 +345,13 @@ <h3>Double Wide Columns</h3>
</z-container>

<hr />

<z-container>
<z-row>
<z-col>
<h3>Bento Box Style</h3>
</z-col>
</z-row>
</z-container>
<z-container>
<z-row>
<z-col class="feature-lg theme-light"> top bar </z-col>
Expand Down Expand Up @@ -401,6 +418,96 @@ <h3>Double Wide Columns</h3>
</z-container>

<hr />


<z-container>
<z-row>
<z-col>
<h3>Multiple Containers as columns</h3>
</z-col>
</z-row>
</z-container>

<z-container>
<z-row class="mobile:gap-0">
<z-container>
<z-row>
<z-col class="theme-light">1</z-col>
</z-row>
<z-row>
<z-col class="theme-light">2</z-col>
<z-col class="theme-light">3</z-col>
</z-row>
<z-row>
<z-col class="theme-light">4</z-col>
</z-row>
</z-container>

<z-container>
<z-row>
<z-col class="theme-light h-305">5</z-col>
</z-row>
<z-row>
<z-col class="theme-light h-145">6</z-col>
</z-row>
</z-container>

<z-container>
<z-row>
<z-col class="theme-light h-150">7</z-col>
</z-row>
<z-row>
<z-col class="theme-light h-300">8</z-col>
</z-row>
</z-container>

</z-row>
</z-container>
<z-container>
<z-row>
<z-col class="pl-0 pr-0">
<div class="accordion">
<a href="#" class="title accordion-toggle" aria-expanded="false" aria-controls="content3a"><i class="zenicon-build-circle down-1"></i> Code Example</a>
<div id="content3a" class="expanded-content full-height p-0" aria-hidden="true">
<pre class="copy-text square"><code class="language-html">&lt;z-container&gt;
&lt;z-row class="gap-0"&gt;
&lt;z-container&gt;
&lt;z-row&gt;
&lt;z-col class="theme-light"&gt;1&lt;/z-col&gt;
&lt;/z-row&gt;
&lt;z-row&gt;
&lt;z-col class="theme-light"&gt;1&lt;/z-col&gt;
&lt;z-col class="theme-light"&gt;2&lt;/z-col&gt;
&lt;/z-row&gt;
&lt;z-row&gt;
&lt;z-col class="theme-light"&gt;1&lt;/z-col&gt;
&lt;/z-row&gt;
&lt;/z-container&gt;

&lt;z-container&gt;
&lt;z-row&gt;
&lt;z-col class="theme-light h-305"&gt;1&lt;/z-col&gt;
&lt;/z-row&gt;
&lt;z-row&gt;
&lt;z-col class="theme-light h-145"&gt;2&lt;/z-col&gt;
&lt;/z-row&gt;
&lt;/z-container&gt;

&lt;z-container&gt;
&lt;z-row&gt;
&lt;z-col class="theme-light h-150"&gt;1&lt;/z-col&gt;
&lt;/z-row&gt;
&lt;z-row&gt;
&lt;z-col class="theme-light h-300"&gt;2&lt;/z-col&gt;
&lt;/z-row&gt;
&lt;/z-container&gt;
&lt;/z-row&gt;
&lt;/z-container&gt;</code></pre>
</div>
</div>
</z-col>
</z-row>
</z-container>
<!----------------------------------------------------------------------->
<!--- The Zen Test --->
<!----------------------------------------------------------------------->
Expand Down
Loading

0 comments on commit b771f18

Please sign in to comment.