Download the PHP package yustintr/storyblend without Composer
On this page you can find all versions of the php package yustintr/storyblend. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download yustintr/storyblend
More information about yustintr/storyblend
Files in yustintr/storyblend
Package storyblend
Short Description StoryBlend Base Theme for Drupal x Storybook
License GPL-2.0-or-later
Informations about the package storyblend
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 [email protected]: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
from the StoryBlend folder. This will create the theme in the themes/custom folder.
The
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.