Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

a modern and minimalist ui framework for building responsive and modern frontends
https://github.com/zeva-ui/zeva

css css-frame framework html minimalist modern scss ui-components ui-framework

Last synced: about 2 months ago
JSON representation

a modern and minimalist ui framework for building responsive and modern frontends

Host: GitHub
URL: https://github.com/zeva-ui/zeva
Owner: zeva-ui
License: mit
Created: 2019-03-03T16:20:16.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2022-12-08T15:36:42.000Z (almost 2 years ago)
Last Synced: 2024-07-27T15:44:47.516Z (about 2 months ago)
Topics: css, css-frame, framework, html, minimalist, modern, scss, ui-components, ui-framework
Language: CSS
Homepage: https://zeva-ui.github.io
Size: 717 KB
Stars: 61
Watchers: 4
Forks: 8
Open Issues: 13
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

Zeva

A modern and minimalist framework for building responsive and modern frontend

Explore Zeva docs »

Report bug
·
Request feature

[![Version](https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000)](https://github.com/zeva-ui/zeva/releases/tag/v1.0.0) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![Discord](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/BWk5ZUb)

# Table of contents

- [Getting Started](#getting-started)
- [Styling](#styling)
- [Components](#components)
- [Contributing](#contributing)
- [Versioning](#versioning)
- [Core Team](#core-team)
- [Thanks](#thanks)

# Getting Started
## Introduction
Get started with zeva, a modern and minimalist framework for building responsive and modern front ends. Below are different ways of using zeva on your project:

1. Download the zip file from [here](https://github.com/zeva-ui/zeva/archive/v1.0.0.zip)
2. Clone it from [here](https://github.com/zeva-ui/zeva.git)
3. Use one of our two CDN links:
- [Zeva's regular CSS file](https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.css)
- [Zeva's minified CSS file](https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.min.css).
4. npm i zeva (coming soon)
5. yarn add zeva (coming soon)
6. 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:

```text
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
```html

```
Custom Theme
```html

```

## Responsive
Include this `` tag inside `` before stylesheet link to ensure proper rendering and touch zooming for all devices.
```html

```
## Usage:
### CDN Usage
Include the stylesheet `` inside ``, same for other cdn links too
```html

```

### Zip Usage: CSS files

1. Unzip the file wherever you want;
2. Go to `dist/css/`;
2. Import/Copy either the regular or minified CSS file.

```html

```

### 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.

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

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

### Zip Usage: JS file
1. Unzip the files
2. Go to dist/js/
3. Import/Copy the minified js file to your working directory
```html

```

## Theming Usage
Include the `` tag after all the content inside `<body>`
```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/js/index.min.js">
```

### Include this for using icons
Icons provided by fontawesome
```html

```

# Styling

## Typography
We use Poppins as font-family, made by [ITF](https://github.com/itfoundry) on [Google fonts](https://fonts.google.com/specimen/Poppins)

```html
link
italic
bold
underline
strike
small
^superscript
_subscript

This is a heading

```

## Font size
Zeva uses "rem" unit for font-size, it's relative to font-size of the root element.

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

# Components

## Helpers
Helpers make it easy to customize components as per your needs. Helpers can be used with mostly all components. The 'h' prefix, in the class names of helpers, means 'helper'.

`.h-border-all` - Creates a border around a component
`.h-border-pill` - Used for rounded borders
`.h-border-bottom` - Creates a border but only on bottom
`.h-display-block` - Displays a component as a block element (like `

`).
`.h-text-right` - Aligns the text to right
`.h-text-center` - Aligns the text to Center
`.h-width-full` - Sets a component width to 100% of it's parent
`.h-weight-bold` - Changes font weight to bold

## Buttons
### Different button styles
```html
simple button
filled button
rounded button
rounded filled button
```

### Button Sizes
```html
small button
normal button
large button
```
### Button Theme
```html
danger button
warn button rounded
success button filled
```

### Button with Icons
```html
Search
Download
Danger
```

## Tables
### Simple Table
```html

First Name
Last Name
Age
Country

Elon
Musk
47
South Africa, Canada, America

Mark
Zuckerberg
34
America

```

### Filled Table with border on bottom of `` tag
```html

First Name
Last Name
Age
Country

Elon
Musk
47
South Africa, Canada, America

Mark
Zuckerberg
34
America

```
## Forms
### Input fields
```html

```
```html

```
### Textarea
```html

```
**Tip: You can apply all the classes on a textarea applied on input field.**

### Radio Buttons
```html
Radio button

another radio button

disabled radio button

```
### Checkboxes
```html
A checkbox

Another checkbox but checked

Disabled checkbox

```
### Select
```html

option one
option two
option three
option four

```
more components coming soon...

# Bugs and feature requests

Have a bug or a feature request? Please first read the [issue guidelines](https://github.com/zeva-ui/zeva/wiki/Contributing-Guidelines#using-the-issue-tracker) and search for existing and closed issues. If your problem or idea is not addressed yet, [please open a new issue](https://github.com/zeva-ui/zeva/issues/new).

# Contributing

Please read through our [contributing guidelines](https://github.com/zeva-ui/zeva/wiki/Contributing-Guidelines). Included are directions for opening issues, coding standards, and notes on development.

All HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).

Editor preferences are available in the [editor config](https://github.com/zeva-ui/zeva/blob/master/.editorconfig) for easy use in common text editors. Read more and download plugins at .

# Versioning

We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/zeva-ui/zeva/tags).

# Core Team

# Thanks

* A special thanks for [Billie Thompson](https://gist.github.com/PurpleBooth), for providing a [`README.md` template](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2);
* Repository management inspired by the good ol' boy [Bootstrap](https://github.com/twbs/bootstrap).