Skip to content
Snippets Groups Projects
Forked from project / ui_suite_daisyui
23 commits behind the upstream repository.
Michael Fanini's avatar
Issue #3483957 by g4mbini: [4.0.0-alpha5] Document DaisyUI Libraries installation
Michael Fanini authored
9383b8aa

UI Suite DaisyUI

A site-builder friendly DaisyUI theme for Drupal, using the UI Suite approach.

Use DaisyUI directly from Drupal backoffice (layout builder, manage display, views, blocks...).

Requirements

This theme requires the following modules:

  • UI Patterns 2
  • UI Styles
  • UI Skins
  • UI Icons

This theme can be used with CDN hosted package of DaisyUI (version 4.12.13) or by building your own package.

If you want to build your own DaisyUI / Tailwind CSS package, please follow the "DaisyUI with NPM" section below.

This theme also provides integration with Heroicons. Please follow the "Heroicons with Asset Packagist" section below.

Install libraries

DaisyUI with NPM

Inside /web/libraries/daisyui execute the following command : npm init daisyui

3 options are then available (we recommend the second one):

  1. What it does if you choose No need. I already have Tailwind:
    • Installs daisyUI
    • Adds daiysUI to your tailwind.config.js file.
  2. What it does if you choose Yes. Setup Tailwind first:
    • Installs Tailwind CSS
    • Creates tailwind.config.js file (npx tailwindcss init) with default config
    • Creates tailwind.css file with @tailwind directives in it
    • Installs daisyUI
    • Adds daiysUI to your tailwind.config.js file.
  3. What it does if you choose Yes. Setup Tailwind first (with PostCSS):
    • Installs Tailwind CSS
    • Creates tailwind.config.js file (npx tailwindcss init) with default config
    • Installs PostCSS and Autoprefixer
    • Creates postcss.config.js file - Adds Tailwind CSS and Autoprefixer to postcss.config.js
    • Installs daisyUI
    • Adds daiysUI to your tailwind.config.js file.

(optional) As per DaisyUI documentation it is recommended to install the typography plugin: npm install -D @tailwindcss/typography

Then, edit the tailwind.config.js file. Initially the file looks like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {}
  },
  plugins: [require("daisyui")]
};

Recommendation of tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    '../../themes/contrib/ui_suite_daisyui/dist/css/custom/*.css',
    '../../themes/contrib/ui_suite_daisyui/templates/*.{twig,js}',
    '../../themes/contrib/ui_suite_daisyui/templates/**/*.{twig,js}',
    '../../themes/contrib/ui_suite_daisyui/components/**/*.{twig,js,yml}',
    '../../themes/contrib/ui_suite_daisyui/*.ui_styles.yml',
    '../../themes/contrib/ui_suite_daisyui/ui_examples/*.yml',
  ],
  safelist: [
    'alert-info', 'alert-success', 'alert-warning', 'alert-error',
    'badge-neutral', 'badge-primary', 'badge-secondary', 'badge-accent', 'badge-ghost', 'badge-info', 'badge-success', 'badge-warning', 'badge-error',
    'badge-xs', 'badge-sm', 'badge-md', 'badge-lg', 
    'btn-neutral', 'btn-primary', 'btn-secondary', 'btn-accent', 'btn-ghost', 'btn-link', 'btn-info', 'btn-success', 'btn-warning', 'btn-error',
    'btn-xs', 'btn-sm', 'btn-md', 'btn-lg',
    'card-compact', 'card-side',
    'carousel-center', 'carousel-end',
    'chat-end',
    'chat-bubble-primary', 'chat-bubble-secondary', 'chat-bubble-accent', 'chat-bubble-info', 'chat-bubble-success', 'chat-bubble-warning', 'chat-bubble-error',
    'divider-horizontal',
    'divider-start', 'divider-end',
    'divider-neutral', 'divider-primary', 'divider-secondary', 'divider-accent', 'divider-success', 'divider-warning', 'divider-info', 'divider-error',
    'link-primary', 'link-secondary', 'link-accent', 'link-neutral', 'link-success', 'link-info', 'link-warning', 'link-error',
    'loading-spinner', 'loading-dots', 'loading-ring', 'loading-ball', 'loading-bars', 'loading-infinity',
    'loading-xs', 'loading-sm', 'loading-md', 'loading-lg',
    'menu-vertical', 'menu-horizontal',
    'menu-xs', 'menu-sm', 'menu-md', 'menu-lg',
    'progress-primary', 'progress-secondary', 'progress-accent', 'progress-info', 'progress-success', 'progress-warning', 'progress-error', 
    'stats-vertical',
    'step-neutral', 'step-primary', 'step-secondary', 'step-accent', 'step-info', 'step-success', 'step-warning',  'step-error',
    'steps-vertical',
    'table-xs', 'table-sm', 'table-md', 'table-lg',
    'tabs-bordered', 'tabs-lifted', 'tabs-boxed',
    'tabs-xs', 'tabs-sm', 'tabs-lg',
    'timeline-vertical',
    'toast-start', 'toast-center', 'toast-end', 'toast-top', 'toast-middle', 'toast-bottom', 
  ],
  theme: {
    extend: {}
  },
  plugins: [
    require("daisyui"),
    require('@tailwindcss/typography'),
  ],
  daisyui: {
    themes: [
      "light",
      "dark",
      "cupcake",
      "bumblebee",
      "emerald",
      "corporate",
      "synthwave",
      "retro",
      "cyberpunk",
      "valentine",
      "halloween",
      "garden",
      "forest",
      "aqua",
      "lofi",
      "pastel",
      "fantasy",
      "wireframe",
      "black",
      "luxury",
      "dracula",
      "cmyk",
      "autumn",
      "business",
      "acid",
      "lemonade",
      "night",
      "coffee",
      "winter",
      "dim",
      "nord",
      "sunset",
    ],
    darkTheme: "dark", // name of one of the included themes for dark mode
    base: true, // applies background color and foreground color for root element by default
    styled: true, // include daisyUI colors and design decisions for all components
    utils: true, // adds responsive and modifier utility classes
    prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
    logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
    themeRoot: ":root", // The element that receives theme color CSS variables
  }
};

Then eventually, start the Tailwind CLI build process: npx tailwindcss -i tailwind.css -o daisyui.css --minify

Herocions with Asset Packagist

If you use the website Asset Packagist, the composer.json can be like:

{
    "require": {
        "composer/installers": "2.*",
        "oomphinc/composer-installers-extender": "2.*",
        "npm-asset/heroicons": "2.1.5"
    },
    "repositories": {
        "asset-packagist": {
            "type": "composer",
            "url": "https://asset-packagist.org"
        },
        "drupal": {
            "type": "composer",
            "url": "https://packages.drupal.org/8"
        }
    },
    "extra": {
        "installer-paths": {
            "app/libraries/{$name}": [
                "type:drupal-library",
                "type:bower-asset",
                "type:npm-asset"
            ]
        },
        "installer-types": [
            "bower-asset",
            "npm-asset"
        ]
    }
}

Installation

Install as you would normally install a contributed Drupal theme. For further information, see Installing Drupal Themes.

Configuration

The theme has no menu or modifiable settings on its own.

Configuration is provided by the UI Suite ecosystem modules.

Maintainers

Current maintainers:

Supporting organizations: