{"id":14968747,"url":"https://github.com/axelerant/create-drupal-theme","last_synced_at":"2025-06-12T11:06:33.235Z","repository":{"id":37958772,"uuid":"235363636","full_name":"axelerant/create-drupal-theme","owner":"axelerant","description":"A Drupal Theme and Component generator.","archived":false,"fork":false,"pushed_at":"2024-11-26T08:29:55.000Z","size":3113,"stargazers_count":9,"open_issues_count":9,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-06T01:39:11.412Z","etag":null,"topics":["cypress","drupal","gulp","lighthouse","percy","theme","typescript","yo"],"latest_commit_sha":null,"homepage":"https://github.com/axelerant/create-drupal-theme","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/axelerant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-21T14:37:56.000Z","updated_at":"2024-11-26T08:30:00.000Z","dependencies_parsed_at":"2024-09-27T10:41:28.721Z","dependency_job_id":"5aeb411e-70eb-4c20-bbf1-96bcb78b5817","html_url":"https://github.com/axelerant/create-drupal-theme","commit_stats":{"total_commits":192,"total_committers":9,"mean_commits":"21.333333333333332","dds":0.34375,"last_synced_commit":"3e47a76d5f3afc720a075b63aaf09f6b34b11677"},"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axelerant%2Fcreate-drupal-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axelerant%2Fcreate-drupal-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axelerant%2Fcreate-drupal-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axelerant%2Fcreate-drupal-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/axelerant","download_url":"https://codeload.github.com/axelerant/create-drupal-theme/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/axelerant%2Fcreate-drupal-theme/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":258779722,"owners_count":22756580,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cypress","drupal","gulp","lighthouse","percy","theme","typescript","yo"],"created_at":"2024-09-24T13:40:29.244Z","updated_at":"2025-06-12T11:06:33.185Z","avatar_url":"https://github.com/axelerant.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![NPM version][npm-image]][npm-url]\n\n[npm-image]: https://badge.fury.io/js/create-drupal-theme.svg\n[npm-url]: https://npmjs.org/package/create-drupal-theme\n\n# Create Drupal Theme\n\n\u003e A Drupal Theme and Component generator.\n\n## Requirements\n\n- [Node.js](https://nodejs.org/) version 18.20.2 or above\n- [PHP](https://www.php.net/) version 7.2 or above\n- [npm](https://npmjs.com/package/npm)\n- [Yarn](https://yarnpkg.com/getting-started/install)\n\n## Installation\n\n- Using npm\n\n  ```bash\n  npm install -g create-drupal-theme\n  ```\n\n- Using yarn\n  ```bash\n  yarn global add create-drupal-theme\n  ```\n\n## Usage\n\nTo choose between generating a theme or a component run:\n\n```bash\ncreate-drupal-theme\n```\n\n[![asciicast](https://asciinema.org/a/mnGegKyz7NoJhpCJlojnRGs7v.svg)](https://asciinema.org/a/mnGegKyz7NoJhpCJlojnRGs7v)\n## Scripts\n\n### `yarn start`\n\nThis will first build all your assets and then start watching for changes. In case you are using a design system, it will build the system and then start the development server.\n\nThe linting tasks are run development mode, so you will get errors in your terminal but it won't exit the process.\n\n### `yarn build`\n\nThis will build all the assets in production mode. It will optimize certain assets to reduce their size.\n\nThe linting tasks are run in production mode and if there are errors the process will exit. This should be used on CI and when shipping to a production-like environment.\n\n## Design systems\n\nThe theme provides two options for design systems, [Storybook](https://storybook.js.org/) and [Patternlab](https://patternlab.io/). You can choose which design system you would like to opt for during the theme generation process.\n\nWe recommend using Storybook as it supports multiple JavaScript frameworks and doesn't have a dependency on PHP.\n\n### Storybook\n\nYou can refer to the [Storybook](https://storybook.js.org/) documentation to know more about how it works.\n\nIf you have opted for Storybook as the design system for your theme, the generator will automatically include all the relevant configurations and packages. It will also update the `start` and `build` commands.\n\n- `yarn start`: To start the Storybook server on port 3000 and watch for changes.\n- `yarn build`: To build the Storybook assets. These can be found in the `storybook-static` directory.\n\n### Patternlab\n\nYou can refer to the [Pattern Lab](https://patternlab.io/) documentation to know more about how it works.\n\nIf you have opted for PatternLab as the design system for your theme, the generator will automatically include all the relevant configurations and packages. It will also update the `start` and `build` commands.\n\n- `yarn start`: To start the Pattern Lab server on port 3000 and watch for changes.\n- `yarn build`: To build the Pattern Lab assets. These can be found in the `dist/public` directory.\n\n## Component generation\n\nYou can use the generator to interactively generate components. These components are structured following the Atom design conventions and require a `components` directory with your theme.\n\n[![asciicast](https://asciinema.org/a/449461.svg)](https://asciinema.org/a/449461)\n\n## Additional Tooling\n\n### RTL support\n\nWe use [postcss-rtlcss](https://www.npmjs.com/package/postcss-rtlcss) for RTL support. You don't need to explicitly write your styles to support both LTR and RTL. You just target LTR and the theme compilation will take care of generating compatible RTL styles.\n\n**Input styles**\n\n```css\nh2 {\n  text-align: left;\n}\n```\n\n**Generated styles**\n\n```\n[dir=\"ltr\"] h2 {\n  text-align: left;\n}\n\n[dir=\"rtl\"] h2 {\n  text-align: right;\n}\n```\n\n### Image Optimization\n\nThe theme uses [gulp-imagemin](https://www.npmjs.com/package/gulp-imagemin) for optimizing your images. This is set up out of the box, all we have to do is to add images under the `/images` directory.\n\n### TypeScript support\n\nThe theme comes supports and recommends using [TypeScript](https://www.typescriptlang.org/). TypeScript provides all the features of JavaScript with additional features that come with strongly typed programming languages.\n\nThe TypeScript files would be placed within the `components` directory. On running the `start` or `build` scripts the compiled asset is placed in the `dist` directory.\n\n### Linting \u0026 Code Formatting support\n\nLinting and code formatting support are included, with standard defaults. You can find the configuration in the following files: `.prettierrc.json`, `.eslintrc.json`, and `.stylelintrc.json`.\n\nAll the `scss`, `css`, `ts`, `js`, `json`, and `yml` files listed under the `components` directory are lint and formatted.\n\n### Cypress support\n\n[Cypress](https://www.cypress.io/) has been integrated with the theme and a sample test `home.spec.js` is provided.\n\n- `yarn cypress run`: To can run cypress tests from the terminal.\n- `yarn cypress open`: To start the visual browser-based test runner.\n\n### Tailwind\n\nThe generated themes let you choose between writing custom stylesheets using Sass or using [TailwindCSS](https://tailwindcss.com/) instead. The generated TailwindCSS style is included in both the design systems and doesn't need any additional efforts.\n\nTo enable TailwindCSS support on your generated theme:\n\n- Uncomment the contents of `tailwind.scss` inside the `components` directory.\n- Uncomment the tailwind library declaration in `.libraries.yml`\n  ```bash\n  tailwind:\n    css:\n      theme:\n        dist/components/tailwind.css: {}\n  ```\n- Enable the attachment of the library in `.info.yml` file.\n\n  ```bash\n  libraries:\n    - core/normalize\n  #  - \u003ctheme-name\u003e/global\n    - \u003ctheme-name\u003e/tailwind\n  ```\n\n- We have integrated the default Tailwind setup, you can customize and optimize the integration. You can refer to [Customising Tailwind](https://tailwindcss.com/docs/installation#customizing-your-configuration) and [Optimising for production](https://tailwindcss.com/docs/optimizing-for-production) sections in the official documentation.\n- Use the `build` script to generate an optimized build of the TailwindCSS stylesheet. TailwindCSS's `purge` directive is configured to generate only the relevant CSS classes used in the `components` and `templates` directories.\n- The theme uses `core/normalize` from Drupal to introduce the reset styles. To avoid conflicts we have disabled the resets TailwindCSS generates in the `tailwind.config.js` file.\n\n## Contribution guidelines\n\n**Did you find a bug?**\n\n- **Ensure the bug was not already reported** by searching on GitHub under [Issues](https://github.com/axelerant/create-drupal-theme/issues).\n\n- If you're unable to find an open issue addressing the problem, [open a new one](https://github.com/axelerant/create-drupal-theme/issues/new). Be sure to include a **title and clear description**, as much relevant information as possible, and a **code sample** or a **scenario** demonstrating the expected behavior that is not occurring.\n\n**Did you write a patch that fixes a bug?**\n\n- Open a new GitHub pull request with the patch.\n\n- Ensure the PR description clearly describes the problem and solution. Include the relevant issue number if applicable.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxelerant%2Fcreate-drupal-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faxelerant%2Fcreate-drupal-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxelerant%2Fcreate-drupal-theme/lists"}