Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yustintr/storyblend
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.
https://github.com/yustintr/storyblend
drupal drupal-10 drupal-theme storybook twigjs
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/yustintr/storyblend
- Owner: yustinTR
- Created: 2024-01-26T10:44:58.000Z (about 1 year ago)
- Default Branch: 0.1.x
- Last Pushed: 2024-02-20T09:55:18.000Z (12 months ago)
- Last Synced: 2024-11-24T17:04:17.823Z (2 months ago)
- Topics: drupal, drupal-10, drupal-theme, storybook, twigjs
- Language: SCSS
- Homepage:
- Size: 3.88 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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 StartedTo 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 ``` composer create-theme ```
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.