Kashmir

NOTE: The 8.x version of the theme works as a base theme and is minimally maintained, only blockers and security issues if any. Going forward all the development and new features will be provided under the Kashmir - Drupal theme generator npm project.

What is Kashmir - Drupal theme generator?

---

Check installation and usage instructions at Kashmir - Drupal theme generator.

The drupal.org Kashmir theme project started as a modern Drupal base theme with Patternlab support and gulp 4 tooling. The 8.x-1.x branch of this project is this Drupal theme.

The theme generator is a npm package that provides a CLI to generate a
Drupal theme. The generated theme is compatible with Drupal 8.x and Drupal 9.x. The theme generator also provides several out-of-the box integrations as part of the theme, the developer can configure the same by using the CLI. This includes integrations with Patternlab or Storybook as a component-based design system, Cypress testing, RTL support, component generation support, Tailwind integration, TS support and such things.

Check the npm package page for complete documentation on the same.

FAQ:

> Can I still use the latest release of kashmir theme?

Yes, you can. However, we highly recommend you instead use the theme generator to create a new theme with more modern features. The theme generated via generator has all the features of the Kashmir theme and many other enhancements, it is also compatible with D8 and D9.

> Why is the theme generator not on D.O and on npm?

Unlike the theme which is a Drupal project, the theme generator is not. Hence we have kept it out of D.O so it can be worked upon as an independent project. ex: In the future the theme generator might also add support for Wordpress themes.

> Do I need to install theme generator on the server?

No! The theme generator is intended as a developer tool. Developers should use it to create the theme with the tools they need. The generated theme is just like any other Drupal theme and it comes with its own tooling for compiling and building assets. The theme then should be deployed on the server via GIT or by other methods, just like we do with any other Drupal code.

---

Drupal Theme - Gulp + Patternlab + Drupal

---

Features

• Lean: Uses Stable templates and no opinionated files or libraries included.
• Patternlab: Architected to support Patternlab with Drupal.
• Static Code Analysis: Checks both scripts and styles for stylistic and syntax errors.
• SVG: Support SVG sprite generation.
• Performance Testing: Generates info logs for all the stylesheets generated.

Setup

• Node
  • Use nvm
    • Unix based
    • Windows
• Gulp
  

  $ npm install - gulp
  

• Composer
  

  php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
  php composer-setup.php
  php -r "unlink('composer-setup.php');"
  mv composer.phar /usr/local/bin/composer
  

• Drupal Modules
  • Components
    • composer require drupal/components
    • drush dl components
  • Twig Tweak
    • composer require drupal/twig_tweak
    • drush dl twig_tweak

Setup sub-theme

• Install Kashmir
  • composer require drupal/kashmir
  • drush dl kashmir
• Enable Kashmir
  • drush en kashmir
• Generate a sub-theme
  • drush kashmir sub_theme_name
• Configure settings
  • Update settings in gulp/_config.js for Browsersync and Source for scripts and styles.

Usage

• Dev Environment
  • Build assets by running: gulp.
  • Watch for changes using: gulp watch.
• Prod/Test Environment
  • Build assets by running: gulp --type production.

Theme tasks

• Styles
  • gulp styles
  • To Compile styles and generate RTL styles for files with .ltr suffix.
• Styles Lint
  • gulp scripts-lint
  • To check styles for errors and warnings.
• Patternlab
  • gulp patternlab
  • To generate Patternlab from files in components.
• Scripts
  • gulp scripts
  • To Compile and Uglify scripts
• Scripts Lint
  • gulp scripts-lint
  • To check scripts for errors and warnings.
• Performance
  • gulp performance
  • To check the stats of the stylesheets.
• SVG
  • gulp svg
  • To combine multiple SVG files into a single sprite.
• Watch
  • gulp watch
  • Starts a proxy server and, lints and compiles file on change.
• Default
  • gulp
  • To generate SVG sprite and lint + compile the scripts and styles in theme.