appforge-lab / vise.css

Minimal, Lightweight and Mature CSS Framework

Vise is a minimal vanilla CSS framework capable of building consistent and reliable user experiences. With around 33kb of size, Vise is a median between light and heavy frameworks. It is essentially based on encapsulation, self-reliance and minimalism notions. Read more

Quick Demos

• For a quick showcase checkout our demo page.

• A basic responsive layout code in Vise:

  Try it on Codepen

  <div class="vise">
      <div class="row gap:8 padding:5 adapt-medium:switch">		
          <div class="box:6"><img class="width:max" src="img/youtube_tutorial.svg"></div>
          <div class="col:9 gap:2 align:middle">
            <h5>Lorem ipsum dolor sit amet</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            <a href="" class="button width:third adapt-medium:stretch">Action 1</a>
          </div>	
      </div>	
  </div>	

  

• More examples in the wiki.

Get Vise

There are many ways to get Vise:

• Install with npm

  npm install vise-beta
  

• Clone the repository

  git clone https://github.com/Appforge-lab/css-vise.git
  

• Add CDN

  <link rel="stylesheet" href="http://pppforge-ff3a.kxcdn.com/vise-beta/0.2/vise.css">

  <link rel="stylesheet" href="http://pppforge-ff3a.kxcdn.com/vise-beta/0.2/vise.min.css">

• Download Latest Release

Why Vise ?

With all frameworks there is what's special about Vise ? .

• Vise is lightweight yet not naked neither overloaded.
• Vise operates an efficient mobile-first grid system.
• Vise can be used alongside any other styling structure with no interference issues.

Introduction to Vise's Approach

Vise is not the usual CSS framework that is focused on only making styling a faster proccess, but also forged with the following notions in mind:

• Encapsulation

  Vise is self-enclosed, it doesn't get affected by previously loaded frameworks on the same HTML document. Thus it can be used alongside any other framework (Bootstrap, Foundation, Bulma, etc).

• Self-reliance

  Packed with the basic features, Vise is functional out-of-the-box. With styled HTML elements, helper classes and a smart grid system, Vise is a complete framework that can build simple and complex web contents.

• Minimalism

  Vise is meant to be minimal while offering necessary facilities to build a consistent user experience.

Read more

Examples

• To get started properly have a look on the wiki.

• A preview of some styled elements

  

• Vise with Bootstrap

• Typography, lists and table.

• Inputs

• Buttons

• Grid

For more check the wiki.

License

Designed by appforge Licensed under the MIT License.