Skip to main content
Unified Design System
Search the Design System
Ver. 3.0.0 For the older version visit v2 documentation

Developer assets

The easiest way to get started is to use the jsdelvr CDN to include the gov.cy developer assets in your code, as shown in the page template and the examples below.

Alternatively you can download the gov.cy starter kit, unzip it and include it in your project.

The following file structure is included in the starter kit:

.
+-- css
|   +-- govcy.uds.css
+-- img
|   +-- ...
+-- JS
|   +-- govcy.uds.js
|   +-- locales
|       +-- govcy.datepicker.el.js
|       +-- govcy.datepicker.en.js
+-- manifest.json

All HTML code examples in this website utilizes the classes, styling and behavior defined in this CSS and JS files of our developer assets.

CSS

To add the gov.cy styles using our developer assets, add the CSS either using the CDN or using the downloaded starter kit.

CDN

To use the gov.cy CSS with jsdelivr CDN, include the following code in your <head>.

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/gov-cy/govcy-design-system@v3.0.0/dist/css/govcy.uds.min.css" integrity="sha384-1zLHWOtnS0hOIz5mVEPZp0UH5gUE6eo0CQcCGA3sF2TyYhHyKOd3Ni8Iy/NjEASU" crossorigin="anonymous">

Downloaded starter kit

To add the gov.cy CSS using the downloaded starter kit, use the pre-built css/govcy.uds.min.css file, by including the following code in your <head>.

<!-- CSS -->
<link href="css/govcy.uds.min.css" rel="stylesheet" >

NOTE: if the paths or filenames of your files are different in you project, please adjust the code accordingly.

JavaScript

Many of our components require the use of JavaScript to function. To enable them, you can use the gov.cy JS either using the CDN or using the downloaded starter kit to reference the javascript file.

CDN

To use the gov.cy CSS with jsdelivr CDN, include the following code right before the closing </body> tag.

<!-- scripts -->
<script src="https://cdn.jsdelivr.net/gh/gov-cy/govcy-design-system@v3.0.0/dist/js/govcy.uds.min.js" integrity="sha384-zOuDuogVaaTveh/Ou2iYwCk14zFiSmMk7Ax8yRnXDtOJMyKZH5+ZNibNVwZSKtw+" crossorigin="anonymous"></script>

Downloaded starter kit

To add the gov.cy javascript using the downloaded starter kit, use the pre-built js/govcy.uds.js file, by including the following code right before the closing </body> tag.

<!-- scripts -->
<script src="js/govcy.uds.min.js" type="text/javascript"></script>

NOTE: if the paths or filenames of your files are different in you project, please adjust the code accordingly.

Images

You will need to reference images for icons and logos. All images required by the page template’s head section and manifest.json are included in the starter kid under the /img folder.

Next step

To implement styles, components and patterns using the developer assets, make sure to use the starter template and the code included in each documentation page through this website.

To get stated in creating a page, take a look at out create a page guide.