vise-beta

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 not

Usage no npm install needed!

<script type="module">
  import viseBeta from 'https://cdn.skypack.dev/vise-beta';
</script>

README

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

GitHub tag (latest by date) GitHub file size in bytes GitHub license

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

For more check the wiki.

License

Designed by appforge Licensed under the MIT License.