Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wearegenki/ui
A friendly UI framework which aims to be straightforward, intuitive, and high performance.
https://github.com/wearegenki/ui
css css-grid design-system marko postcss vue wearegenki
Last synced: 3 days ago
JSON representation
A friendly UI framework which aims to be straightforward, intuitive, and high performance.
- Host: GitHub
- URL: https://github.com/wearegenki/ui
- Owner: WeAreGenki
- License: apache-2.0
- Archived: true
- Created: 2017-08-14T00:42:50.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-17T23:30:25.000Z (over 6 years ago)
- Last Synced: 2025-01-14T00:42:14.258Z (10 days ago)
- Topics: css, css-grid, design-system, marko, postcss, vue, wearegenki
- Language: CSS
- Homepage: https://ui.wearegenki.com
- Size: 3.26 MB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
**IMPORTANT: This project has been deprecated, please use [`minna-ui`](https://github.com/WeAreGenki/minna-ui), a new UI framework which is based on the next-gen version of `@wearegenki/ui`. It follows our decision at We Are Genki to transition our projects from [Vue](https://vuejs.org) to [Svelte](https://svelte.technology).**
-----
[](https://travis-ci.org/WeAreGenki/ui)
[](https://codecov.io/gh/WeAreGenki/ui)
[](https://www.npmjs.com/package/@wearegenki/ui)
[](https://www.npmjs.com/package/@wearegenki/ui)
[](https://github.com/WeAreGenki/ui/blob/master/LICENCE)
# @wearegenki/ui
A friendly UI framework which aims to be straightforward, intuitive, and high performance. Uses modern and futuristic tools and approach. Intended to be used in Vue projects or as standalone CSS.
_NOTE: This is currently a work in progress and is not recommended for production applications... unless you love living on the bleeding edge!_
## Overview
The framework is designed around the types of projects we do at [We Are Genki](https://wearegenki.com) — ecommerce, microsites, and next-gen web apps — but are flexible enough for any web design use.
Features:
* semi-flat design
* microinteractions
* high performance
* [universal design](https://en.wikipedia.org/wiki/Universal_design) as a core concept
Technologies:
* CSS Grid Layout
* [PostCSS](http://postcss.org)
* [Vue](https://vuejs.org/) components
## Documentation
To see [live examples](https://ui.wearegenki.com/examples) and the docs, visit [ui.wearegenki.com](https://ui.wearegenki.com).
### Quick start
#### 1. Install dependencies
Choose one of the following:
```bash
# everything (not recommended but convenient for quick prototyping)
yarn install "@wearegenki/ui" vue vue-router vuex \
&& yarn install -D postcss eslint stylelint jest puppeteer vue-server-renderer vue-template-compiler
# development configuration files only
yarn install -D "@wearegenki/dev" "@wearegenki/test" eslint stylelint jest puppeteer
# CSS + compilation only
yarn install "@wearegenki/css" \
&& yarn install -D "@wearegenki/postcss-config" postcss
# all Vue.js packages (includes CSS)
yarn install "@wearegenki/ui-vue" vue vue-router vuex \
&& yarn install -D "@wearegenki/ui" "@wearegenki/test-vue" postcss eslint stylelint jest vue-server-renderer vue-template-compiler
```
#### 2. Copy config boilerplate
```bash
# get latest copy of the repository
git clone --depth 1 https://github.com/WeAreGenki/ui.git
# copy configuration files
cp -r /docs/examples/boilerplate-configs/.
```
See [config boilerplate readme](https://github.com/WeAreGenki/ui/blob/master/docs/examples/boilerplate-configs/README.md) for more tips.
## Browser compatibility
Because this framework uses [CSS Grid Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) it's limited to [browsers that support it](http://caniuse.com/#feat=css-grid), which currently include:
* Chrome for Android 61
* Android browser 56
* iOS Safari 10.3
* Chrome 57
* Firefox 52
* Safari 10.1
* Edge 16
* Opera 46
_NOTE: Older browser compatibility via progressive fallback is planned and will be added in the near future._
## Known issues
Builds are designed to run on *nix systems and may fail on Windows machines.
## Changelog
See [CHANGELOG.md](https://github.com/WeAreGenki/ui/blob/master/CHANGELOG.md).
## Licence
`@wearegenki/ui` is an Apache-2.0 licensed open source project. See [LICENCE](https://github.com/WeAreGenki/ui/blob/master/LICENCE).
-----
© 2018 [We Are Genki](https://wearegenki.com)