/zeva

yet another minimalist ui framework

Primary LanguageCSSMIT LicenseMIT

Zeva logo

Zeva

Yet another minimalist UI framework
Explore Zeva docs »

Report bug · Request feature

Table of contents

Getting Started

You have the following options to get zeva:

  1. Download a zip file, or clone it from here;
  2. Use one of our two CDN links:

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:

zeva/
└── dist/
    └── css/
        ├── zeva-inverse.css
        ├── zeva-inverse.css.map
        ├── zeva-inverse.min.css
        ├── zeva-inverse.min.css.map
        ├── zeva.css
        ├── zeva.css.map
        ├── zeva.min.css
        └── zeva.min.css.map

CDN Usage:

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

<!-- Or you could try to use the minified version -->

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

Zip Usage: CSS files

  1. Unzip the file wherever you want;
  2. Go to dist/css/;
  3. Import/Copy either the regular or minified CSS file.
<link rel="stylesheet" href="./dist/css/zeva.css">

<!-- Or you could try to use the minified version -->

<link rel="stylesheet" href="./dist/css/zeva.min.css">

Zip Usage: Sass files

Before anything, you should import our variables. To do so, follow these steps:

  1. Unzip the .zip wherever you want;
  2. Go to src/scss/;
  3. Import ./abstracts/variables/variables to the top of your main Sass file. Always remember to import variables, before anything!

Now, you're free to import any .scss file that you need.

// Zeva's required files
@import './abstracts/variables/variables';

// Chosen components
@import './components/button',
        './components/form',
        './components/table';

Bugs and feature requests

Have a bug or a feature request? Please first read the issue guidelines and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

Contributing

Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.

All HTML and CSS should conform to the Code Guide, maintained by Mark Otto.

Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at https://editorconfig.org/.

Styling Guide

Basic stuff

$main-color:#fff;
$danger: rgb(236, 47, 79);
$font: 'Poppins', sans-serif;
$background:#000;

Font size

$font-size: 1rem; /* normal font */
$font-size-small: 0.8rem; /* smaller font */
$font-size-big: 1.2rem;  /* bigger font */

Basic Styling

yourcomponent {
    font-family:$font;
    background:$background;
    color:$main-color;
    padding:0px;
    margin:0px;
    border-radius: 50% !important; /* for rounded corners*/
    font-weight: bold; /* for bold text */
}

Basic Styling for Input Tags

yourInputComponent {
    outline: none;
    padding: 14px 35px;
    margin:10px 15px;
}

Community

Get updates on Zeva's development and chat with the project maintainers and community members.

  • Join our Discord server (under development).
  • Join the official Slack room (under development).

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Core Team

Thanks

License

License: MIT