mono.css is minimal design based on black and white.

Feature

Mono.css is a minimal CSS framework (2kB).
A simple monochrome design can be applied and only a minimum style is prepared so that users can freely expand.

A monochrome filter is automatically applied to the embedded image.

Install npm, Cloning GitHub, Donwload Zip

Usage

Just load CSS 👌

<link rel="stylesheet" href="https://unpkg.com/mono.css@latest/dist/mono.min.css">

Document

The components provided in version 1 are as follows:

Tips: It is added when the developer has time to spare ... 🍨

<Header />

<header class="header">
  <div class="inner">
    <div class="header-logo">M0N0</div>
    <p>mono.css is minimal design based on <span class="marker">black</span> and white.</p>
  </div>
</header>

<Footer />

<footer class="footer">
  <div class="inner">
    <small>&copy; 2017 <span class="marker">mo</span> no.css by <a href="https://twitter.com/kokushing" target="_blank">@kokushing</a></small>
    <div class="sns">
      <a href="#"><i class="fa fa-github"></i></a>
      <a href="#"><i class="fa fa-twitter"></i></a>
    </div>
  </div>
</footer>

<Menu />

<nav class="menu">
  <div class="inner">
    <a href="#">Feature</a>
    <a href="#">Usage</a>
    <a href="#">Document</a>
    <a href="#">GitHub</a>
  </div>
</nav>

<Section />

<main class="content">
  <section class="section">
    <div class="inner">
      <h2>Feature</h2>
      <p>Mono.css is a minimal CSS framework. <br>A simple monochrome design can be applied and only a minimum style is prepared so that users can freely expand.</p>
    </div>
  </section>
</main>

<Figure />

<figure>
  <img src="https://source.unsplash.com/random" alt="">
  <figcaption>A monochrome filter is automatically applied to the embedded image.</figcaption>
</figure>

<Code />

<pre><code>&lt;link rel="stylesheet" href="https://unpkg.com/mono.css@latest/dist/mono.min.css"&gt;</code></pre>

Thank you 👋