https://github.com/capdiem/bemit

A BEM(Block Element Modifier) classes generator.
https://github.com/capdiem/bemit

bem bem-css bem-methodology blazor

Last synced: 8 days ago
JSON representation

A BEM(Block Element Modifier) classes generator.

• Host: GitHub
• URL: https://github.com/capdiem/bemit
• Owner: capdiem
• Created: 2023-07-30T07:22:52.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-05-18T13:09:03.000Z (8 months ago)
• Last Synced: 2024-05-19T12:41:51.094Z (8 months ago)
• Topics: bem, bem-css, bem-methodology, blazor
• Language: C#
• Homepage:
• Size: 38.1 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# BemIt

A BEM(Block Element Modifier) classes generator.

> [BEM](https://getbem.com/) — is a methodology that helps you to create reusable components and code sharing in front‑end development.

## Getting Started

### Prerequisites

NET 6.0 or later

### Installing

```shell

dotnet add package BemIt

```

### Usage

```csharp

using BemIt;

var card = new Block("card"); // card

var outlinedCard = card.Modifier("outlined"); // card--outlined

var cardTitle = card.Element("title"); // card__title

var largeCardTitle = cardTitle.Modifier("large"); // card__title--large

```

```csharp

using BemIt;

enum Density

{

    Dense,

    Comfortable,

    Compact,

}

var outlined = true;

var isDisabled = true;

var density = Density.Dense;

var cardModifierBuilder = new Block("card")

    .CreateModifierBuilder()

    .Add(outlined)

    .Add("disabled", isDisabled)

    .Add(density)

    .AddClass("theme--light");

var cardClasses = cardModifierBuilder.Build();

// output: card card--outlined card--disabled card--density-dense theme--light

```