mono/colorv1.1
-mono/color is a small yet full-featured, simple and beautiful CSS-only framework built with responsivity, readability, modularity, and a dual-theme in mind.
+mono/colorv1.2
+mono/color is a very small yet full-featured, simple and beautiful CSS-only framework built with responsivity, readability, modularity, and a dual-theme in mind.
It's perfect for a blog or a documentation site and can be used for anything else as well.
It's very responsive and looks neat on any resolution.
Based on Starveling and lit,
providing only necessary elements while still looking great.
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 + Star Forkmono/color is split into two:
mono.css 1.5kb
+mono.css 630b<1.5kb + +
dark.css 83b
light.css 83b
-total 1.6kb
+total 796b1.6kb + +
Can be used alone, it includes dark & light theme with no colors, only default html elements with a basic button.
color.css 1.9kb
-total 3.5kb
+color.css + + 736b1.9kb + +
+total 1.3kb3.5kb + +
Adds grids, cards, colors, useful utilities and badges.
These are the minified sizes only and they're not gzipped. The sizes should be even smaller when compressed. +
Usage:
-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!
-Examples
-Automatic with fallback to light for unsupported browsers support
-It uses the new CSS media prefers-color-scheme which automatically sets the theme based on what the user have in their system.
Switch the dark in (prefers-color-scheme: dark) with light and dark.css with light.css to default the fallback to dark theme
<link rel="stylesheet" href="light.css" media="">
-<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">
-Javascript
-Make the media attribute empty for the theme you want to be default
-<link rel="stylesheet" href="light.css" media="">
-<link rel="stylesheet" href="dark.css" media="none">Now the javascript should be something like this that is called by clicking a button for example
-function toggleTheme() {
- var dark = document.getElementById("dark-theme");
- var light = document.getElementById("light-theme");
- if (light.media == "none") {
- light.media = ""
- dark.media = "none"
- } else {
- light.media = "none"
- dark.media = ""
- }
-}Server side
-This is very basic, you set a variable theme for example that contains the current theme. And let a user submit a request that can toggle it for example.
For example, this is how it would be done in PHP
-<?php
- $theme = "dark";
- echo "<link rel='stylesheet' href='".$theme.".css'>"; Note this is just to give you the idea, use a templating system like Plates to render your html as it will make it easier.
-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:
+The following code snippets will use jsDelivr CDN but you can download and host the css files whereever you like. If you download the zip the following templates comes with + it. +
mono only
<!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="https://cdn.jsdelivr.net/gh/asvvvad/mono-color@1.2/light.min.css" media="">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/mono-color@1.2/dark.min.css" media="(prefers-color-scheme: dark)">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/mono-color@1.2/mono.min.css">
</head>
-
<body>
<div class="container">
<div class="content">
@@ -184,31 +169,29 @@ Without color:
</nav>
</header>
<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.
+ 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 everything
+ outside content will touch the screen. It's recommended to center the text that's outside to prevent that.
</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>
</div>
</body>
-
</html>With color:
+mono+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">
+ <!-- or any of these methods: https://asvvvad.github.io/mono-color/#switching-theme -->
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/mono-color@1.2/light.min.css" media="">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/mono-color@1.2/dark.min.css" media="(prefers-color-scheme: dark)">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/asvvvad/mono-color@1.2/monocolor.min.css">
</head>
-
<body>
<div class="container">
<header class="tacenter">
@@ -222,39 +205,61 @@ With color:
<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.
+ 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 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
--
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
- --
- 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.
--
<div class="container">
+
+
+
+ Switching Dark/Light theme: The templates above use one method but mono/color allows many others!
+
+ 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!
+ Automatic with fallback to light for unsupported browsers support
+ It uses the new CSS media prefers-color-scheme which automatically sets the theme based on what the user have in their system.
+ Tip!
Switch the dark in (prefers-color-scheme: dark) with light and dark.css with light.css to default the fallback to dark theme
+ <link rel="stylesheet" href="light.min.css" media="">
+<link rel="stylesheet" href="dark.min.css" media="(prefers-color-scheme: dark)">
+
+ Javascript
+ Make the media attribute empty for the theme you want to be default
+ <link rel="stylesheet" href="light.min.css" media="">
+<link rel="stylesheet" href="dark.min.css" media="none">
+ Now the javascript should be something like this that is called by clicking a button for example
+ function toggleTheme() {
+ var dark = document.getElementById("dark-theme");
+ var light = document.getElementById("light-theme");
+ if (light.media == "none") {
+ light.media = ""
+ dark.media = "none"
+ } else {
+ light.media = "none"
+ dark.media = ""
+ }
+}
+ Server side
+ This is very basic, you set a variable theme for example that contains the current theme. And let a user submit a request that can toggle it for example.
+ For example, this is how it would be done in PHP
+ <?php
+ $theme = "dark";
+ echo "<link rel='stylesheet' href='".$theme.".css'>";
+ Note this is just to give you the idea, use a templating system like Plates to render your html as it will make it easier.
+ 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
+
+
+ Components:
+
+ 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.
+ <div class="container">
<div class="content">
<header>
<h1>Header</h1>
@@ -266,21 +271,21 @@ Header
</header>
<hr>
<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.
+ 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 everything outside content) will touch the screen. It's recommended to center the text that's outside to prevent that.
</p>
<hr>
</div>
</div>
- Typography
- Heading 1
- Heading 2
- Heading 3
- Heading 4
- Heading 5
- Heading 6
- This is a paragraph. The font family is monospace and for the headings 1 to 3 it's Sans-Serif.
- Some bold text. Italics also looks nice. You can underline things you feel are important. has styles that override the default heading styles, including margin.
- <h1>Heading</h1>
+ Typography
+ Heading 1
+ Heading 2
+ Heading 3
+ Heading 4
+ Heading 5
+ Heading 6
+ This is a paragraph. The font family is monospace and for the headings 1 to 3 it's Sans-Serif.
+ Some bold text. Italics also looks nice. You can underline things you feel are important. has styles that override the default heading styles, including margin.
+ <h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h2>Heading</h2>
@@ -290,73 +295,73 @@ Heading 6
<b>Some bold text.</b> <i>Italics also looks nice.</i>
You can <u>underline</u> things you feel are important.
mono has styles that override the default heading styles, including margin.</p>
- Code Block
- inline code; inline samp; and kbd: ctrl+c
- Code blocks are code tags wrapped with pre tags. They automatically overflow to become scrollable on smaller displays
- <pre><code>
+ Code Block
+ inline code; inline samp; and kbd: ctrl c
+ Code blocks are code tags wrapped with pre tags. They automatically overflow to become scrollable on smaller displays
+ <pre><code>
<h2>Code Block Example</h2>
</code></pre>
- Samp blocks are similar but intended for output moslty so mono/color sets the line-height tighter to show it better (for example, ASCII art)
- /\ (hi i'm v dude)
+ Samp blocks are similar but intended for output moslty so mono/color sets the line-height tighter to show it better (for example, ASCII art)
+ /\ (hi i'm v dude)
__ ____ __/\/\__ __ ___
/ \/ __ \ \ _ _ / / \ | \
/ /\ \__ \ \/\' '/\/ /\ \| |
/_/ \____/\__/\__/\__/ \_____/
- Blockquote
- You're not a fucking moron if you use default browser styles you can do what ever the fuck you want who cares
-
— Eleanor Roosevelt
- This is a nested quote
-
— Me
- Yes, I totally took that from this site. I always used it as a reference.
-
— Also me
+ Blockquote
+ You're not a fucking moron if you use default browser styles you can do what ever the fuck you want who cares
+
— Eleanor Roosevelt
+ This is a nested quote
+
— Me
+ Yes, I totally took that from this site. I always used it as a reference.
+
— Also me
+
-
-
- Lists
- Lists are default HTML lists. I tried a few things but figured the defaults are all that's needed (imo).
-
-
- - First Item
- -
- Second Item
-
- - Sub Item 1
- - Sub Item 2
-
-
- - Third Item
-
- Tables
- Tables looks nice too:
-
-
- Name
- Username
- email
- secondary email
-
-
-
- Lorem Ipsum
- lorem
- email@example.com
- email@example.org
-
-
- Lorem Ipsum
- lorem
- email@example.com
- email@example.org
-
-
-
- Forms
- Just like the code blocks the form is also scrollable when the elements take too much horizontal space
-
There is also an option to use grids and the card class if you prefer.
color have w-100 and w-50 classes to set the inputs to full and half width respectively.
-
To get the connected inputs look use the inline class on the inputs just as in here.
- This is a regular HTML form:
-