You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<p>Can be used alone, it includes dark & light theme with no colors, you can use only <ahref="#one-theme">one theme</a> too. Only default html elements with a basic button.<br>Good for a simple responsive blog.
<pclass="white">Adds <ahref="#grid">grids</a>, <ahref="#cards">cards</a>, <ahref="#colors">colors</a>, <ahref="#utilities">useful utilities</a> and <ahref="#badges">badges</a>.<br>Great for a simple documentation page or a web app.</p></div>
115
+
<pclass="white">Adds <ahref="#grid">grids</a>, <ahref="#cards">cards</a>, <ahref="#colors">colors</a>, <ahref="#utilities">useful utilities</a> and <ahref="#badges">badges</a>.<br>Great for a simple documentation page or a web app.</p>
116
+
</div>
114
117
</div>
115
-
<divclass="rounded p bg-warning small black mv"><spanclass="large">Note!</span><br>These are the minified sizes only and they're not gzipped. The sizes should be even smaller when compressed.</blockquote>
118
+
</div>
119
+
<divclass="rounded p bg-warning small black mv"><spanclass="large">Note!</span><br>These are the minified sizes only and they're not gzipped. The sizes should be even smaller when compressed.</blockquote>
116
120
</div>
117
121
<hr>
118
122
<h1id="usage">Usage: </h1>
119
123
<p>Light/Dark theming with mono/color is made easy! The themes are made into two separate CSS files so that you can use it the way you like!</p>
120
124
<h2>Examples</h2>
121
125
<h3>Automatic with fallback to light for unsupported browsers <spanclass="p04 small pill bg-success"><aclass="white" target="_blank" href="https://caniuse.com/#feat=prefers-color-scheme">support</a></span></h3>
122
-
<p>It uses the new CSS media <code>prefers-color-scheme</code> which automatically sets the theme based on what the user have in their system.<br>
126
+
<p>It uses the new CSS media <code>prefers-color-scheme</code> which automatically sets the theme based on what the user have in their system.<br></p>
123
127
<divclass="bg-info white b-primary p rounded small"><spanclass="large">Tip!</span><br>Switch the <b>dark</b> in <b>(prefers-color-scheme: dark)</b> with <b>light</b> and <b>dark.css</b> with <b>light.css</b> to default the fallback to dark theme</div>
@@ -173,36 +180,71 @@ <h4 id="html-structure">Basic HTML structure</h4>
173
180
<a href="#">About</a>
174
181
</nav>
175
182
</header>
176
-
<hr>
177
-
<div class="content">
178
-
<p>
179
-
This is the content which is inthe content wrapper of the container.
180
-
It's meant for main content like an article.
181
-
It's more indented than the container.
182
-
On smaller screens, the container's margin will be removed
183
-
so the horizontal line will touch the sides.
184
-
</p>
185
-
</div>
183
+
<p>
184
+
This is the content which is inthe content wrapper of the container. It's meant for main content like an article. It's more indented than the container. On smaller screens, the container's margin will be removed so the horizontal line will touch the sides.
185
+
</p>
186
+
<footer><a href="https://github.com/asvvvad/mono-color">mono/color</a> by <a href="https://asvvvad.eu.org">asvvvad</a>/2020</footer>
This is the content which is inthe content wrapper of the container. It's meant for main content like an article. It's more indented than the container. On smaller screens, the container's margin will be removed so the horizontal line (and everything outside content) will touch the screen. It's recommended to center the text that's outside to prevent that.
223
+
</p>
224
+
</div>
225
+
<footer class="default tacenter p"><a href="https://github.com/asvvvad/mono-color">mono/color</a> by <a href="https://asvvvad.eu.org">asvvvad</a>/2020</footer>
226
+
</div>
227
+
</body>
228
+
229
+
</html></code></pre>
230
+
</details>
189
231
<p>Now you can explore the components of each part. The container/content divs are neccessary if you want the page to be responsive and have your content centered</p>
190
232
<h1>Components:</h1>
191
233
<h1id="mono">mono</h1>
192
234
<hr>
193
235
<h2id="container">Container</h2>
194
236
<p>Containers add margin to the sides of your content and center it. This website has one main container and content wrapper that wraps everything.</p>
195
237
<divclass="container">
196
-
<headerclass="">
197
-
<h1>Header</h1>
198
-
<navclass="">
199
-
<ahref="#">Home</a>
200
-
<ahref="#">Docs</a>
201
-
<ahref="#">About</a>
202
-
</nav>
203
-
</header>
204
-
<hr>
205
238
<divclass="content">
239
+
<headerclass="">
240
+
<h1>Header</h1>
241
+
<navclass="">
242
+
<ahref="#">Home</a>
243
+
<ahref="#">Docs</a>
244
+
<ahref="#">About</a>
245
+
</nav>
246
+
</header>
247
+
<hr>
206
248
<p>
207
249
This is the content which is in the content wrapper of the container. It's meant for main content like an article. It's more indented than the container. On smaller screens, the container's margin will be removed so the horizontal line will touch the
208
250
sides.
@@ -211,21 +253,18 @@ <h1>Header</h1>
211
253
</div>
212
254
</div>
213
255
<pre><code><div class="container">
214
-
<header>
215
-
<h1>Header</h1>
216
-
<nav class="">
217
-
<a href="#">Home</a>
218
-
<a href="#">Docs</a>
219
-
<a href="#">About</a>
220
-
</nav>
221
-
</header>
222
-
<hr>
223
256
<div class="content">
257
+
<header>
258
+
<h1>Header</h1>
259
+
<nav class="">
260
+
<a href="#">Home</a>
261
+
<a href="#">Docs</a>
262
+
<a href="#">About</a>
263
+
</nav>
264
+
</header>
265
+
<hr>
224
266
<p>
225
-
This is the content which is in the content wrapper of the container. It's meant for main content like an
226
-
article.
227
-
It's more indented than the container. On smaller screens, the container's margin will be removed so the
228
-
horizontal line will touch the sides.
267
+
This is the content which is inthe content wrapper of the container. It's meant for main content like an article. It's more indented than the container. On smaller screens, the container's margin will be removed so the horizontal line (and everything outside content) will touch the screen. It's recommended to center the text that's outside to prevent that.
<h2>Ghost & Primary Ghost Buttons <spanclass="bg-error white small p04 pill">Not recommended</span></h2>
500
539
<details>
501
-
<divclass="p bg-warning small black"><p>Ghost and Primary use the color and default background color of the theme so it may have a <b><em>low constrast</em></b> and it <em>changes</em> with the theme. They're meant to be <em><b>showcase only</b></em> maybe you'll like them or you'll have some use. If you want something <em><b>readable</b></em> use ones with a background color and the default & primary ones <em><b>without</b></em> custom text color. Use the toggle theme button to see.</p></div>
<p>Ghost and Primary use the color and default background color of the theme so it may have a <b><em>low constrast</em></b> and it <em>changes</em> with the theme. They're meant to be <em><b>showcase only</b></em> maybe you'll like
542
+
them or you'll have some use. If you want something <em><b>readable</b></em> use ones with a background color and the default & primary ones <em><b>without</b></em> custom text color. Use the toggle theme button to see.</p>
<p>As mentioned above in mono, blockquotes can be used along with other <ahref="#background-colors">background colors</a>.</p>
561
603
<blockquoteclass="bg-info b-primary white small"><spanclass="large">Tip!</span><br>This is an example of an info alert</blockquote>
562
604
<pre><code><blockquote class="bg-info b-primary white"><span class="large">Tip!</span><br>This is an example of an info alert</blockquote></code></pre>
563
-
<blockquoteclass="bg-warning b-primary black small"><spanclass="large">Note!</span><br>Inline code or samps may not look nice inside of these alerts because of the reduced font-size (by using the <code>small</code> class) but that can be fixed by adding the <codeclass="normal">normal</code> class to the inline code.</blockquote>
605
+
<blockquoteclass="bg-warning b-primary black small"><spanclass="large">Note!</span><br>Inline code or samps may not look nice inside of these alerts because of the reduced font-size (by using the <code>small</code> class) but that can be fixed by adding the <codeclass="normal">normal</code>class to the inline code.</blockquote>
<divclass="small">Phew! That was long. I'm making this in my free time to use personally but decided to make it available hoping it will help others. If you like it don't forget to join the <ahref="https://github.com/asvvvad/mono-color/stargazers">Stargazers</a> ^^<br>If you find something with it or have suggestions don't hesitate to open an issue on <ahref="https://github.com/asvvvad/mono-color/issues" target="_blank">Github.</a>
577
-
<footerclass="default tacenter"><ahref="https://github.com/asvvvad/mono-color">mono/color</a> by <ahref="https://asvvvad.eu.org">asvvvad</a>/2020</footer>
578
-
618
+
<divclass="small">Phew! That was long. I'm making this in my free time to use personally but decided to make it available hoping it will help others. If you like it don't forget to join the <ahref="https://github.com/asvvvad/mono-color/stargazers">Stargazers</a> ^^<br>If you find something with it or have suggestions don't hesitate to open an issue on <ahref="https://github.com/asvvvad/mono-color/issues" target="_blank">Github.</a></div>
619
+
</div>
620
+
<footerclass="default tacenter"><ahref="https://github.com/asvvvad/mono-color">mono/color</a> by <ahref="https://asvvvad.eu.org">asvvvad</a>/2020</footer>
0 commit comments