StoryBlend - Drupal Starter Theme with Storybook

StoryBlend is a powerful Drupal starter theme seamlessly integrated with Storybook, offering a robust foundation for building and showcasing dynamic Drupal themes. This theme follows the BEM (Block Element Modifier) methodology for writing modular and maintainable CSS. Getting Started

To get started with StoryBlend, follow these steps:

Use StoryBlend:

composer require yustintr/storyblend

Clone the repository:

git clone  git@github.com:yustinTR/StoryBlend.git

Install dependencies:

npm install

Development Workflow

Run Storybook

Start Storybook to preview and develop your theme components:

npm run storybook

Visit http://localhost:6006/ in your browser to view the Storybook.

Compile CSS

Compile and build your Drupal theme using the following command:

npm run dev/build

This command will process your CSS files following the BEM methodology, ensuring modularity and maintainability.

Create theme

To create a custom theme from this bases you can run the command composer create-theme <themename> from the StoryBlend folder. This will create the theme in the themes/custom folder. The argument is optional. When omitted the theme will be called StoryBlend.

BEM Methodology

The CSS in StoryBlend is written following the BEM (Block Element Modifier) methodology. BEM is a naming convention that helps create clear and maintainable code. Here's a brief overview:

Block: Represents a standalone component that is meaningful on its own.

.block {}

Element: Represents a part of a block and has no standalone meaning.

.block__element {}

Modifier: Represents a different state or version of a block or an element.

.block--modifier {}
.block__element--modifier {}

Ensure your CSS adheres to the BEM methodology for consistency and scalability.