mono/color
+mono/color is a small, simple and beautiful CSS framework built with responsivity, readability, and a dual-theme in mind.
+It's perfect for a blog or a documentation site and can be used for anything else aswell.
It's very responsive and looks neat on any resolution.
Based on Starveling and lit,
+ providing only necessary elements while still looking great and being customizable.
mono/color is split into two:
+ +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 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. +
++
<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">
+ <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.
+ </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 Courier New/monospace. For the headings 1 to 3 it's 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 +This is a nested quote inside a nested quote ++
— 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 | +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:
+ +Buttons
+Buttons are created with either a button or an anchor that have btn class.
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.
++
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.
default class can be used on anything from buttons, inputs, divs, code ect. It's meant to be the default color.
Blockquotes with background can be made by adding primary or default or other
+ background colors in color
This is a blockquote with a background
+
This is a blockquote with a 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!
+Utilities
+Size classes:
+ mega + large + normal + small + nano +Spacing and alignment:
+The above classes set the alignment of text within an element
+m0 Removes margins on all sides
+ m Adds 1rem(10px) margin on all sides
+ mh Adds 1rem margin on the left and right sides+
mv Adds 1rem margin on the top and bottom sides+
p Adds 1rem padding on all sides
+ p04 Adds .04rem padding on all sides+
p Adds 1rem padding on the left and right sides+
p04 Adds .04rem padding on the left and right sides+
p Adds 1rem padding on the top and bottom sides+
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 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 divColors
+Text Colors
+ accent + info + success + warning + error + black + white + gray +Background Colors
+Border Colors
+Since mono/color is borderless by default a add a border use border and a b-color like in these:
Horizontal Rules
+border colors can be used for horizontal rules as well
++
+
+
+
+
+
+
+
+
Colorful Buttons
+These are made using the background colors classes above. The ghost ones for example uses accent instead of bg-accent.
A primary button can have be a ghost button as well just
+ by adding the color tag
Ghost Buttons
+ + + + + +Ghost Primary Buttons
+ + + + + +Rounded Buttons
+ + + + + ++ + + + + +
+ + + + + +
Pill Buttons
+ + + + + ++ + + + + +
+ + + + + +
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 if you wish.
This is an example of an error alert +
+
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><div class="bg-warning primary p rounded small black">
+ This is an example of a warning alert
+</div>Using blockquote
+As mentioned above in mono, blockquotes can be used along with other background colors.
+This is an example of an info alert+
<blockquote class="bg-info border b-primary white">This is an example of an info alert</blockquote>Badges
+Another small and helpful elements are badges.
As with alerts, they are made by combining a couple classes:
Heading Badge New!
+<h4>Heading Badge <span class="bg-warning white p04 rounded small"> New!</span></h4><button class="pill btn bg-info white">Button Badge <span class="bg-white info p04 rounded small"><b>500</b></span></button>