{"id":13608359,"url":"https://github.com/zeva-ui/zeva","last_synced_at":"2025-04-12T17:31:18.626Z","repository":{"id":41554842,"uuid":"173598966","full_name":"zeva-ui/zeva","owner":"zeva-ui","description":"a modern and minimalist ui framework for building responsive and modern frontends","archived":false,"fork":false,"pushed_at":"2022-12-08T15:36:42.000Z","size":734,"stargazers_count":61,"open_issues_count":13,"forks_count":8,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-07T14:38:26.043Z","etag":null,"topics":["css","css-frame","framework","html","minimalist","modern","scss","ui-components","ui-framework"],"latest_commit_sha":null,"homepage":"https://zeva-ui.github.io","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zeva-ui.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-03T16:20:16.000Z","updated_at":"2024-06-07T22:46:44.000Z","dependencies_parsed_at":"2023-01-25T14:46:01.337Z","dependency_job_id":null,"html_url":"https://github.com/zeva-ui/zeva","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeva-ui%2Fzeva","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeva-ui%2Fzeva/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeva-ui%2Fzeva/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zeva-ui%2Fzeva/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zeva-ui","download_url":"https://codeload.github.com/zeva-ui/zeva/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248605049,"owners_count":21132100,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-frame","framework","html","minimalist","modern","scss","ui-components","ui-framework"],"created_at":"2024-08-01T19:01:26.664Z","updated_at":"2025-04-12T17:31:16.840Z","avatar_url":"https://github.com/zeva-ui.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\r\n    \u003ca href=\"https://zeva-ui.github.io/\"\u003e\r\n        \u003cimg src=\"https://raw.githubusercontent.com/zeva-ui/zeva-ui.github.io/master/assets/image/zeva.png\" alt=\"Zeva logo\" width=\"72\" height=\"72\"\u003e\r\n    \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\u003ch3 align=\"center\"\u003eZeva\u003c/h3\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n    A modern and minimalist framework for building responsive and modern frontend\r\n    \u003cbr\u003e\r\n    \u003ca href=\"https://zeva-ui.github.io/\"\u003e\u003cstrong\u003eExplore Zeva docs »\u003c/strong\u003e\u003c/a\u003e\r\n    \u003cbr\u003e\r\n    \u003cbr\u003e\r\n    \u003ca href=\"https://github.com/zeva-ui/zeva/issues/new\"\u003eReport bug\u003c/a\u003e\r\n    ·\r\n    \u003ca href=\"https://github.com/zeva-ui/zeva/issues/new\"\u003eRequest feature\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n[![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)\r\n\r\n# Table of contents\r\n\r\n- [Getting Started](#getting-started)\r\n- [Styling](#styling)\r\n- [Components](#components)\r\n- [Contributing](#contributing)\r\n- [Versioning](#versioning)\r\n- [Core Team](#core-team)\r\n- [Thanks](#thanks)\r\n\r\n# Getting Started\r\n## Introduction\r\nGet 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:\r\n\r\n1. Download the zip file from [here](https://github.com/zeva-ui/zeva/archive/v1.0.0.zip)\r\n2. Clone it from [here](https://github.com/zeva-ui/zeva.git)\r\n3. Use one of our two CDN links:\r\n    - [Zeva's regular CSS file](https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.css) \r\n    - [Zeva's minified CSS file](https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.min.css).\r\n4. npm i zeva (coming soon)\r\n5. yarn add zeva (coming soon)\r\n6. bower install zeva (coming soon)\r\n\r\n## Content\r\n\r\nWithin the downloaded file you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations:\r\n\r\n```text\r\nzeva/\r\n└── dist/\r\n    └── css/\r\n        ├── zeva.css\r\n        ├── zeva.css.map\r\n        ├── zeva.min.css\r\n        └── zeva.min.css.map\r\n    └── js/\r\n        └── index.min.js\r\n```\r\n\r\n## Theming:\r\nZeva Theming helps you Customize Zeva for changing the overall look of your Project.\r\nLight Theme\r\n```html\r\n\u003cbody class=\"body-light\"\u003e\r\n```\r\nCustom Theme\r\n```html\r\n\u003cbody class=\"body --bg-{your background color here} --text-{your main text color here}\"\u003e\r\n```\r\n\r\n## Responsive\r\nInclude this `\u003cmeta\u003e` tag inside `\u003chead\u003e` before stylesheet link to ensure proper rendering and touch zooming for all devices.\r\n```html\r\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\r\n```\r\n## Usage:\r\n### CDN Usage\r\nInclude the stylesheet `\u003clink\u003e` inside `\u003chead\u003e`, same for other cdn links too\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.css\"\u003e\r\n\r\n\u003c!-- Or you could try to use the minified version --\u003e\r\n\r\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/css/zeva.min.css\"\u003e\r\n```\r\n\r\n### Zip Usage: CSS files\r\n\r\n1. Unzip the file wherever you want;\r\n2. Go to `dist/css/`;\r\n2. Import/Copy either the regular or minified CSS file.\r\n\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"./dist/css/zeva.css\"\u003e\r\n\r\n\u003c!-- Or you could try to use the minified version --\u003e\r\n\r\n\u003clink rel=\"stylesheet\" href=\"./dist/css/zeva.min.css\"\u003e\r\n```\r\n\r\n\r\n### Zip Usage: Sass files\r\n\r\nBefore anything, you should import our variables. To do so, follow these steps:\r\n\r\n1. Unzip the `.zip` wherever you want;\r\n2. Go to `src/scss/`;\r\n3. Import `./abstracts/variables/variables` to the top of your main Sass file. **Always remember to import variables, before anything!**\r\n\r\nNow, you're free to import any `.scss` file that you need.\r\n\r\n``` scss\r\n// Zeva's required files\r\n@import './abstracts/variables/variables';\r\n\r\n// Chosen components\r\n@import './components/button',\r\n        './components/form',\r\n        './components/table';\r\n```\r\n\r\n### Zip Usage: JS file\r\n1. Unzip the files\r\n2. Go to dist/js/\r\n3. Import/Copy the minified js file to your working directory\r\n```html\r\n\u003cscript type=\"text/javascript\" src=\"index.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n## Theming Usage\r\nInclude the `\u003cscript\u003e` tag after all the content inside `\u003cbody\u003e`\r\n```html\r\n\u003cscript type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/gh/zeva-ui/zeva/dist/js/index.min.js\"\u003e\u003c/script\u003e\r\n```\r\n\r\n### Include this for using icons\r\nIcons provided by fontawesome\r\n```html\r\n\u003clink rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.7.2/css/all.css\" integrity=\"sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr\" crossorigin=\"anonymous\"\u003e\r\n```\r\n\r\n# Styling\r\n\r\n## Typography\r\nWe use Poppins as font-family, made by [ITF](https://github.com/itfoundry) on [Google fonts](https://fonts.google.com/specimen/Poppins)\r\n\r\n```html\r\n    \u003ca\u003elink\u003c/a\u003e\r\n    \u003ci\u003eitalic\u003c/i\u003e\r\n    \u003cb\u003ebold\u003c/b\u003e\r\n    \u003cu\u003eunderline\u003c/u\u003e\r\n    \u003cstrike\u003estrike\u003c/strike\u003e\r\n    \u003csmall\u003esmall\u003c/small\u003e\r\n    \u003csup\u003esuperscript\u003c/sup\u003e\r\n    \u003csub\u003esubscript\u003c/sub\u003e\r\n\r\n    \u003ch1\u003eThis is a heading\u003c/h1\u003e\r\n    \u003ch2\u003eThis is a heading\u003c/h2\u003e\r\n    \u003ch3\u003eThis is a heading\u003c/h3\u003e\r\n    \u003ch4\u003eThis is a heading\u003c/h4\u003e\r\n    \u003ch5\u003eThis is a heading\u003c/h5\u003e\r\n    \u003ch6\u003eThis is a heading\u003c/h6\u003e\r\n```\r\n\r\n## Font size\r\nZeva uses \"rem\" unit for font-size, it's relative to font-size of the root element.\r\n\r\n```sass\r\n$font-size: 1rem; /* normal font */\r\n$font-size-small: 0.8rem; /* smaller font */\r\n$font-size-big: 1.2rem;  /* bigger font */\r\n```\r\n\r\n# Components\r\n\r\n## Helpers\r\nHelpers 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'.\r\n\r\n`.h-border-all` - Creates a border around a component\r\n`.h-border-pill` - Used for rounded borders\r\n`.h-border-bottom` - Creates a border but only on bottom\r\n`.h-display-block` - Displays a component as a block element (like `\u003cp\u003e`).\r\n`.h-text-right` - Aligns the text to right\r\n`.h-text-center` - Aligns the text to Center\r\n`.h-width-full` - Sets a component width to 100% of it's parent\r\n`.h-weight-bold` - Changes font weight to bold\r\n\r\n## Buttons\r\n### Different button styles\r\n```html\r\n\u003cbutton class=\"button\"\u003esimple button\u003c/button\u003e\r\n\u003cbutton class=\"button button--filled\"\u003efilled button\u003c/button\u003e\r\n\u003cbutton class=\"button h-border-pill\"\u003erounded button\u003c/button\u003e\r\n\u003cbutton class=\"button h-border-pill button--filled\"\u003erounded filled button\u003c/button\u003e\r\n```\r\n\r\n### Button Sizes\r\n```html\r\n\u003cbutton class=\"button -size-small\"\u003esmall button\u003c/button\u003e\r\n\u003cbutton class=\"button\"\u003enormal button\u003c/button\u003e\r\n\u003cbutton class=\"button -size-large\"\u003elarge button\u003c/button\u003e\r\n```\r\n### Button Theme\r\n```html\r\n\u003cbutton class=\"button -theme-danger\"\u003edanger button\u003c/button\u003e\r\n\u003cbutton class=\"button -theme-warn h-border-pill\"\u003ewarn button rounded\u003c/button\u003e\r\n\u003cbutton class=\"button button--filled -theme-success\"\u003esuccess button filled\u003c/button\u003e\r\n```\r\n\r\n### Button with Icons\r\n```html\r\n\u003cbutton class=\"button\"\u003eSearch \u0026nbsp; \u003ci class=\"fas fa-search\"\u003e\u003c/i\u003e\u003c/button\u003e\r\n\u003cbutton class=\"button -h-border-pill button--filled\"\u003eDownload \u0026nbsp; \u003ci class=\"fas fa-download\"\u003e\u003c/i\u003e\u003c/button\u003e\r\n\u003cbutton class=\"button -theme-danger -h-border-pill\"\u003e\u003ci class=\"fas fa-skull-crossbones\"\u003e\u003c/i\u003e \u0026nbsp; Danger \u003c/button\u003e\r\n```\r\n\r\n## Tables\r\n### Simple Table\r\n```html\r\n\u003ctable class=\"table\"\u003e\r\n    \u003cthead\u003e\r\n        \u003ctr\u003e\r\n            \u003cth\u003eFirst Name\u003c/th\u003e\r\n            \u003cth\u003eLast Name\u003c/th\u003e\r\n            \u003cth\u003eAge\u003c/th\u003e\r\n            \u003cth\u003eCountry\u003c/th\u003e\r\n        \u003c/tr\u003e\r\n    \u003c/thead\u003e\r\n    \u003ctbody\u003e\r\n    \u003ctr\u003e\r\n        \u003ctd\u003eElon\u003c/td\u003e\r\n        \u003ctd\u003eMusk\u003c/td\u003e\r\n        \u003ctd\u003e47\u003c/td\u003e\r\n        \u003ctd\u003eSouth Africa, Canada, America\u003c/td\u003e\r\n    \u003c/tr\u003e\r\n    \u003ctr\u003e\r\n        \u003ctd\u003eMark\u003c/td\u003e\r\n        \u003ctd\u003eZuckerberg\u003c/td\u003e\r\n        \u003ctd\u003e34\u003c/td\u003e\r\n        \u003ctd\u003eAmerica\u003c/td\u003e\r\n    \u003c/tr\u003e\r\n    \u003c/tbody\u003e\r\n\u003c/table\u003e\r\n```\r\n\r\n### Filled Table with border on bottom of `\u003ctd\u003e` tag\r\n```html\r\n\u003ctable class=\"table\"\u003e\r\n    \u003cthead class=\"table__head--filled\"\u003e\r\n        \u003ctr\u003e\r\n            \u003cth\u003eFirst Name\u003c/th\u003e\r\n            \u003cth\u003eLast Name\u003c/th\u003e\r\n            \u003cth\u003eAge\u003c/th\u003e\r\n            \u003cth\u003eCountry\u003c/th\u003e\r\n        \u003c/tr\u003e\r\n    \u003c/thead\u003e\r\n    \u003ctbody\u003e\r\n        \u003ctr\u003e\r\n            \u003ctd\u003eElon\u003c/td\u003e\r\n            \u003ctd\u003eMusk\u003c/td\u003e\r\n            \u003ctd\u003e47\u003c/td\u003e\r\n            \u003ctd\u003eSouth Africa, Canada, America\u003c/td\u003e\r\n        \u003c/tr\u003e\r\n        \u003ctr\u003e\r\n            \u003ctd\u003eMark\u003c/td\u003e\r\n            \u003ctd\u003eZuckerberg\u003c/td\u003e\r\n            \u003ctd\u003e34\u003c/td\u003e\r\n            \u003ctd\u003eAmerica\u003c/td\u003e\r\n        \u003c/tr\u003e\r\n    \u003c/tbody\u003e\r\n\u003c/table\u003e\r\n```\r\n## Forms\r\n### Input fields\r\n```html\r\n\u003cinput type=\"text\" class=\"input\" placeholder=\"default input field\"\u003e\r\n\u003cinput type=\"text\" class=\"input\" placeholder=\"another default input field\"\u003e\r\n```\r\n```html\r\n\u003cinput type=\"text\" class=\"input h-width-full\" placeholder=\"full-width input field\"\u003e\r\n\u003cinput type=\"text\" class=\"input h-width-full h-border-all\" placeholder=\"full-width bordered input field\"\u003e\r\n\u003cinput type=\"text\" class=\"input h-width-full h-weight-bold\" placeholder=\"full-width bold input field\"\u003e\r\n\u003cinput type=\"text\" class=\"input h-width-full h-weight-bold h-border-pill input--filled\" placeholder=\"full-width bold rounded filled input field\"\u003e\r\n\u003cinput type=\"text\" class=\"input h-weight-bold h-border-pill h-border-all\" placeholder=\"bold rounded bordered input field\"\u003e\r\n\u003cinput type=\"text\" class=\"input h-border-pill input--filled\" placeholder=\"rounded filled input field\"\u003e\r\n```\r\n### Textarea\r\n```html\r\n\u003ctextarea class=\"input\" placeholder=\"this is a textarea\"\u003e\r\n\u003ctextarea class=\"input h-width-full\" placeholder=\"this is another textarea but longer\"\u003e\r\n```\r\n**Tip: You can apply all the classes on a textarea applied on input field.**\r\n\r\n### Radio Buttons\r\n```html\r\n\u003clabel class=\"label\"\u003eRadio button\r\n    \u003cinput type=\"radio\" name=\"radio\"\u003e\r\n    \u003cspan class=\"radio\"\u003e\u003c/span\u003e\r\n\u003c/label\u003e\r\n\u003clabel class=\"label\"\u003eanother radio button\r\n    \u003cinput type=\"radio\" name=\"radio\"\u003e\r\n    \u003cspan class=\"radio\"\u003e\u003c/span\u003e\r\n\u003c/label\u003e\r\n\u003clabel class=\"label\"\u003edisabled radio button\r\n    \u003cinput type=\"radio\" name=\"radio\" disabled\u003e\r\n    \u003cspan class=\"radio\"\u003e\u003c/span\u003e\r\n\u003c/label\u003e\r\n```\r\n### Checkboxes\r\n```html\r\n\u003clabel class=\"label\"\u003eA checkbox\r\n        \u003cinput type=\"checkbox\"\u003e\r\n        \u003cspan class=\"checkbox\"\u003e\u003c/span\u003e\r\n    \u003c/label\u003e\r\n    \u003clabel class=\"label\"\u003eAnother checkbox but checked\r\n        \u003cinput type=\"checkbox\" checked\u003e\r\n        \u003cspan class=\"checkbox\"\u003e\u003c/span\u003e\r\n\u003c/label\u003e\r\n\u003clabel class=\"label\"\u003eDisabled checkbox\r\n        \u003cinput type=\"checkbox\" disabled\u003e\r\n        \u003cspan class=\"checkbox\"\u003e\u003c/span\u003e\r\n\u003c/label\u003e\r\n```\r\n### Select\r\n```html\r\n\u003cselect class=\"input h-weight-bold\"\u003e\r\n    \u003coption\u003eoption one\u003c/option\u003e\r\n    \u003coption\u003eoption two\u003c/option\u003e\r\n    \u003coption\u003eoption three\u003c/option\u003e\r\n    \u003coption\u003eoption four\u003c/option\u003e\r\n\u003c/select\u003e\r\n\r\n\u003cselect class=\"input h-weight-bold h-width-full\"\u003e\r\n    \u003coption\u003eoption one\u003c/option\u003e\r\n    \u003coption\u003eoption two\u003c/option\u003e\r\n    \u003coption\u003eoption three\u003coption\u003e\r\n    \u003coption\u003eoption four\u003c/option\u003e\r\n\u003c/select\u003e\r\n```\r\nmore components coming soon...\r\n\r\n# Bugs and feature requests\r\n\r\nHave 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).\r\n\r\n# Contributing\r\n\r\nPlease 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.\r\n\r\nAll HTML and CSS should conform to the [Code Guide](https://github.com/mdo/code-guide), maintained by [Mark Otto](https://github.com/mdo).\r\n\r\nEditor 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 \u003chttps://editorconfig.org/\u003e.\r\n\r\n\r\n# Versioning\r\n\r\nWe use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/zeva-ui/zeva/tags). \r\n\r\n# Core Team\r\n\r\n| **imfunny** | **jlammer** | **Kvanrooyen** |\r\n| :---: |:---:| :---:|\r\n| [![imfunny](https://avatars0.githubusercontent.com/u/36105478?v=3\u0026s=70)](https://github.com/imfunniee) | [![jlammer](https://avatars0.githubusercontent.com/u/35262827?v=3\u0026s=70)](https://github.com/JLammeer) | [![Kvanrooyen](https://avatars1.githubusercontent.com/u/17731202?v=3\u0026s=70)](https://github.com/Kvanrooyen)  |\r\n\r\n\r\n# Thanks\r\n\r\n* A special thanks for [Billie Thompson](https://gist.github.com/PurpleBooth), for providing a [`README.md` template](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2);\r\n* Repository management inspired by the good ol' boy [Bootstrap](https://github.com/twbs/bootstrap).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeva-ui%2Fzeva","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzeva-ui%2Fzeva","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzeva-ui%2Fzeva/lists"}