CSS Framework Without Any Classes | no.css

No.css also defined some submenus, accordion, and conditional logic in pure CSS that doesn’t require any JS. This is a pure CSS front-end framework that helps builders shortly create fashionable net pages with virtually no lessons.

Colors and Buttons

Supported colors are:

• black
• white
• default (blue)
• success (green)
• warning (yellow)
• error (red)
• info (light gray)
• transparent

The above classes define the background color of the element to which they are applied. They also set the background color to white or black, depending on which is more appropriate.

Must Read: Lightweight, Modern and Fully Customizable CSS Framework | PunicaCSS

How to make use of it:

1. Download and load  no.min.css within the document.

<link rel="stylesheet" href="no.css" />

2. Create a responsive dropdown nav.

<nav class="black">
  <a>LOGO HERE</a>
  <label for="hamburger">&#9776;</label>
  <input type="checkbox" id="hamburger" />
  <ul>
    <li><a>Home</a></li>
    <li><a>Test1</a></li>
    <li><a>Test2</a></li>
    <li><a>Test3</a></li>
    <li>
      <a>Test4</a>
      <ul>
        <li><a>Test5</a></li>
        <li><a>Test6</a></li>
        <li><a>Test7</a></li>
        <li><a>Test8</a></li>
      </ul>
    </li>
  </ul>
  <ul>
    <li>
      <a>Login</a>
      <ul>
        <li><a>Register</a></li>
        <li><a>Lost Password</a></li>
        <li><a>Logout</a></li>
      </ul>
    </li>
  </ul>
</nav>

3. Create an alert field.

<div role="alert" class="warning">
  <span class="close"></span>
  Alert Message Here
</div>

4. Create a grid system.

<div class="columns">
   <div class="c33">
     ...
   </div>
   <div class="c66">
     ...
   </div>
</div>

5. Create an accordion class.

<div class="accordion">
  <!-- checkbox here is to maintain the state of the accordion
       its id have to be distinctive and referened by the label -->
  <input type="checkbox" id="x03">
  <label for="x03"><a>One</a></label>
  <div class="white">
    content
  </div>
</div>

6. Create a modal window.

<label role="button" for="x06">open modal</label>
  <div role="dialog">
    <input type="checkbox" id="x06"/>
    <div>
      <label class="close" for="x06"></label>
      <center class="white padded">
        <h2>Hello from modal</h2>
        content
      </center>
    </div>
  </div>

See Demo And Download

Official Website(mdipierro): Click Here

This superior jQuery/javascript plugin is developed by mdipierro. For extra Advanced Usage, please go to the official website.

Tags: Accordionclasslesscss effectsCSS Frameworkframeworkmdipierromodal dialogno css