--- layout: page in-navbar: true id: developer-docs title: "Developer documentation" --- UNICEF has defined a visual design specification for our internal web applications. This specification follows our brand guidelines, takes into account accessibility and is rooted in a set of principles that are defined on our __[UX/UI design guidelines](design-guidelines)__. Additionally to those specs, UNICEF has created a technology agnostic reference implementation, so it can be used with any modern development framework such as React or Angular. One of the main goals of this implementation is to: - Speed up the development of our applications by providing developers with a set of CSS classes that comply with usability, branding and accessibility best practices. - Improve the quality of the interfaces with a well thought and designed framework. **This document is for developers** that have to implement the user interface of a UNICEF web application. Here you will find the technical documentation with examples of the HTML and CSS classes. This implementation is based on [bootstrap 4.x](https;//getbootstrap.com), one of the most popular and widely used frameworks on the Internet. For brevity, we assume the reader is familiar with this framework, and has a good understanding of HTML as well as CSS. If you need to design a user interface for a UNICEF application you will need to understand how and when to use each of the elements described in this document. To get that knowledge, please, read our __[UX/UI design guidelines](design-guidelines)__. ## Example This is an example of a full page. ### [Full page example](./sample1.html) ## 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`. ## Typography The default typography is the one defined by user's operating system. That way we don't need to download any font. {% capture example %}

h1. Heading 1

Lead paragraph. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

heading 5
heading 6
{% endcapture %} {% include example.html content=example %} ## Alerts Alerts use the `.alert` class followed by the type of alert `.alert-success`, `.alert-warning`, `.alert-danger`. {% capture example %} {% endcapture %} {% include example.html content=example %} Alerts support strong and links. {% capture example %} {% endcapture %} {% include example.html content=example %} ## Buttons There are 4 types of buttons. The `.btn` class is common to all of them: + `.btn-primary` for the main button. + `.btn-outline-primary`, for the default button. + `.btn-outline-danger`, for the danger button. + `.btn-link`, for the link button. {% capture example %}
Primary button

Default button

Danger button

Link button

{% endcapture %} {% include example.html content=example %} Also, it is possible to group an input with a button: {% capture example %}
{% endcapture %} {% include example.html content=example %} ## Navigation Bar {% capture example %} {% endcapture %} {% include example.html content=example %} {% capture example %} {% endcapture %} {% include example.html content=example %} {% capture example %} {% endcapture %} {% include example.html content=example %} ### Accessibility To [support skip navigation](https://webaim.org/techniques/skipnav/), always add the `.skip` navigation before the navigation bar pointing to the element in which the content starts. Adding this helps users that browse the web with keyboards, allowing them to skip all the links in your main menu. ```html
``` ## Tabs {% capture example %}
Consequat occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
{% endcapture %} {% include example.html content=example %} ## Images Images should weight the least amount possible. 1. Use the format that weights for the size and quality you require. Typically, it is recommended to use JPG format for pictures and SVG for graphics and icons. 2. Use size optimizers such as [svgo](https://github.com/svg/svgo) or [jpeg optim]( https://github.com/tjko/jpegoptim). 3. It is necessary to set the `alt` description on all images. Keep this description brief, describe what you see and do not interpret the contents of the image. For decorative images, use an empty string `alt` attribute (`alt=""`). ## Forms Form fields have different status: {% capture example %}
{% endcapture %} {% include example.html content=example %} Form elements can include short texts that provide important information to users. {% capture example %}
We'll never share your email with anyone else.
Domains like hotmail.com or gmail.com are not allowed.
{% endcapture %} {% include example.html content=example %} ## Textareas To add a counter at the bottom of a field add the attributes `data-counter="true"` and `maxlength="100"`, where 100 is the max number of characters. Add `data-autoresize="true"` to allow auto resize. {% capture example %}
{% endcapture %} {% include example.html content=example %} These two enhancements require Javascript. ## Required fields Required fields are those that are mandatory to fill in order to submit a form. For required fields we mark `