https://github.com/nitive/posthtml-bem-sugar

PostHTML plugin for support to simplify the maintenance of BEM naming structure in jade.
https://github.com/nitive/posthtml-bem-sugar

Last synced: 7 days ago
JSON representation

PostHTML plugin for support to simplify the maintenance of BEM naming structure in jade.

• Host: GitHub
• URL: https://github.com/nitive/posthtml-bem-sugar
• Owner: Nitive
• Created: 2016-05-27T05:01:00.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-28T18:58:26.000Z (about 8 years ago)
• Last Synced: 2024-11-16T16:49:05.847Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 14.6 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# PostHTML-bem-sugar

[![Build Status](https://travis-ci.org/rajdee/posthtml-bem.svg?branch=master)](https://travis-ci.org/rajdee/posthtml-bem?branch=master) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[PostHTML](https://github.com/posthtml/posthtml) plugin for support to simplify the maintenance of [BEM](http://bem.info) naming structure in jade. It is works on top of [posthtml-bem](https://github.com/rajdee/posthtml-bem).

## Install

```

$ npm install --save-dev posthtml-jade posthtml-bem posthtml-bem-sugar

```

##Features

### Blocks

```jade

.-MadTeaParty

  | Mad Tea Party

```

This would render like

```html



    Mad Tea Party



```


### Elements

```jade

.-MadTeaParty

  .__march-hare March Hare

```

This would render like

```html



    
March Hare



```


### Modifiers

```jade

.-MadTeaParty

  .__march-hare._type_mad March Hare

  .__march-hare._mad March Hare

```

This would render like

```html



    


        March Hare

    

    


        March Hare

    



```


## Usage

```javascript

var posthtml = require('posthtml');

// It is default config

var config = {

  blockPrefix: '-',

  elemPrefix: '__',

  modPrefix: '_',

  modDlmtr: '_',

};

var jade = [

  '.-mad-tea-party',

  '  .__march-hare._type_mad March Hare',

  '  .__hatter._type_mad Hatter',

  '  .__dormouse._state_sleepy Dormouse'

].join('\n')

posthtml()

  .use(require('posthtml-jade')())

  .use(require('posthtml-bem-sugar')(config))

  .use(require('posthtml-bem')())

  .process(jade)

  .then(function (result) {

    console.log(result.html);

  });

```

## With Gulp

```javascript

var gulp = require('gulp'),

    rename = require('gulp-rename'),

    posthtml = require('gulp-posthtml');

gulp.task('default', function () {

  return gulp.src('before.jade')

    .pipe(posthtml([

      require('posthtml-jade')(),

      require('posthtml-bem-sugar')({

        // defaults

        blockPrefix: '-',

        elemPrefix: '__',

        modPrefix: '_',

        modDlmtr: '_',

      }),

      require('posthtml-bem')(),

    ]))

    .pipe(rename('after.html'))

    .pipe(gulp.dest('.'));

});

```