https://github.com/oncomouse/bem_html
https://github.com/oncomouse/bem_html
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/oncomouse/bem_html
- Owner: oncomouse
- Created: 2016-07-02T16:07:59.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-05T14:31:35.000Z (about 10 years ago)
- Last Synced: 2025-01-21T15:48:35.631Z (over 1 year ago)
- Language: Ruby
- Size: 3.91 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# bem_html
BEM helpers for HTML.
Utility to convert HTML attributes (`bem-block`, `bem-element`, and `bem-modifiers`) to proper CSS classnames for use in BEM.
## Purpose
In large projects, BEM namespacing can get fairly complicated. In Sass and PostCSS, there exist a number of helper methods to simply the creation of nested Block, Element, Modifier classes; however, this plugin provides similar helper methods within HTML itself.
## Sample Usage
Say you had a BEM block called "widget" that had the following structure in HTML:
~~~html
~~~
With bem-html, you could define that structure instead as the following:
~~~html
Heading
First Paragraph
~~~
And this extension would produce the desired HTML.
Originally, this extension was specifically designed for HAML, where it really shines:
~~~haml
%div{bem:{block: :widget}}
%h1{bem:{element: :heading, modifiers: [:lime]}} Heading
%section{bem:{element: :content}}
%p{bem: {element: "first-paragraph"}} First Paragraph
~~~
## Installation
Install using `gem bem_html`
## Usage
Sample Ruby code:
~~~ ruby
require "bem_html"
html = IO.read("index.html")
BemHtml.parse(html) # -> Will output index.html with bem-* tags converted to CSS names
~~~
## Todo
* Binary parser for CLI usage