zeva-ui / Zeva
Projects that are alternatives of or similar to Zeva
Zeva
A modern and minimalist framework for building responsive and modern frontend
Explore Zeva docs »
Report bug
·
Request feature
Table of contents
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:
- Download the zip file from here
- Clone it from here
- Use one of our two CDN links:
- npm i zeva (coming soon)
- yarn add zeva (coming soon)
- 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}">
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/zeva.css">
<!-- Or you could try to use the minified version -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.min.css">
Zip Usage: CSS files
- Unzip the file wherever you want;
- Go to
dist/css/; - 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:
- Unzip the
.zipwherever you want; - Go to
src/scss/; - Import
./abstracts/variables/variablesto 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';
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> 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">
Styling
Typography
We use Poppins as font-family, made by ITF on Google fonts
<a>link</a>
<i>italic</i>
<b>bold</b>
<u>underline</u>
<strike>strike</strike>
<small>small</small>
<sup>superscript</sup>
<sub>subscript</sub>
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
Font size
Zeva uses "rem" unit for font-size, it's relative to font-size of the root element.
$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 <p>).
.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
<button class="button">simple button</button>
<button class="button button--filled">filled button</button>
<button class="button h-border-pill">rounded button</button>
<button class="button h-border-pill button--filled">rounded filled button</button>
Button Sizes
<button class="button -size-small">small button</button>
<button class="button">normal button</button>
<button class="button -size-large">large button</button>
Button Theme
<button class="button -theme-danger">danger button</button>
<button class="button -theme-warn h-border-pill">warn button rounded</button>
<button class="button button--filled -theme-success">success button filled</button>
Button with Icons
<button class="button">Search <i class="fas fa-search"></i></button>
<button class="button -h-border-pill button--filled">Download <i class="fas fa-download"></i></button>
<button class="button -theme-danger -h-border-pill"><i class="fas fa-skull-crossbones"></i> Danger </button>
Tables
Simple Table
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Elon</td>
<td>Musk</td>
<td>47</td>
<td>South Africa, Canada, America</td>
</tr>
<tr>
<td>Mark</td>
<td>Zuckerberg</td>
<td>34</td>
<td>America</td>
</tr>
</tbody>
</table>
Filled Table with border on bottom of <td> tag
<table class="table">
<thead class="table__head--filled">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Elon</td>
<td>Musk</td>
<td>47</td>
<td>South Africa, Canada, America</td>
</tr>
<tr>
<td>Mark</td>
<td>Zuckerberg</td>
<td>34</td>
<td>America</td>
</tr>
</tbody>
</table>
Forms
Input fields
<input type="text" class="input" placeholder="default input field">
<input type="text" class="input" placeholder="another default input field">
<input type="text" class="input h-width-full" placeholder="full-width input field">
<input type="text" class="input h-width-full h-border-all" placeholder="full-width bordered input field">
<input type="text" class="input h-width-full h-weight-bold" placeholder="full-width bold input field">
<input type="text" class="input h-width-full h-weight-bold h-border-pill input--filled" placeholder="full-width bold rounded filled input field">
<input type="text" class="input h-weight-bold h-border-pill h-border-all" placeholder="bold rounded bordered input field">
<input type="text" class="input h-border-pill input--filled" placeholder="rounded filled input field">
Textarea
<textarea class="input" placeholder="this is a textarea">
<textarea class="input h-width-full" placeholder="this is another textarea but longer">
Tip: You can apply all the classes on a textarea applied on input field.
Radio Buttons
<label class="label">Radio button
<input type="radio" name="radio">
<span class="radio"></span>
</label>
<label class="label">another radio button
<input type="radio" name="radio">
<span class="radio"></span>
</label>
<label class="label">disabled radio button
<input type="radio" name="radio" disabled>
<span class="radio"></span>
</label>
Checkboxes
<label class="label">A checkbox
<input type="checkbox">
<span class="checkbox"></span>
</label>
<label class="label">Another checkbox but checked
<input type="checkbox" checked>
<span class="checkbox"></span>
</label>
<label class="label">Disabled checkbox
<input type="checkbox" disabled>
<span class="checkbox"></span>
</label>
Select
<select class="input h-weight-bold">
<option>option one</option>
<option>option two</option>
<option>option three</option>
<option>option four</option>
</select>
<select class="input h-weight-bold h-width-full">
<option>option one</option>
<option>option two</option>
<option>option three<option>
<option>option four</option>
</select>
more components coming soon...
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/.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Core Team
| imfunny | jlammer | Kvanrooyen |
|---|---|---|
 |
 |
 |
Thanks
- A special thanks for Billie Thompson, for providing a
README.mdtemplate; - Repository management inspired by the good ol' boy Bootstrap.