-
Notifications
You must be signed in to change notification settings - Fork 0
/
mferwind-docs.html
283 lines (237 loc) · 13.7 KB
/
mferwind-docs.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mferwind.css">
<title>mferwind css docs</title>
</head>
<body class="monospace">
<p><a href="./index.html">Home</a></p>
<h1>mferwind css documentation</h1>
<p>see demo <a href="mferwind-demo.html">here</a>.</p>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Installation</summary>
<p>mferwind css is not yet an npm package, so you'll need to manually grab the css file from <a
href="https://github.com/the-imp0ster/mferwind-css">this</a> repo to make use of
the framework.</p>
<p>Luckily, this is a super simple process!</p>
<p>To use mferwind in your project, copy the mferwind.css file into your project folder and link to it file in
the
head element of your html:</p>
<p>
link rel="stylesheet" href="path/to/mferwind.css"
</p>
<p>Make sure you also grab the file for the sartoshi script ( SartoshiScript-Regular.otf) to include in your
project
folder!</p>
<p>Now you can start using mferwind style classes right in your html, like this:</p>
<p class="text-xs">
div class="bg-green sartoshi"
</p>
<p class="bg-green sartoshi">example text with above style classes applied</p>
<p>The example above provides a green background to the div and applies the sartoshi font family to any text
present in the div.</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Color Variables</summary>
<p>--blue: Blue mfer background color (#5dd3ff).</p>
<p>--green: Green mfer background color (#cafe80).</p>
<p>--red: Red mfer background color (#ff7077).</p>
<p>--yellow: Yellow mfer background color (#ffe260).</p>
<p>--orange: Orange mfer background color (#ffb470).</p>
<p>--graveyard: Zombie mfer background color (#7c7c7c).</p>
<p>--space: Alien mfer background color (#898989).</p>
<p>--black: Black (#000000).</p>
<p>--white: White (#FFFFFF).</p>
<p class="text-xs">* Ape bg color is identical to the yellow, so it is not included here as a separate
variable.</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Font Face Classes</summary>
<p>.sartoshi: Applies the 'sartoshi script' font family.</p>
<p>.monospace: Applies a monospace font family (Courier, etc).</p>
<p>.script: Applies a brush script/cursive font family. </p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Display Classes</summary>
<p>.flex: Sets display property to flex.</p>
<p>.flex-r: Sets flex-direction to row.</p>
<p>.flex-c: Sets flex-direction to column.</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Alignment Classes</summary>
<p>.text-center: Centers text horizontally.</p>
<p>.text-right: Aligns text to the right.</p>
<p>.text-left: Aligns text to the left.</p>
<p>.items-center: Vertically aligns flex items to the center.</p>
<p>.items-start: Aligns flex items to the start of the container's cross axis.</p>
<p>.items-end: Aligns flex items to the end of the container's cross axis.</p>
<p>.items-baseline: Aligns flex items along their baseline.</p>
<p>.items-stretch: Stretches flex items to fill the container.</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Justification Classes</summary>
<p>.between: Distributes items evenly with space between.</p>
<p>.around: Distributes items evenly with space around.</p>
<p>.evenly: Distributes items evenly with equal space around them.</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Margin Classes</summary>
<p>.m-auto: Sets all margins to auto, centering the element within its container if it's a block element with a
specified width.</p>
<p>.mx-auto: Sets the left and right margins to auto.</p>
<p>.my-auto: Sets the top and bottom margins to auto.</p>
<p>.m-0: Sets all margins to 0.</p>
<p>.m-s: Sets all margins to 5px.</p>
<p>.m-m: Sets all margins to 10px.</p>
<p>.m-l: Sets all margins to 15px.</p>
<p>.mb-0: Sets the bottom margin to 0.</p>
<p>.mb-s: Sets the bottom margin to 5px.</p>
<p>.mb-m: Sets the bottom margin to 10px.</p>
<p>.mb-l: Sets the bottom margin to 15px.</p>
<p>.mt-0: Sets the top margin to 0.</p>
<p>.mt-s: Sets the top margin to 5px.</p>
<p>.mt-m: Sets the top margin to 10px.</p>
<p>.mt-l: Sets the top margin to 15px.</p>
<p>.ml-0: Sets the left margin to 0.</p>
<p>.ml-s: Sets the left margin to 5px.</p>
<p>.ml-m: Sets the left margin to 10px.</p>
<p>.ml-l: Sets the left margin to 15px.</p>
<p>.mr-0: Sets the right margin to 0.</p>
<p>.mr-s: Sets the right margin to 5px.</p>
<p>.mr-m: Sets the right margin to 10px.</p>
<p>.mr-l: Sets the right margin to 15px.</p>
<p>.mx-0: Sets both the left and right margins to 0.</p>
<p>.mx-s: Sets both the left and right margins to 5px.</p>
<p>.mx-m: Sets both the left and right margins to 10px.</p>
<p>.mx-l: Sets both the left and right margins to 15px.</p>
<p>.my-0: Sets both the top and bottom margins to 0.</p>
<p>.my-s: Sets both the top and bottom margins to 5px.</p>
<p>.my-m: Sets both the top and bottom margins to 10px.</p>
<p>.my-l: Sets both the top and bottom margins to 15px.</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Padding Classes</summary>
<p>.p-0: Sets all padding values to 0.</p>
<p>.p-s: Sets all padding values to 5px.</p>
<p>.p-m: Sets all padding values to 10px.</p>
<p>.p-l: Sets all padding values to 15px.</p>
<p>.p-xl: Sets all padding values to 20px.</p>
<p>.pb-0: Sets the bottom padding to 0.</p>
<p>.pb-s: Sets the bottom padding to 5px.</p>
<p>.pb-m: Sets the bottom padding to 10px.</p>
<p>.pb-l: Sets the bottom padding to 15px.</p>
<p>.pb-xl: Sets the bottom padding to 20px.</p>
<p>.pt-0: Sets the top padding to 0.</p>
<p>.pt-s: Sets the top padding to 5px.</p>
<p>.pt-m: Sets the top padding to 10px.</p>
<p>.pt-l: Sets the top padding to 15px.</p>
<p>.pt-xl: Sets the top padding to 20px.</p>
<p>.pl-0: Sets the left padding to 0.</p>
<p>.pl-s: Sets the left padding to 5px.</p>
<p>.pl-m: Sets the left padding to 10px.</p>
<p>.pl-l: Sets the left padding to 15px.</p>
<p>.pl-xl: Sets the left padding to 20px.</p>
<p>.pr-0: Sets the right padding to 0.</p>
<p>.pr-s: Sets the right padding to 5px.</p>
<p>.pr-m: Sets the right padding to 10px.</p>
<p>.pr-l: Sets the right padding to 15px.</p>
<p>.pr-xl: Sets the right padding to 20px.</p>
<p>.px-0: Sets both the left and right padding to 0.</p>
<p>.px-s: Sets both the left and right padding to 5px.</p>
<p>.px-m: Sets both the left and right padding to 10px.</p>
<p>.px-l: Sets both the left and right padding to 15px.</p>
<p>.px-xl: Sets both the left and right padding to 20px.</p>
<p>.py-0: Sets both the top and bottom padding to 0.</p>
<p>.py-s: Sets both the top and bottom padding to 5px.</p>
<p>.py-m: Sets both the top and bottom padding to 10px.</p>
<p>.py-l: Sets both the top and bottom padding to 15px.</p>
<p>.py-xl: Sets both the top and bottom padding to 20px.</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Text Size Classes</summary>
<p>.text-xs: Sets the font size to 0.875rem. This size is slightly smaller than the default text size, ideal for
less prominent text.</p>
<p>.text-s: Sets the font size to 1rem, which is typically the standard text size (equivalent to 16px if the
root font-size is 16px).</p>
<p>.text-m: Sets the font size to 1.25rem. This size is slightly larger than the default, suitable for
moderately emphasized text.</p>
<p>.text-l: Sets the font size to 1.5rem. This size is larger, ideal for subheadings or important text.</p>
<p>.text-xl: Sets the font size to 2rem, which is significantly larger, suitable for main headings or key
information.</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Background Color Classes</summary>
<p>.bg---blue: Applies a blue background color (#5dd3ff).</p>
<p>.bg-green: Applies a green background color (#cafe80).</p>
<p>.bg-red: Applies a red background color (#ff7077).</p>
<p>.bg-yellow: Applies a yellow background color (#ffe260).</p>
<p>.bg-orange: Applies an orange background color (#ffb470).</p>
<p>.bg-graveyard: Applies the zombie gray background color (#7c7c7c).</p>
<p>.bg-space: Applies the alien grey background color (#898989).</p>
<p>.bg-black: Applies a black background color (#000000).</p>
<p>.bg-white: Applies a white background color (#FFFFFF).</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Text Color Classes</summary>
<p>.text---blue: Sets the text color to the blue mfer background color (#5dd3ff).</p>
<p>.text-green: Sets the text color to the green mfer background color (#cafe80).</p>
<p>.text-red: Sets the text color to the red mfer background color (#ff7077).</p>
<p>.text-yellow: Sets the text color to the yellow mfer background color (#ffe260).</p>
<p>.text-orange: Sets the text color to the orange mfer background color (#ffb470).</p>
<p>.text-graveyard: Sets the text color to the zombie mfer background grey (#7c7c7c).</p>
<p>.text-space: Sets the text color to the alien mfer background grey (#898989).</p>
<p>.text-black: Sets the text color to black (#000000).</p>
<p>.text-white: Sets the text color to white (#FFFFFF).</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Border Size Classes</summary>
<p>.border-xs: Applies a border with a thickness of 1px.</p>
<p>.border-s: Applies a border with a thickness of 5px.</p>
<p>.border-m: Applies a border with a thickness of 8px.</p>
<p>.border-l: Applies a border with a thickness of 10px.</p>
<p>.border-xl: Applies a border with a thickness of 13px.</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Border Style Classes</summary>
<p>.solid: Applies a solid border style.</p>
<p>.dotted: Applies a dotted border style.</p>
<p>.dashed: Applies a dashed border style.</p>
<p>.double: Applies a double border style.</p>
<p>.groove: Applies a groove border style, giving the appearance of a carved line.</p>
<p>.ridge: Applies a ridge border style, giving the appearance of a protruding line.</p>
<p>.inset: Applies an inset border style, giving the appearance of an embedded element.</p>
<p>.outset: Applies an outset border style, giving the appearance of a raised element.</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Border Color Classes</summary>
<p>.border---blue: Applies a blue border color (#5dd3ff).</p>
<p>.border-green: Applies a green border color (#cafe80).</p>
<p>.border-red: Applies a red border color (#ff7077).</p>
<p>.border-yellow: Applies a yellow border color (#ffe260).</p>
<p>.border-orange: Applies an orange border color (#ffb470).</p>
<p>.border-graveyard: Applies the zombie grey color to the border (#7c7c7c).</p>
<p>.border-space: Applies the alien grey color to the border (#898989).</p>
<p>.border-black: Applies a black border color (#000000).</p>
<p>.border-white: Applies a white border color (#FFFFFF).</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Border Radius Classes</summary>
<p>.radius-s: Applies a 5px border radius on all corners.</p>
<p>.radius-m: Applies a 10px border radius on all corners.</p>
<p>.radius-l: Applies a 15px border radius on all corners.</p>
<p>.radius-spicy: Applies a (2px 20px) border radius.</p>
<p>.radius-round: Applies a 50% border radius.</p>
</details>
<details class="border-xs solid border-graveyard my-l px-m radius-s">
<summary>Animation Classes</summary>
<p>.rotate: Applies a 360 degree, 5-second infinite clockwise rotation.</p>
<p>.pulse: Applies a cute 2-second infinite grow-shrink animation.</p>
<p>.bounce: Applies a 1-second infinite smooth bouncing animation.</p>
<p>.fade-in: Applies a single 1-second animation from invisible to visible.</p>
<p>.slide-in: Applies a single 1-second horizontal translation from the left to the item's final location on the
page.</p>
</details>
</body>
</html>