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 Fork

mono/color is split into two:

mono.css 630b<1.5kb

dark.css 83b

light.css 83b

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 736b1.9kb

total 1.3kb3.5kb

Adds grids, cards, colors, useful utilities and badges.

Note! These are gzipped sizes. Hover to see the minified size

Usage:

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">
    <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">
            <header>
                <h1>Header</h1>
                <nav>
                    <a href="#">Home</a>
                    <a href="#">Docs</a>
                    <a href="#">About</a>
                </nav>
            </header>
            <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 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>

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/#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/mono-color.min.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 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>

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>
            <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 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>
<h2>Heading</h2>
<h3>Heading</h3>
<h2>Heading</h2>
<h5>Heading</h5>
<h6>Heading</h6>
<p>This is a paragraph. The font family is Courier New/monospace.
<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>
<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)
   __  ____  __/\/\__  __   ___
  /  \/ __ \ \ _  _ / /  \ |   \
 / /\ \__ \ \/\'  '/\/ /\ \|    | 
/_/  \____/\__/\__/\__/  \_____/

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:

See more in color

Buttons

Buttons are created with either a button or an anchor, they both must have the btn class.

Link button

Primary buttons are made with the primary class

Horizontal Rules

Horizontal Rules are useful for dividing up content. Their color is the same as same default border color which change with theme. More in color.

Extra

Since mono support light and dark themes it also provide these two helper classes:

primary class can be used on anything from buttons, inputs, divs, code ect. It's meant to be a reverse color.

primary

default class can be used on anything from buttons, inputs, divs, code ect. It's meant to be the default color.

default

Blockquotes with background can be made by adding primary or default or other background colors in color - It can also be used to make alerts

This is a blockquote with default background

This is a blockquote with primary background

color

Grid

Grids are defined on a 12 column scale. Each col will take up equal width if no width number is specified. They automatically collapse on mobile to take up the full viewport. Go ahead, try it!

1 col

11 col

2 col

10 col

3 col

9 col

4 col

8 col

5 col

7 col

6 col

Utilities

Size classes:

mega large normal small nano

Spacing and alignment:

tacenter

taleft

taright

The above classes set the alignment of text within an element

.m0

m0 Removes margins on all sides

m Adds 1rem(10px) margin on all sides

.mh.mh

mh Adds 1rem margin on the left and right sides

.mv

mv Adds 1rem margin on the top and bottom sides

p Adds 1rem padding on all sides

.p04

p04 Adds .04rem padding on all sides

.ph

p Adds 1rem padding on the left and right sides

.ph04

p04 Adds .04rem padding on the left and right sides

.pv

p Adds 1rem padding on the top and bottom sides

.pv04

p04 Adds .04rem padding on the top and bottom sides

inline makes elements inline (stick to each other) by removing margins on both side

w-100

w-50

w-100 and w-50 sets the width to 100% and 50% respecitively

vh-100 takes the full width of it's container and the full height of it's screen. To use for full-page landing place it outside any container div.

vc class centers a div vertically in the full-page div

Colors

Text Colors

accent info success warning error black white gray

Background Colors

bg-accent

bg-info

bg-success

bg-warning

bg-error

bg-black

bg-white

bg-gray

Border Colors

Since mono/color is borderless by default a add a border use border and a b-color like in these:

border b-accent

border b-info

border b-success

border b-warning

border b-error

border b-black

border b-white

border b-gray

border b-primary

border b-default

Horizontal Rules

border colors can be used for horizontal rules as well

Colorful Buttons

These are made using the background colors and color classes above. The ghost ones for example uses accent instead of bg-accent.

Rounded Buttons

<button class="rounded btn primary">Primary Button</button>

<button class="rounded btn bg-accent white">Accent Button</button>

Pill Buttons

<button class="pill btn">Default Button</button>

<button class="pill btn bg-accent white">Accent Button</button>

Ghost & Primary Ghost Buttons Not recommended

These are other possible combinations, they're not bloat. They use 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.

More Forms

mono/color is built to be moduar so you can extend inputs just as easy as you extend buttons or anything else. Same classes are used to create round and colored form elements.

Cards

Cards can be used to display info in a concise and consistent manner.

Simple Card

Here is some text that generally describes the card, or something about it.

Cards are usually nested within grids to create powerful display systems, like below.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Alerts

These are easily created using a div that have a text & background color class, small class to set the text size right (default is bigger and meant for increasing readability on content) and an extra rounded class to make it look nice:

Oh no!
This is an example of an error alert

Success!
This is an example of a success alert

<div class="bg-error white p rounded small">
    <span class="large">Oh no!</span><br>This is an example of an error alert
</div>

Warning! is an example of a warning alert

<div class="bg-warning primary p rounded black"">
    Warning! <span class="small">is an example of a warning alert</span>
</div>

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.

Badges

Another small and helpful elements are badges.
As with alerts, they are made by combining a couple classes:

Note!
pill class is used for these, the rounded class while it can also do it, it's meant for alerts as only pill have white-space: nowrap; which makes it not break.

Heading Badge New!

<h4>Heading Badge <span class="bg-warning white p04 rounded nano"> New!</span></h4>

<button class="pill btn bg-info white">Button Badge <span class="bg-white info p04 rounded nano"><b>500</b></span></button>

I try to make this page as reader oriented as I can but I'm not perfect I miss things a lot so if you have any suggestions or fixes I'll be happy if you open an issue on Github ^^