yigitcolakoglu
/
fr1nge.xyz
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
11 Commits
1 Branch
8.0 MiB
Tree: cd7086914e
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'cd7086914e'
${ noResults }
fr1nge.xyz/themes/after-dark/docs/content/shortcode/grid.md

176 lines
8.3 KiB
Raw Normal View History

Hugo Added
4 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. +++
  2. title = "Grid"
  3. description = "Display a responsive grid with cells."
  4. categories = ["experience"]
  5. tags = []
  6. html_attributes = ["class"]
  7. custom_attributes = []
  8. snippets_used = ["cell", "card", "button"]
  9. [[copyright]]
  10.   owner = "Josh Habdas"
  11.   date = "2019"
  12.   license = "agpl-3.0-or-later"
  13. +++
  14. 

  15. Containing three [Cell](../cell) of equal size:
  16. 

  17. {{< highlight html "linenos=inline" >}}
  18. {{</* hackcss-grid >}}
  19.   {{< hackcss-cell class="-4of12" text="4" />}}
  20.   {{< hackcss-cell class="-4of12" text="4" />}}
  21.   {{< hackcss-cell class="-4of12" text="4" />}}
  22. {{< /hackcss-grid */>}}
  23. {{< /highlight >}}
  24. 

  25. {{< hackcss-grid class="unset-margin" >}}
  26.   {{< hackcss-cell class="-4of12" text="4" />}}
  27.   {{< hackcss-cell class="-4of12" text="4" />}}
  28.   {{< hackcss-cell class="-4of12" text="4" />}}
  29. {{< /hackcss-grid >}}
  30. 

  31. With two columns of odd size:
  32. 

  33. ```html
  34. {{</* hackcss-grid >}}
  35.   {{< hackcss-cell class="-4of12" text="4" />}}
  36.   {{< hackcss-cell class="-8of12" text="8" />}}
  37. {{< /hackcss-grid */>}}
  38. ```
  39. 

  40. {{< hackcss-grid class="example" >}}
  41.   {{< hackcss-cell class="-4of12" text="4" />}}
  42.   {{< hackcss-cell class="-8of12" text="8" />}}
  43. {{< /hackcss-grid >}}
  44. 

  45. With 12 columns:
  46. 

  47. ```html
  48. {{</* hackcss-grid >}}
  49.   {{< hackcss-cell class="-1of12" text="1" />}}
  50.   {{< hackcss-cell class="-1of12" text="1" />}}
  51.   {{< hackcss-cell class="-1of12" text="1" />}}
  52.   {{< hackcss-cell class="-1of12" text="1" />}}
  53.   {{< hackcss-cell class="-1of12" text="1" />}}
  54.   {{< hackcss-cell class="-1of12" text="1" />}}
  55.   {{< hackcss-cell class="-1of12" text="1" />}}
  56.   {{< hackcss-cell class="-1of12" text="1" />}}
  57.   {{< hackcss-cell class="-1of12" text="1" />}}
  58.   {{< hackcss-cell class="-1of12" text="1" />}}
  59.   {{< hackcss-cell class="-1of12" text="1" />}}
  60.   {{< hackcss-cell class="-1of12" text="1" />}}
  61. {{< /hackcss-grid */>}}
  62. ```
  63. 

  64. {{< hackcss-grid >}}
  65.   {{< hackcss-cell class="-1of12" text="1" />}}
  66.   {{< hackcss-cell class="-1of12" text="1" />}}
  67.   {{< hackcss-cell class="-1of12" text="1" />}}
  68.   {{< hackcss-cell class="-1of12" text="1" />}}
  69.   {{< hackcss-cell class="-1of12" text="1" />}}
  70.   {{< hackcss-cell class="-1of12" text="1" />}}
  71.   {{< hackcss-cell class="-1of12" text="1" />}}
  72.   {{< hackcss-cell class="-1of12" text="1" />}}
  73.   {{< hackcss-cell class="-1of12" text="1" />}}
  74.   {{< hackcss-cell class="-1of12" text="1" />}}
  75.   {{< hackcss-cell class="-1of12" text="1" />}}
  76.   {{< hackcss-cell class="-1of12" text="1" />}}
  77. {{< /hackcss-grid >}}
  78. 

  79. Enclosing [Cards](../card/) with various [Buttons](../button/) inside:
  80. 

  81. ```html
  82. {{</* hackcss-grid >}}
  83.   {{< hackcss-cell class="-4of12" >}}
  84.     {{< hackcss-card header="Step 1" >}}
  85.       {{< hackcss-button type="primary" isblock="true" isghost="true" >}}
  86.         <svg id="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
  87.           <path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30"></path>
  88.         </svg>&nbsp;&nbsp;Download
  89.       {{< /hackcss-button >}}
  90.     {{< /hackcss-card >}}
  91.   {{< /hackcss-cell >}}
  92.   {{< hackcss-cell class="-4of12" >}}
  93.     {{< hackcss-card header="Step 2" >}}
  94.       {{< hackcss-button type="info" isblock="true" isghost="true" >}}
  95.         <svg id="i-code" aria-labelledby="source-label" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
  96.           <path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
  97.         </svg>&nbsp;&nbsp;Install
  98.       {{< /hackcss-button >}}
  99.     {{< /hackcss-card >}}
  100.   {{< /hackcss-cell >}}
  101.   {{< hackcss-cell class="-4of12" >}}
  102.     {{< hackcss-card header="Step 3" >}}
  103.       {{< hackcss-button type="success" isblock="true" isghost="true" >}}
  104.         <svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
  105.           <path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
  106.           <path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
  107.         </svg>&nbsp;&nbsp;Profit
  108.       {{< /hackcss-button >}}
  109.     {{< /hackcss-card >}}
  110.   {{< /hackcss-cell >}}
  111. {{< /hackcss-grid */>}}
  112. ```
  113. 

  114. {{< hackcss-grid >}}
  115.   {{< hackcss-cell class="-4of12" >}}
  116.     {{< hackcss-card header="Step 1" >}}
  117.       {{< hackcss-button type="primary" isblock="true" isghost="true" >}}
  118.         <svg id="i-download" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
  119.           <path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30"></path>
  120.         </svg>&nbsp;&nbsp;Download
  121.       {{< /hackcss-button >}}
  122.     {{< /hackcss-card >}}
  123.   {{< /hackcss-cell >}}
  124.   {{< hackcss-cell class="-4of12" >}}
  125.     {{< hackcss-card header="Step 2" >}}
  126.       {{< hackcss-button type="info" isblock="true" isghost="true" >}}
  127.         <svg id="i-code" aria-labelledby="source-label" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
  128.           <path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />
  129.         </svg>&nbsp;&nbsp;Install
  130.       {{< /hackcss-button >}}
  131.     {{< /hackcss-card >}}
  132.   {{< /hackcss-cell >}}
  133.   {{< hackcss-cell class="-4of12" >}}
  134.     {{< hackcss-card header="Step 3" >}}
  135.       {{< hackcss-button type="success" isblock="true" isghost="true" >}}
  136.         <svg id="i-creditcard" viewBox="0 0 32 32" width="24" height="24" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
  137.           <path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />
  138.           <path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />
  139.         </svg>&nbsp;&nbsp;Profit
  140.       {{< /hackcss-button >}}
  141.     {{< /hackcss-card >}}
  142.   {{< /hackcss-cell >}}
  143. {{< /hackcss-grid >}}
  144. 

  145. Aligning three [SVG Favicons]({{< relref "svg-favicon" >}}) using `-around` modifier:
  146. 

  147. ```html
  148. {{</* hackcss-grid class="-around" >}}
  149.   {{< hackcss-cell class="-2of12" >}}
  150.     <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23f00'/%3E%3C/svg%3E">
  151.   {{< /hackcss-cell >}}
  152.   {{< hackcss-cell class="-2of12" >}}
  153.     <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='lime'/%3E%3C/svg%3E">
  154.   {{< /hackcss-cell >}}
  155.   {{< hackcss-cell class="-2of12" >}}
  156.     <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%2300f'/%3E%3C/svg%3E">
  157.   {{< /hackcss-cell >}}
  158. {{< /hackcss-grid */>}}
  159. ```
  160. 

  161. {{< hackcss-grid class="-around" >}}
  162.   {{< hackcss-cell class="-2of12" >}}
  163.     <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23f00'/%3E%3C/svg%3E">
  164.   {{< /hackcss-cell >}}
  165.   {{< hackcss-cell class="-2of12" >}}
  166.     <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='lime'/%3E%3C/svg%3E">
  167.   {{< /hackcss-cell >}}
  168.   {{< hackcss-cell class="-2of12" >}}
  169.     <img src="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%2300f'/%3E%3C/svg%3E">
  170.   {{< /hackcss-cell >}}
  171. {{< /hackcss-grid >}}
  172. 

  173. See the {{< external text="hackcss" href="https://hackcss.egoist.moe/" />}} docs for full list of flexbox modifiers available. Reference the following resources for additional help:
  174. 

  175. - {{< external "https://philipwalton.github.io/solved-by-flexbox/" "Solved by Flexbox" />}} for cleaner, hack-free CSS
  176. - {{< external "https://www.w3.org/TR/css-flexbox-1/" "CSS Flexible Box Layout Module" />}} for Level 1 spec on W3C