mono/color is also hosted on Github and you can contribute to it or fork it and make your own style as you like!
Star - Forkmono/color is split into two:
Can be used alone, it includes dark & light theme with no colors, you can use only one theme too. Only default html elements with a basic button.
Good for a simple responsive blog.
@@ -110,16 +112,18 @@
Adds grids, cards, colors, useful utilities and badges.
Great for a simple documentation page or a web app.
Adds grids, cards, colors, useful utilities and badges.
Great for a simple documentation page or a web app.
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!
It uses the new CSS media prefers-color-scheme which automatically sets the theme based on what the user have in their system.
+
It uses the new CSS media prefers-color-scheme which automatically sets the theme based on what the user have in their system.
<link rel="stylesheet" href="light.css" media="">
<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
@@ -150,21 +154,24 @@ Server side
Only one theme
You can always use a one theme by just linking its file only. You can also have multiple themes on different pages. Whatever you like :3
Basic HTML structure
+ Without color:
+
<!DOCTYPE html>
<html>
- <head>
- <meta charset="utf-8">
- <title>my awesome webpage</title>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- // or any of the above methods
- <link rel="stylesheet" href="light.css" media="">
- <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
- <link rel="stylesheet" href="mono.css">
- // optional
- <link rel="stylesheet" href="color.css">
- </head>
- <body>
- <div class="container">
+
+<head>
+ <meta charset="utf-8">
+ <title>my awesome webpage</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <!-- or any of these methods: https://asvvvad.github.io/mono-color/#usage -->
+ <link rel="stylesheet" href="light.css" media="">
+ <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
+ <link rel="stylesheet" href="mono.css">
+</head>
+
+<body>
+ <div class="container">
+ <div class="content">
<header>
<h1>Header</h1>
<nav>
@@ -173,19 +180,54 @@ Basic HTML structure
<a href="#">About</a>
</nav>
</header>
- <hr>
- <div class="content">
- <p>
- 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.
- </p>
- </div>
+ <p>
+ 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.
+ </p>
+ <footer><a href="https://github.com/asvvvad/mono-color">mono/color</a> by <a href="https://asvvvad.eu.org">asvvvad</a>/2020</footer>
</div>
- </body>
+ </div>
+</body>
+
</html>
+
+ With color:
+
+ <!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>my awesome webpage</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <!-- or any of these methods: https://asvvvad.github.io/mono-color/#usage -->
+ <link rel="stylesheet" href="light.css" media="">
+ <link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
+ <link rel="stylesheet" href="mono.css">
+ <link rel="stylesheet" href="color.css">
+</head>
+
+<body>
+ <div class="container">
+ <header class="tacenter">
+ <h1>Header</h1>
+ <nav>
+ <a href="#">Home</a>
+ <a href="#">Docs</a>
+ <a href="#">About</a>
+ </nav>
+ </header>
+ <hr>
+ <div class="content">
+ <p>
+ 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.
+ </p>
+ </div>
+ <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>
+ </div>
+</body>
+
+</html>
+
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
Components:
mono
@@ -193,16 +235,16 @@ mono
Container
Containers add margin to the sides of your content and center it. This website has one main container and content wrapper that wraps everything.
-
- Header
-
-
-
+
+ Header
+
+
+
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
sides.
@@ -211,21 +253,18 @@
Header
<div class="container">
- <header>
- <h1>Header</h1>
- <nav class="">
- <a href="#">Home</a>
- <a href="#">Docs</a>
- <a href="#">About</a>
- </nav>
- </header>
- <hr>
<div class="content">
+ <header>
+ <h1>Header</h1>
+ <nav class="">
+ <a href="#">Home</a>
+ <a href="#">Docs</a>
+ <a href="#">About</a>
+ </nav>
+ </header>
+ <hr>
<p>
- 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 sides.
+ 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.
</p>
<hr>
</div>
@@ -495,20 +534,23 @@ Pill Buttons
-
+
Ghost & Primary Ghost Buttons Not recommended
- Ghost and Primary use the color and default background color of the theme so it may have a low constrast and it changes with the theme. They're meant to be showcase only maybe you'll like them or you'll have some use. If you want something readable use ones with a background color and the default & primary ones without custom text color. Use the toggle theme button to see.
-
-
-
-
-
-
-
-
-
-
+
+ Ghost and Primary use the color and default background color of the theme so it may have a low constrast and it changes with the theme. They're meant to be showcase only maybe you'll like
+ them or you'll have some use. If you want something readable use ones with a background color and the default & primary ones without custom text color. Use the toggle theme button to see.
+
+
+
+
+
+
+
+
+
+
+
Cards
Cards can be used to display info in a concise and consistent manner.
@@ -560,7 +602,7 @@ Using blockquote
As mentioned above in mono, blockquotes can be used along with other background colors.
Tip!
This is an example of an info alert
<blockquote class="bg-info b-primary white"><span class="large">Tip!</span><br>This is an example of an info alert</blockquote>
- Note!
Inline code or samps may not look nice inside of these alerts because of the reduced font-size (by using the small class) but that can be fixed by adding the normal class to the inline code.
+ Note!
Inline code or samps may not look nice inside of these alerts because of the reduced font-size (by using the small class) but that can be fixed by adding the normal class to the inline code.
<button class="pill btn bg-info white">Button Badge <span class="bg-white info p04 rounded nano"><b>500</b></span></button>