@orange-ui/vue v0.1.4
Orange Vue
Open-source UI by Fomo
vue.orangecss.com
Orange Vue offers a set of UI tools and components made for rapid development. It strives to provide elements that easily fit together so developers can focus solely on building products.
Read the documentation
Our manifesto
Visit Fomo
Quick start · Customize · Contribute · License
Quick start
There's a couple ways to get you started with Orange. At this time we provide:
- Node.js (minimized, source code)
- Git repository (minimized, source code)
Node.js
If you're working on an app powered by Node.js it might make most sense to have Orange among your project's dependencies. But besides version control, this setup let you customize Orange's styling.
You can find this package listed on npm, under the name @orange-ui/vue.
Installation
yarn add @orange-ui/vue
Styles and components
The simplest way to setup styles is by using the pre-built versions that can be found in the /dist
folder within this package.
For this setup import styles import "~@orange-ui/vue/dist/orangevue.css"
and import components like import OButton from "~@orange-ui/vue/src/components/Button/Button"
to your main.js
file and register them as Vue.component('o-button', OButton)
. Done!
You'll probably want to read the documentation for examples and explanations of available components and their props.
More control over styles
You can gain more control over Orange, however, by importing scss
versions of styles found in the same package. Read the customize section for insights on what's possible.
Git repository
All of Orange's source code is availabe within this repository - download or fork it on GitHub. Oh, and since you're here, check out the contribute section.
Customize
It's possible to:
- import parts of Orange
- change fonts (Google Fonts support)
- adjust colors, dimensions, type scale, etc.
To achieve the above you will need to compile scss
rather than import css
stylesheets. Configure your environment like so:
1. Set up styles
See main.scss for the complete list of components and utilities you can pick from.
First copy the contents of main.scss
to your app's main stylesheet.
Next, comment out anything you don't need.
/** Orange (example configuration) */
/** Core (required) */
@import '~@orange-ui/vue/src/scss/src/_functions';
@import '~@orange-ui/vue/src/scss/src/_variables';
@import '~@orange-ui/vue/src/scss/src/_typography';
@import '~@orange-ui/vue/src/scss/src/_global';
/** Icons (required) */
@import "~@orange-ui/vue/src/scss/src/icons/fontello";
@import "~@orange-ui/vue/src/scss/src/icons/fontello-reset";
/** Utilities (optional) */
@import '~@orange-ui/vue/src/scss/src/utilities/_spacings';
@import '~@orange-ui/vue/src/scss/src/utilities/_colors';
// @import '~@orange-ui/vue/src/scss/src/utilities/_shadows';
// @import '~@orange-ui/vue/src/scss/src/utilities/_text';
/** Components (optional) */
@import '~@orange-ui/vue/src/scss/src/components/_avatar';
@import '~@orange-ui/vue/src/scss/src/components/_breadcrumbs';
@import '~@orange-ui/vue/src/scss/src/components/_card';
// @import '~@orange-ui/vue/src/scss/src/components/_checkbox';
// @import '~@orange-ui/vue/src/scss/src/components/_empty-state';
...
2. Set up variables
Make a copy of _variables.scss and include it just about anywhere.
/** Overrides */
@import '_variables';
Remove all !default
modifiers from your newely created file - this will allow values you set to override the defaults.
Most likely you will need to fix path to icon font to something like
$o-font-icon-url: '~@orange-ui/vue/src/fonts';
Contribute
Write code? Open an issue on GitHub!
License
Read the MIT license.