sdga-ui

v1.0.12

Published

2 days ago

DGA UI - Government-Style Bootstrap Theme

0High
0Medium
0Low

mahmoud.adel1996

sdga sdga-ui dga dga-ui saudi government design bootstrap theme government design template

DGA UI – Government-Style Bootstrap Theme

DGA UI is a customizable UI theme inspired by modern government and authority design systems. Built on top of Bootstrap, it provides consistent colors, typography, spacing, and reusable UI patterns suitable for official portals, administrative dashboards, and public-sector applications.

This package helps you apply a clean, structured, and authoritative look across your web interfaces with minimal setup.

🌐 Live Demo

Check out the live demo and explore all components:

https://mahmoudadel1996.github.io/dga-ui/

✨ Features

Government-inspired design system
Full compatibility with Bootstrap
Built-in RTL support (no need to import Bootstrap RTL separately)
Custom color palette and typography
Standardized spacing & component overrides
Utility classes for layout and theming
Light / dark mode friendly (optional)
IBM Plex Sans Arabic font included
Easy to integrate into any frontend project

📦 Installation

Install via npm:

npm install sdga-ui

Or with yarn:

yarn add sdga-ui

🔧 Usage

Using the Compiled CSS

Include the compiled CSS file in your HTML:

<link rel="stylesheet" href="node_modules/sdga-ui/css/dga-ui.css">

Or import it in your JavaScript/CSS:

@import "sdga-ui/css/dga-ui.css";

Using SCSS Source Files

Import the theme in your SCSS file:

@import "sdga-ui/theme/dga-ui";

All Bootstrap components automatically adopt the DGA UI theme.

RTL Support

DGA UI has built-in RTL (Right-to-Left) support for Arabic and other RTL languages. Simply add the dir="rtl" attribute to your HTML tag:

<html dir="rtl" lang="ar">

No need to import Bootstrap's RTL CSS separately – it's already integrated!

📁 File Structure

dga-ui/
│
├─ css/                 # Compiled CSS output
│  └─ dga-ui.css
├─ fonts/               # Font files (IBM Plex Sans Arabic)
├─ theme/               # Source SCSS theme files
│  ├─ dga-ui.scss       # Main theme entry point
│  ├─ _fonts.scss
│  ├─ _functions.scss
│  ├─ _variables.scss
│  ├─ config/           # Base configuration
│  ├─ components/       # Component styles
│  └─ customizations/   # Theme customizations
├─ package.json
├─ LICENSE
└─ README.md

🛠 Development

Building the CSS

Compile the SCSS to CSS:

npm run build-css

Watch Mode

Watch for changes and auto-compile:

npm run watch-css

Customization

You can override SCSS variables before importing the theme:

// Your custom variables
$primary: #0d47a1;
$secondary: #ffc107;

// Import the DGA UI theme
@import "dga-ui/theme/dga-ui";

🎨 Theme Structure

The theme is organized into three main sections:

config/ - Base configuration (colors, typography, spacing, etc.)
components/ - Bootstrap component overrides
customizations/ - Additional styling and utilities

🤝 Contributing

Contributions are welcome! Feel free to open issues, submit pull requests, or suggest improvements.

📄 License

MIT License — free for personal and commercial use.

👤 Author

Created and maintained by Mahmoud.