getting started

Introduction

Get started with zeva, a modern and minimalist framework for building responsive and modern Frontends. Below are different ways of using zeva on your project

Download the zip file

or clone it

git clone https://github.com/zeva-ui/zeva.git

CDN

CSS

https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.css
            
https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.min.css

NPM

npm i zeva (coming soon)

Yarn

yarn add zeva (coming soon)

Bower

bower install zeva (coming soon)

Content

Within the downloaded file you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations

                zeva/
                └── dist/
                    └── css/
                        ├── zeva.css
                        ├── zeva.css.map
                        ├── zeva.min.css
                        └── zeva.min.css.map
                        └── js/
                        └── index.min.js

Theming

Zeva Theming helps you Customize Zeva for changing the overall look of your Project.

Light Theme

                    <body class="body-light">

Custom Theme

                    <body class="body --bg-{your background color here} --text-{your main text color here}">
Referece to Usage for using Theming

Responsive

Include this <meta> tag inside <head> before stylesheet link to ensure proper rendering and touch zooming for all devices.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Usage

CDN Usage

Include the stylesheet <link> inside <head>, same for other cdn links too

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/index.min.css">

Zip Usage: CSS files

  • Unzip the files
  • Go to dist/css/
  • Import/Copy either the regular or minified CSS file to your working directory

<link rel="stylesheet" href="zeva.css">

Zip Usage: JS file

  • Unzip the files
  • Go to dist/js/
  • Import/Copy the minified js file to your working directory

<script type="text/javascript" src="index.min.js"></script>

Theming Usage

Include the script <script> tag after all the content inside <body>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/js/index.min.js"></script>

Include this for using icons

Icons provided by fontawesome

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">