{"id":19259782,"url":"https://github.com/unicef/design-system","last_synced_at":"2025-04-21T16:31:04.911Z","repository":{"id":48027621,"uuid":"141716703","full_name":"unicef/design-system","owner":"unicef","description":"(alfa) Design visual and usability guidelines for UNICEF internal applications. Also a reference implementation HTML/SCSS","archived":false,"fork":false,"pushed_at":"2023-01-03T17:22:08.000Z","size":17348,"stargazers_count":3,"open_issues_count":29,"forks_count":1,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-17T14:12:37.118Z","etag":null,"topics":["design","design-systems","guidelines","html","javascript","sass","ui","unicef","usability"],"latest_commit_sha":null,"homepage":"https://unicef.github.io/design-system/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unicef.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-20T13:40:30.000Z","updated_at":"2023-09-08T17:42:58.000Z","dependencies_parsed_at":"2023-02-01T08:16:49.013Z","dependency_job_id":null,"html_url":"https://github.com/unicef/design-system","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/unicef%2Fdesign-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unicef%2Fdesign-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unicef%2Fdesign-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unicef%2Fdesign-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unicef","download_url":"https://codeload.github.com/unicef/design-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250090745,"owners_count":21373248,"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":["design","design-systems","guidelines","html","javascript","sass","ui","unicef","usability"],"created_at":"2024-11-09T19:17:49.796Z","updated_at":"2025-04-21T16:31:02.400Z","avatar_url":"https://github.com/unicef.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# UNICEF Design System\n\nThe status of this project is **ALFA**. So, incompatible changes may appear.\n\nThe goal of this project is to:\n\n  - Define a common user interface across applications.\n  - Speed up the design time allowing the design team to focus on user\n    needs rather on tiny interaction details.\n  - Speed up the development time by reusing the HTML and CSS.\n\n\nDesigners, product managers and anyone that has to define the user interface\nof a web application we provide the following\n[UX/UI design guidelines](https://unicef.github.io/design-system/design-guidelines.html).\n\nFor developers, we provide a reference implementation.\n[Documentation for developers can be found here](https://unicef.github.io/design-system/developer-docs.html)\n\nThis reference implementation is based on  based on [Bootstrap 4.3](http://getbootstrap.com).\n\n\n\n## Getting started\n\nIn order to use the UNICEF's UI in your project you can reference a CDN or download using npm.\n\n### With CDN\nCDNs 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.\n\nFor the CSS:\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/@unicef/design-system/dist/css/unicef.css\"\u003e\n```\n\nIf you need to include the JavaScript, you have two options. The first one, a\nminified javascript bundle file that includes all bootstrap JavaScript (bootstrap, popper, jquery). You need this if you require dropdowns, tabs, etc.\n\n```html\n\u003c!-- All js bundled --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@unicef/design-syste/dist/js/unicef-bundle.min.js\"\u003e\u003c/script\u003e\n\n\u003c!-- only the scripts that were created by UNICEF (no requirement)--\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@unicef/design-system/dist/js/unicef.min.js\"\u003e\u003c/script\u003e\n```\n\n### Using npm\n\nThis bootstrap customization is based on [SASS](https://sass-lang.com), and therefore you can easily override the CSS classes for your particular project.\n\nFirst, install the npm package\n\n```\n npm install @unicef/design-system\n\n```\n\nImport `unicef.scss` in your global `scss` file. For example:\n\n```css\n/* you may need to change the path to the node_modules dir */\n@import \"../node_modules/@unicef/design-system/scss/unicef\"\n```\n\nWe have used bootstrap variables whenever possible. Custom created variables are defined in `scss/_variables.scss`.\n\n\n### Leaner version.\nIn order to make bootstrap version leaner, the following colors have been\nremoved from `$theme-colors`: `secondary`,`info`,`light`,`dark`. This means\nthat, for example, `\u003cbutton class=\"btn btn-info\"\u003eInfo button\u003c/button\u003e` will not\nwork. You can activate them back in `_variables.scss`.\n\n\n### Development\n\nWe use [jekyll](https://jekyllrb.com/) for generating the documentation and [gulp](https://gulpjs.com/) for automating the tasks.\n\nGet source code from git repository\n\n```\n$ git clone https://github.com/unicef/design-system.git\n```\n\nInstall dependencies\n\n```bash\n$ cd design-system\n$ npm install\n$ bundle install\n```\n\n### Tasks\n\nTo run the local server\n```\n$ bundle exec jekyll serve --livereload\n```\nThen browse to `http://localhost:4000/`\n\nWhile developing run in another terminal the `watch` task to compile and minimize the SCSS and JavaScript:\n```\n$ gulp watch\n```\n\nTo continuously compile SASS run\n```\n$ gulp watch-sass\n\n```\n\n# Contribution\n\nJust clone the project and make a pull request.\n\n# License\n\nDistributed under GLPv3.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funicef%2Fdesign-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funicef%2Fdesign-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funicef%2Fdesign-system/lists"}