Browse Source

docs(shortcode/grid): update examples, link to resources

Josh Habdas 10 months ago
parent
commit
d99d409117
Signed by: Josh Habdas <jhabdas@protonmail.com> GPG Key ID: B148B31154C75A74
2 changed files with 48 additions and 45 deletions
  1. 12
    9
      docs/content/shortcode/cell.md
  2. 36
    36
      docs/content/shortcode/grid.md

+ 12
- 9
docs/content/shortcode/cell.md View File

@@ -8,13 +8,8 @@ custom_attributes = []
8 8
 snippets_used = ["grid", "card", "button"]
9 9
 +++
10 10
 
11
-<style>.margin-reset { margin: 0; }</style>
12
-{{< hackcss-card header="Quick Example" >}}
13
-  {{< hackcss-grid class="margin-reset" >}}
14
-    {{< hackcss-cell class="-4of12" text="4" />}}
15
-    {{< hackcss-cell class="-4of12" text="4" />}}
16
-    {{< hackcss-cell class="-4of12" text="4" />}}
17
-  {{< /hackcss-grid >}}
11
+Contained by [Grid](../grid) with three columns of equal size:
12
+
18 13
 {{< highlight html "linenos=inline" >}}
19 14
 {{</* hackcss-grid >}}
20 15
   {{< hackcss-cell class="-4of12" text="4" />}}
@@ -22,7 +17,12 @@ snippets_used = ["grid", "card", "button"]
22 17
   {{< hackcss-cell class="-4of12" text="4" />}}
23 18
 {{< /hackcss-grid */>}}
24 19
 {{< /highlight >}}
25
-{{< /hackcss-card >}}
20
+
21
+{{< hackcss-grid class="margin-reset" >}}
22
+  {{< hackcss-cell class="-4of12" text="4" />}}
23
+  {{< hackcss-cell class="-4of12" text="4" />}}
24
+  {{< hackcss-cell class="-4of12" text="4" />}}
25
+{{< /hackcss-grid >}}
26 26
 
27 27
 With two columns of odd size:
28 28
 
@@ -138,4 +138,7 @@ Enclosing [Cards](../card/) with various [Buttons](../button/) inside:
138 138
   {{< /hackcss-cell >}}
139 139
 {{< /hackcss-grid >}}
140 140
 
141
-See the {{< external text="hackcss" href="https://hackcss.egoist.moe/" />}} docs for full list of flexbox modifiers available.
141
+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:
142
+
143
+- {{< external "https://philipwalton.github.io/solved-by-flexbox/" "Solved by Flexbox" />}} for cleaner, hack-free CSS
144
+- {{< external "https://www.w3.org/TR/css-flexbox-1/" "CSS Flexible Box Layout Module" />}} for Level 1 spec on W3C

+ 36
- 36
docs/content/shortcode/grid.md View File

@@ -8,13 +8,8 @@ custom_attributes = []
8 8
 snippets_used = ["cell", "card", "button"]
9 9
 +++
10 10
 
11
-<style>.margin-reset { margin: 0; }</style>
12
-{{< hackcss-card header="Quick Example" >}}
13
-  {{< hackcss-grid class="margin-reset" >}}
14
-    {{< hackcss-cell class="-4of12" text="4" />}}
15
-    {{< hackcss-cell class="-4of12" text="4" />}}
16
-    {{< hackcss-cell class="-4of12" text="4" />}}
17
-  {{< /hackcss-grid >}}
11
+Containing three [Cell](../cell) of equal size:
12
+
18 13
 {{< highlight html "linenos=inline" >}}
19 14
 {{</* hackcss-grid >}}
20 15
   {{< hackcss-cell class="-4of12" text="4" />}}
@@ -22,7 +17,12 @@ snippets_used = ["cell", "card", "button"]
22 17
   {{< hackcss-cell class="-4of12" text="4" />}}
23 18
 {{< /hackcss-grid */>}}
24 19
 {{< /highlight >}}
25
-{{< /hackcss-card >}}
20
+
21
+{{< hackcss-grid class="unset-margin" >}}
22
+  {{< hackcss-cell class="-4of12" text="4" />}}
23
+  {{< hackcss-cell class="-4of12" text="4" />}}
24
+  {{< hackcss-cell class="-4of12" text="4" />}}
25
+{{< /hackcss-grid >}}
26 26
 
27 27
 With two columns of odd size:
28 28
 
@@ -72,34 +72,6 @@ With 12 columns:
72 72
   {{< hackcss-cell class="-1of12" text="1" />}}
73 73
 {{< /hackcss-grid >}}
74 74
 
75
-Aligning three images with space around:
76
-
77
-```html
78
-{{</* hackcss-grid class="-around" >}}
79
-  {{< hackcss-cell class="-2of12" >}}
80
-    <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">
81
-  {{< /hackcss-cell >}}
82
-  {{< hackcss-cell class="-2of12" >}}
83
-    <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">
84
-  {{< /hackcss-cell >}}
85
-  {{< hackcss-cell class="-2of12" >}}
86
-    <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">
87
-  {{< /hackcss-cell >}}
88
-{{< /hackcss-grid */>}}
89
-```
90
-
91
-{{< hackcss-grid class="-around" >}}
92
-  {{< hackcss-cell class="-2of12" >}}
93
-    <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">
94
-  {{< /hackcss-cell >}}
95
-  {{< hackcss-cell class="-2of12" >}}
96
-    <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">
97
-  {{< /hackcss-cell >}}
98
-  {{< hackcss-cell class="-2of12" >}}
99
-    <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">
100
-  {{< /hackcss-cell >}}
101
-{{< /hackcss-grid >}}
102
-
103 75
 Enclosing [Cards](../card/) with various [Buttons](../button/) inside:
104 76
 
105 77
 ```html
@@ -166,6 +138,34 @@ Enclosing [Cards](../card/) with various [Buttons](../button/) inside:
166 138
   {{< /hackcss-cell >}}
167 139
 {{< /hackcss-grid >}}
168 140
 
141
+Aligning three [SVG Favicons]({{< relref "svg-favicon" >}}) using `-around` modifier:
142
+
143
+```html
144
+{{</* hackcss-grid class="-around" >}}
145
+  {{< hackcss-cell class="-2of12" >}}
146
+    <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">
147
+  {{< /hackcss-cell >}}
148
+  {{< hackcss-cell class="-2of12" >}}
149
+    <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">
150
+  {{< /hackcss-cell >}}
151
+  {{< hackcss-cell class="-2of12" >}}
152
+    <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">
153
+  {{< /hackcss-cell >}}
154
+{{< /hackcss-grid */>}}
155
+```
156
+
157
+{{< hackcss-grid class="-around" >}}
158
+  {{< hackcss-cell class="-2of12" >}}
159
+    <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">
160
+  {{< /hackcss-cell >}}
161
+  {{< hackcss-cell class="-2of12" >}}
162
+    <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">
163
+  {{< /hackcss-cell >}}
164
+  {{< hackcss-cell class="-2of12" >}}
165
+    <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">
166
+  {{< /hackcss-cell >}}
167
+{{< /hackcss-grid >}}
168
+
169 169
 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:
170 170
 
171 171
 - {{< external "https://philipwalton.github.io/solved-by-flexbox/" "Solved by Flexbox" />}} for cleaner, hack-free CSS

Loading…
Cancel
Save