Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/unicef/design-system
(alfa) Design visual and usability guidelines for UNICEF internal applications. Also a reference implementation HTML/SCSS
https://github.com/unicef/design-system
design design-systems guidelines html javascript sass ui unicef usability
Last synced: about 1 month ago
JSON representation
(alfa) Design visual and usability guidelines for UNICEF internal applications. Also a reference implementation HTML/SCSS
- Host: GitHub
- URL: https://github.com/unicef/design-system
- Owner: unicef
- Created: 2018-07-20T13:40:30.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T17:22:08.000Z (almost 2 years ago)
- Last Synced: 2024-11-06T17:52:21.868Z (about 2 months ago)
- Topics: design, design-systems, guidelines, html, javascript, sass, ui, unicef, usability
- Language: SCSS
- Homepage: https://unicef.github.io/design-system/
- Size: 16.5 MB
- Stars: 3
- Watchers: 8
- Forks: 1
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UNICEF Design System
The status of this project is **ALFA**. So, incompatible changes may appear.
The goal of this project is to:
- Define a common user interface across applications.
- Speed up the design time allowing the design team to focus on user
needs rather on tiny interaction details.
- Speed up the development time by reusing the HTML and CSS.
Designers, product managers and anyone that has to define the user interface
of a web application we provide the following
[UX/UI design guidelines](https://unicef.github.io/design-system/design-guidelines.html).
For developers, we provide a reference implementation.
[Documentation for developers can be found here](https://unicef.github.io/design-system/developer-docs.html)
This reference implementation is based on based on [Bootstrap 4.3](http://getbootstrap.com).
## Getting started
In order to use the UNICEF's UI in your project you can reference a CDN or download using npm.
### With CDN
CDNs can offer a performance benefit by hosting on servers spread across the globe. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of the files from the same CDN, it won't have to be re-downloaded.
For the CSS:
```html
```
If you need to include the JavaScript, you have two options. The first one, a
minified javascript bundle file that includes all bootstrap JavaScript (bootstrap, popper, jquery). You need this if you require dropdowns, tabs, etc.
```html
```
### Using npm
This bootstrap customization is based on [SASS](https://sass-lang.com), and therefore you can easily override the CSS classes for your particular project.
First, install the npm package
```
npm install @unicef/design-system
```
Import `unicef.scss` in your global `scss` file. For example:
```css
/* you may need to change the path to the node_modules dir */
@import "../node_modules/@unicef/design-system/scss/unicef"
```
We have used bootstrap variables whenever possible. Custom created variables are defined in `scss/_variables.scss`.
### Leaner version.
In order to make bootstrap version leaner, the following colors have been
removed from `$theme-colors`: `secondary`,`info`,`light`,`dark`. This means
that, for example, `Info button` will not
work. You can activate them back in `_variables.scss`.
### Development
We use [jekyll](https://jekyllrb.com/) for generating the documentation and [gulp](https://gulpjs.com/) for automating the tasks.
Get source code from git repository
```
$ git clone https://github.com/unicef/design-system.git
```
Install dependencies
```bash
$ cd design-system
$ npm install
$ bundle install
```
### Tasks
To run the local server
```
$ bundle exec jekyll serve --livereload
```
Then browse to `http://localhost:4000/`
While developing run in another terminal the `watch` task to compile and minimize the SCSS and JavaScript:
```
$ gulp watch
```
To continuously compile SASS run
```
$ gulp watch-sass
```
# Contribution
Just clone the project and make a pull request.
# License
Distributed under GLPv3.