Introduction

InvisCSS is designed to bring you the core of a good Css library without the cruft. That is, it's not filled with styles that are only used by developers and designers for their own websites. The default styling is minimal so that it's easier to extend and modify, by you. Unlike bootstrap and most CSS templates, which requires a developer to excessively 'opt-in' by specifying classes all over the place, InvisCSS uses a few simple 'opt-in' classes at the base of an HTML branch. InvisCSS is for real sites:

Cleaner HTML

Smarter CSS

The InvisCSS Difference

InvisCSS in built with the idea of Minimal Opt-In. This means that with only one or two class statements in higher elements of an HTML structure is all that is required to leverage CSS correctly in a cascading manner. The result is remarkably more managable HTML and easier-to-maintain css overrides, especially for colors, fonts and layouts

A simple button

bootstrap:

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

pure-css:

<button class="pure-button pure-button-primary">Primary Button</button>

InvisCSS:

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

A navigation menu

Not convinced? Perhaps a navigation bar at the top of a page will make it obvious:

This is what a basic navbar in looks like in bootstrap:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

This is the equivalent InvisCSS:

<nav class="nav menubar" >
  <span class="nav-toggle" data-target=".nav.menubar"></span>
  <a href="#">Brand</a>
  <ul> <!--Add class="right" or "center" here to push the menu right -->
  <li><a href="#">Link</a></li>
  <li><a href="#">Dropdown</a>
  	<ul>
      <li><a href="#">Action</a></li>
      <li><a href="#">Another action</a></li>
      <li><a href="#">Something else here</a></li>
      <li><hr></li>
      <li><a href="#">Separated link</a></li>
      <li><hr></li>
      <li><a href="#">One more separated link</a></li>
    </ul>
  </li>
  </ul>
</nav>

Note that multiple targets can be targetted too, using class="nav-toggle" data-target="#selector1,#selector2 .nav" as an example. See the menu and sidebar being controlled in the Admin Demo.

Also check out the other demo pages