https://github.com/oncomouse/middleman-bem-html
https://github.com/oncomouse/middleman-bem-html
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/oncomouse/middleman-bem-html
- Owner: oncomouse
- Created: 2016-07-02T16:05:47.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-02T16:07:40.000Z (about 10 years ago)
- Last Synced: 2025-01-21T15:48:37.140Z (over 1 year ago)
- Language: Ruby
- Size: 4.88 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# middleman-bem-html
A Middleman extension to add BEM classes to HTML based on HTML attributes.
Makes use of [bem_html](https://github.com/oncomouse/bem_html) to handle class generation and [css_dead_class](https://github.com/oncomouse/css_dead_class) to cleanup unused CSS classes.
## 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
Add
~~~
gem "middleman-bem-html"
~~~
to your `Gemfile` and run `bundle update`
## Configuration
In `config.rb`, add the following:
~~~ruby
activate :bem_html
config[:classes_to_keep] = [
'no-js',
]
config[:internal_css] = true
~~~
The two configuration options are:
### `:classes_to_keep`
An array of CSS class names to not remove, even if they are not present in any of the CSS files.
### `:internal_css`
**defaults to `true`**
If you are using any `external_pipeline` calls to configure your CSS files (like gulp or PostCSS), the `after_build` method that this extension uses to remove all the unused CSS from production HTML will run before the CSS has been generated (as `external_pipeline` calls always run *after* extension methods), as such you *must* use an `external_pipeline` to remove the unused CSS classes this extension may generate.
If this effects you, please consider using [postcss-deadclass](https://github.com/oncomouse/postcss-deadclass) to remove the unused CSS classes using PostCSS.