文件列表:

.storybook/
components/
favicons/
includes/install/
public/
src/
storybook-static/
.eslintignore
.eslintrc.json
.nvmrc
.prettierrc.json
.stylelintcache
.stylelintrc.json
StoryBlend.breakpoints.yml
StoryBlend.info.yml
StoryBlend.libraries.yml
StoryBlend.theme
composer.json
favicon.ico
logo.svg
logo_transparent.svg
package-lock.json
package.json
screenshot.png
vite.config.js

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:

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 ``` 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.

近期下载者：

相关文件：

评论：[我要评论] [举报此文件]

收藏者：