Gin Synth Theme

A Drupal admin subtheme based on Gin with Bootstrap 5 integration.

Setup

1. Install dependencies:

   npm install

2. Build the theme assets:

   npm run build

3. For development with file watching:

   npm run dev

Development

• SCSS files: Edit files in the scss/ directory
• JavaScript files: Edit files in the js/src/ directory
• Compiled files: Generated in css/ and js/ directories

Bootstrap 5 Integration

This theme includes Bootstrap 5 with the following features:

• Full Bootstrap CSS framework
• Bootstrap JavaScript components (tooltips, popovers, modals, etc.)
• Customizable SCSS variables
• Webpack build process for JavaScript

Lucide Icons

This theme includes Lucide icons for modern, beautiful SVG icons:

• Over 1,000+ icons available
• Lightweight and customizable
• Perfect for admin interfaces
• Automatically initialized on page load

File Structure

ginsynth/
├── scss/
│   └── style.scss          # Main SCSS file (imports Bootstrap)
├── js/
│   ├── src/
│   │   └── main.js         # Source JavaScript file
│   └── script.js           # Compiled JavaScript (generated)
├── css/
│   └── style.css           # Compiled CSS (generated)
├── package.json            # npm dependencies and scripts
├── webpack.config.js       # Webpack configuration
└── ginsynth.libraries.yml  # Drupal library definitions

Usage Examples

Using Lucide Icons

Add icons to your Drupal templates or HTML:

<!-- Basic icon -->
<i data-lucide="user"></i>

<!-- Icon with classes -->
<i data-lucide="settings" class="text-primary"></i>

<!-- Icons in buttons -->
<button class="btn btn-primary">
  <i data-lucide="plus" class="me-2"></i>
  Add Item
</button>

<!-- Icons in navigation -->
<a href="/admin" class="nav-link">
  <i data-lucide="dashboard" class="me-2"></i>
  Dashboard
</a>

Bootstrap Components

Use any Bootstrap 5 component:

<!-- Cards -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">
      <i data-lucide="file-text" class="me-2"></i>
      Content Title
    </h5>
    <p class="card-text">Content description</p>
  </div>
</div>

<!-- Buttons -->
<button class="btn btn-success">
  <i data-lucide="check" class="me-2"></i>
  Save
</button>

Customization

To customize Bootstrap variables, edit scss/style.scss and add your variable overrides before the Bootstrap import:

// Custom Bootstrap variables
$primary: #your-color;
$secondary: #your-secondary-color;

// Import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";