# @orange-ui/orange
> Open-source UI library by Fomo.
Latest version **1.6.2** (published 2021-01-25) · MIT license · 0 weekly downloads
## Install
```sh
npm install @orange-ui/orange
pnpm add @orange-ui/orange
yarn add @orange-ui/orange
bun add @orange-ui/orange
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; large bundle.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.6.2 |
| Published | 2021-01-25 |
| First published | 2019-07-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.6 |
| Dependencies | 0 |
| Unpacked size | 18.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 11 |
| Author | Fomo |
| Maintainers | orange-fomo, sine1337, loucyan |
## Links
- npm: https://www.npmjs.com/package/@orange-ui/orange
- Repository: https://github.com/orangeui/orange
- Homepage: https://github.com/orangeui/orange#readme
- Issues: https://github.com/orangeui/orange/issues
- npm.io page: https://npm.io/package/@orange-ui/orange
## Recent versions
- 1.6.2 (latest) — 2021-01-25
- 1.6.1 — 2020-08-11
- 1.6.0 — 2020-08-11
- 1.5.1 — 2020-06-17
- 1.5.0 — 2020-06-11
- 1.4.2 — 2019-11-20
- 1.4.1 — 2019-10-11
- 1.4.0 — 2019-09-30
- 1.3.2 — 2019-09-26
- 1.3.1 — 2019-09-18
- 1.3.0 — 2019-09-16
- 1.2.1 — 2019-09-06
- 1.2.0 — 2019-08-30
- 1.1.1 — 2019-08-16
- 1.1.0 — 2019-08-16
- … 1 more at https://npm.io/package/@orange-ui/orange/versions
## README
# Orange
**Open-source UI by Fomo**
[orangecss.com](https://orangecss.com)
Orange 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](https://orangecss.com/docs)
[Our manifesto](https://orangecss.com/manifesto)
[Visit Fomo](https://fomo.com)
---
[Quick start](#quick-start) · [Customize](#customize) · [Contribute](#contribute) · [License](#license)
---
## Quick start
There's a couple ways to get you started with Orange. At this time we provide:
- Orange CDN (minimized)
- Node.js (minimized, source code)
- Git repository (minimized, source code)
### Orange CDN
The quickest way to getting started is linking to a minimized version of Orange hosted on our servers.
###### Installation
Add these styles and scripts to all your pages:
``` html
```
... and you're good to go! You'll probably want to [read the documentation](https://orangecss.com/docs) for examples and explanations of available tools.
### 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](#customize) Orange's styling.
You can find this package listed on npm, under the name [@orange-ui/orange](https://www.npmjs.com/package/@orange-ui/orange).
###### Installation
``` sh
yarn add @orange-ui/orange
```
###### Styles and scripts
The simplest way to setup styles and scripts is by using the pre-built versions that can be found in the `/dist` folder within this package.
For this setup, make both `~@orange-ui/orange/dist/css/orange.min.css` and `~@orange-ui/orange/dist/js/orange.min.js` available on all of your pages. Done! You'll probably want to [read the documentation](https://orangecss.com/docs) for examples and explanations of available tools.
###### 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](#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](https://github.com/orangeui/orange) on GitHub. Oh, and since you're here, check out the [contribute](#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](https://github.com/orangeui/orange/blob/master/src/scss/src/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 styleshet.
Next, comment out anything you don't need.
``` scss
/** Orange (example configuration) */
/** Core (required) */
@import '~@orange-ui/orange/src/scss/src/_functions';
@import '~@orange-ui/orange/src/scss/src/_variables';
@import '~@orange-ui/orange/src/scss/src/_typography';
@import '~@orange-ui/orange/src/scss/src/_global';
/** Icons (required) */
@import "icons/fontello";
@import "icons/fontello-reset";
/** Utilities (optional) */
@import '~@orange-ui/orange/src/scss/src/utilities/_spacings';
@import '~@orange-ui/orange/src/scss/src/utilities/_colors';
// @import '~@orange-ui/orange/src/scss/src/utilities/_shadows';
// @import '~@orange-ui/orange/src/scss/src/utilities/_text';
/** Components (optional) */
@import '~@orange-ui/orange/src/scss/src/components/_avatar';
@import '~@orange-ui/orange/src/scss/src/components/_breadcrumbs';
@import '~@orange-ui/orange/src/scss/src/components/_card';
// @import '~@orange-ui/orange/src/scss/src/components/_checkbox';
// @import '~@orange-ui/orange/src/scss/src/components/_empty-state';
...
```
###### 2. Set up variables
Make a copy of [_variables.scss]('https://github.com/orangeui/orange/blob/master/src/scss/src/_variables.scss') and include it just about anywhere.
``` scss
/** Overrides */
@import '_variables';
```
Remove all `!default` modifiers from your newely created file - this will allow values you set to override the defaults.
###### 3. Set up scripts
Add all scripts from `~@orange-ui/orange/src/js/src/*` to your scripts.
---
## Contribute
Write code? [Open an issue](https://github.com/orangeui/orange/issues) on GitHub!
---
## License
Read the [MIT license](https://github.com/orangeui/orange/blob/master/LICENSE).
---
_Source: https://npm.io/package/@orange-ui/orange · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
# Orange
**Open-source UI by Fomo**
[orangecss.com](https://orangecss.com)
Orange 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](https://orangecss.com/docs)
[Our manifesto](https://orangecss.com/manifesto)
[Visit Fomo](https://fomo.com)
---
[Quick start](#quick-start) · [Customize](#customize) · [Contribute](#contribute) · [License](#license)
---
## Quick start
There's a couple ways to get you started with Orange. At this time we provide:
- Orange CDN (minimized)
- Node.js (minimized, source code)
- Git repository (minimized, source code)
### Orange CDN
The quickest way to getting started is linking to a minimized version of Orange hosted on our servers.
###### Installation
Add these styles and scripts to all your pages:
``` html
```
... and you're good to go! You'll probably want to [read the documentation](https://orangecss.com/docs) for examples and explanations of available tools.
### 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](#customize) Orange's styling.
You can find this package listed on npm, under the name [@orange-ui/orange](https://www.npmjs.com/package/@orange-ui/orange).
###### Installation
``` sh
yarn add @orange-ui/orange
```
###### Styles and scripts
The simplest way to setup styles and scripts is by using the pre-built versions that can be found in the `/dist` folder within this package.
For this setup, make both `~@orange-ui/orange/dist/css/orange.min.css` and `~@orange-ui/orange/dist/js/orange.min.js` available on all of your pages. Done! You'll probably want to [read the documentation](https://orangecss.com/docs) for examples and explanations of available tools.
###### 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](#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](https://github.com/orangeui/orange) on GitHub. Oh, and since you're here, check out the [contribute](#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](https://github.com/orangeui/orange/blob/master/src/scss/src/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 styleshet.
Next, comment out anything you don't need.
``` scss
/** Orange (example configuration) */
/** Core (required) */
@import '~@orange-ui/orange/src/scss/src/_functions';
@import '~@orange-ui/orange/src/scss/src/_variables';
@import '~@orange-ui/orange/src/scss/src/_typography';
@import '~@orange-ui/orange/src/scss/src/_global';
/** Icons (required) */
@import "icons/fontello";
@import "icons/fontello-reset";
/** Utilities (optional) */
@import '~@orange-ui/orange/src/scss/src/utilities/_spacings';
@import '~@orange-ui/orange/src/scss/src/utilities/_colors';
// @import '~@orange-ui/orange/src/scss/src/utilities/_shadows';
// @import '~@orange-ui/orange/src/scss/src/utilities/_text';
/** Components (optional) */
@import '~@orange-ui/orange/src/scss/src/components/_avatar';
@import '~@orange-ui/orange/src/scss/src/components/_breadcrumbs';
@import '~@orange-ui/orange/src/scss/src/components/_card';
// @import '~@orange-ui/orange/src/scss/src/components/_checkbox';
// @import '~@orange-ui/orange/src/scss/src/components/_empty-state';
...
```
###### 2. Set up variables
Make a copy of [_variables.scss]('https://github.com/orangeui/orange/blob/master/src/scss/src/_variables.scss') and include it just about anywhere.
``` scss
/** Overrides */
@import '_variables';
```
Remove all `!default` modifiers from your newely created file - this will allow values you set to override the defaults.
###### 3. Set up scripts
Add all scripts from `~@orange-ui/orange/src/js/src/*` to your scripts.
---
## Contribute
Write code? [Open an issue](https://github.com/orangeui/orange/issues) on GitHub!
---
## License
Read the [MIT license](https://github.com/orangeui/orange/blob/master/LICENSE).
---
_Source: https://npm.io/package/@orange-ui/orange · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._