Installation

The United Arab Design System 2.0 is a framework and a carefully crafted, tested and validated set of components, blocks and patterns that can help you design and build websites for the United Arab Emirates Federal Government.

The design system is built with TailwindCSS, and it is a plugin that can be added to your TailwindCSS project.

This installation guide will help you get started with spinning up a new project using the DLS 2.0 plugin. You may choose to compile your coding using any preprocessor or using the TailwindCSS CLI. For more information on how to use pre-processors and TailwindCSS CLI, you can visit the installation page on TailwindCSS.com

1
Install the package
Install the ` AEGov-Design-System ` package via NPM. TailwindCSS will be installed as a dependency. This includes the typography and forms plugin for TailwindCSS.
npm i @aegov/design-system

Create a config file

Create a ` tailwind.config.js ` file and use the following template in the root of your project.

Make sure to set the right path to your files in the ` content ` attribute.

/* your tailwind.config.js file */

module.exports = {
  content: ["./src/**/*.{html,js}"],
  future: {
		hoverOnlyWhenSupported: false,
	},
  theme: {
    extend: {},
  },
  plugins: [
    require('@aegov/design-system'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms')
  ],
}

3
Add TailwindCSS directives
Create a CSS file and add the ` @tailwind ` directives for each layer. Based on your build tools, you will then use the compiled CSS version in your project.
/* create a new css file, example /src/style.css */ @tailwind base; @tailwind components; @tailwind utilities;
4
Compile your CSS file
Use a build system, or directly use the built in tailwindcss tool to build your CSS file.
npx tailwindcss -i ./src/style.css -o ./dist/style.css --watch

Using the following command, the tool will scan what you have added in your tailwind.config.js file under content, and find the necessary classes to add for your project.

All classes for components and blocks for the design system will be generated under the component layer, while all classes considered global overrides to HTML attributes will be placed in the base layer.

You may choose to use any build process to build your output. Here is a list of suggested pre-processor build processes to use.

Build using webpack

Build using gulp

Use the compiled CSS in your HTML

Add the compiled CSS to your HTML files in the <head> section and start adding components and blocks.

Use TailwindCSS’s utility classes within your HTML to continue building your website or add your own CSS to the ` style.css ` file after the ` @tailwind ` directives

<!-- an example of an HTML file - such as /src/index.html -->
  
<!doctype html>
<html>
	<head>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <link href="/dist/style.css" rel="stylesheet">
	</head>
	<body dir="ltr">  
		<div class="container">    
			<h1>Hello world!</h1>    
			<div>    
				<button class="aegov-btn">Show me more</button>    
			</div>  
		</div>
	</body>
</html>

Getting started

The use of TailwindCSS

Installation

Install the package

Create a config file

Add TailwindCSS directives

Compile your CSS file

Use the compiled CSS in your HTML

Sustainable by design