Content
Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/werty1001/bempug
Simple mixins to help you writing code on BEM methodology in pug or jade projects.
https://github.com/werty1001/bempug
bem html jade mixins pug
Last synced: 3 months ago
JSON representation
Simple mixins to help you writing code on BEM methodology in pug or jade projects.
- Host: GitHub
- URL: https://github.com/werty1001/bempug
- Owner: werty1001
- License: mit
- Created: 2016-11-06T19:27:30.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-23T15:36:59.000Z (almost 8 years ago)
- Last Synced: 2024-09-28T08:42:42.212Z (3 months ago)
- Topics: bem, html, jade, mixins, pug
- Language: HTML
- Homepage:
- Size: 28.3 KB
- Stars: 16
- Watchers: 5
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# BemPug
[](https://raw.githubusercontent.com/werty1001/bempug/master/LICENSE) [](https://www.npmjs.com/package/bempug) [](https://www.npmjs.com/package/bempug)
Simple mixins to help you writing code on [BEM](https://en.bem.info/) methodology in [pug](https://pugjs.org/) or jade projects.
---
> You like BEM? Try [BemGo](https://github.com/werty1001/bemgo) — starter kit for developing BEM apps using Gulp and Webpack.
---
### Anchors
[Install](#install) | [Mixins](#mixins) | [Examples](#examples) | [Helpers](#helpers) | [Changelog](#changelog)
---
### Install
Install from npm:
```sh
npm i bempug -D
```
Then include `index` file to your pug or jade project:
```Jade
include ../../node_modules/bempug/index
```
---
### Mixins
Block mixin:
```Pug
+b( name, data, tag )
```
- **name** `String`
- **data** `String or Object`
- **data.m** `String` — block modifier
- **data.p** `Boolean` — disable parent mode
- **data.e** `Array or String` — mix block with element
- **data.b** `Array or String` — mix block with another block
- **data.t** `String` — block tag
- **data.s** `String` — block separators
- **tag** `String`
> If data argument is String it will be a modifier.
Element mixin:
```Pug
+e( name, data, tag )
```
- **name** `String`
- **data** `String or Object`
- **data.m** `String` — element modifier
- **data.p** `String` — parent block
- **data.e** `Array or String` — mix element with another element
- **data.b** `Array or String` — mix element with block
- **data.t** `String` — element tag
- **data.s** `String` — element separators
- **tag** `String`
> If data argument is String it will be a modifier.
---
### Examples
[Block](#block) | [Element](#element) | [Modifier](#modifier) | [Tag](#tag) | [Mix](#mix) | [Separators](#separators)
---
### Block
Simple example:
```Pug
+b( 'block' )
+e( 'element' ) Text
```
```HTML
Text
```
You can to disable parent mode and element will ignore this block:
```Pug
+b( 'header' )
+b( 'grid', {p: false} ) // or short {p:0}
+e( 'logo' ) Logo
```
```HTML
Logo
```
---
### Element
Element depends on parent block:
```Pug
+b( 'content' )
+e( 'layout' ) Content
```
```HTML
```
You can set parent block for element directly:
```Pug
+b( 'content' )
+e( 'layout', {p: 'page'} ) Content
```
```HTML
Content
```
---
### Modifier
Block and element have modifier:
```Pug
+b( 'alert', 'success' )
+e( 'text', 'bolder' ) Success
```
```HTML
Success
```
Block and element have more than one modifier:
```Pug
+b( 'alert', 'success.active' )
+e( 'text', 'bolder.italic' ) Success
```
```HTML
Success
```
Also, you can set modifiers in `Object`:
```Pug
+b( 'alert', {m: 'success.active'} ) Success
```
```HTML
Success
```
---
### Tag
Default tag is **div**, but you can set it directly:
```Pug
+b( 'news', {}, 'article' )
+e( 'title', {}, 'h1' ) Title
// Or in data Object
+b( 'news', {t: 'article'} )
+e( 'title', {t: 'h1'} ) Title
```
```HTML
Title
```
Sometimes mixin can be smart and tag depends on parent or attributes:
```Pug
+b( 'list', {t: 'ul'} )
+e( 'item' ) My item 1
+e( 'item' ) My item 2
+e( 'item' ) My item 3
+b( 'link' )(href='https://www.npmjs.com/package/bempug')
+b( 'text' ) My text
```
```HTML
- My item 1
- My item 2
- My item 3
My text
```
Also, you can use `tagByName` global option for set default tag by name:
```Pug
- BEMPUG.tagByName = {list: 'ul', form: 'form', fields: 'fieldset'};
+b( 'list' )
+e( 'item' ) Item
+e( 'item' ) Item
+b( 'form' )
+e( 'fields' ) Fields
```
```HTML
- Item
- Item
Fields
```
---
### Mix
Block is mixed with element:
```Jade
+b( 'title', {e: 'article'} ) Title
```
```HTML
Title
```
You can set name of element in mix with colon:
```Pug
+b( 'title', {e: 'article:my-name'} ) Title
```
```HTML
Title
```
Block is mixed with two elements:
```Pug
+b( 'title', {e: ['article', 'content']} ) Title
```
```HTML
Title
```
Also, you can use ampersand `&` sign as parent block reference:
```Pug
+b( 'news' )
+b( 'title', {e: '&'} ) Title
+b( 'text', {e: '&:description'} ) Text
```
```HTML
Title
Text
```
Block is mixed with element which has modifiers:
```Pug
+b( 'title', {e: 'news|bolder.size-m'} ) Title
```
```HTML
Title
```
Element is mixed with another element:
```Pug
+b( 'footer' )
+e( 'bottom', {e: 'page'} )
```
```HTML
```
Element is mixed with block:
```Pug
+b( 'footer' )
+e( 'bottom', {b: 'grid'} )
```
```HTML
```
Block is mixed with another block:
```Pug
+b( 'article', {b: 'news'} ) Content
```
```HTML
Content
```
Block is mixed with another block which has modifiers:
```Pug
+b( 'article', {b: 'news|first'} ) Content
```
```HTML
Content
```
Block is mixed with two blocks which have modifiers:
```Pug
+b( 'article', {b: ['news|first','fixed|active']} ) Content
```
```HTML
Content
```
---
### Separators
You can change global separators:
```Pug
- BEMPUG.modifier = '_';
- BEMPUG.element = '__';
+b( 'alert', 'success.active' )
+e( 'text', 'bolder.italic' ) Success
```
```HTML
Success
```
Also, you can set separators for each block and ignore global settings `'modifier|element'`:
```Pug
+b( 'news', {e: 'content', m: 'first', s: '---|___' } )
+b( 'text', {e: true, m: 'bolder'} ) Text
```
```HTML
Text
```
---
### Helpers
[Get current block](#get-current-block) | [Get current parent](#get-current-parent) | [Callbacks](#callbacks)
---
### Get current block
You can get current block name:
```Pug
+b( 'nav' )
+e( 'item' )
- console.log( BEMPUG.getCurrentBlock() ); // 'nav'
+b( 'img' )
- console.log( BEMPUG.getCurrentBlock() ); // 'img'
```
---
### Get current parent
You can get current parent `Object`:
```Pug
+b( 'html', 'no-js', 'html' )(lang='en')
- console.log( BEMPUG.getCurrentParent() );
```
```JS
{ type: 'block',
name: 'html',
tag: 'html',
attributes: { lang: 'en' },
sep: { modifier: '--', element: '__' },
classes: [ 'html', 'html--no-js' ],
parent: {},
selfClosing: false }
```
---
### Callbacks
You can set `beforeParse` callback:
```Pug
- BEMPUG.beforeParse[ 'input' ] = function( block ) {
if ( typeof block.data.m === 'undefined' ) block.data.m = 'default';
}
+b( 'input', {m: 'search'} ) // Have modifier 'search'
+b( 'input' ) // No modifier, but we set modifier 'default' by callback
```
```HTML
```
You can set `afterParse` callback:
```Pug
- BEMPUG.afterParse[ 'page' ] = function( block ) {
block.setTag( 'body' );
block.addModifier( 'test' );
block.attributes.itemscope = true;
block.attributes.itemtype = 'http://schema.org/WebPage';
}
+b( 'page' ) My page
```
```HTML
My page
```
---
### Changelog
#### 1.1.1
* **Fixed**: disable parent mode not work in cb
* **Fixed**: name of element in mix with another element
#### 1.1.0
* **Add**: ampersand sign for mix
* **Add**: mix element with blocks and another elements
#### 1.0.2
* **Add**: some global helpers
* **Add**: before / after parse callback
* **Fixed**: block and element separators work for any descendant
* **Fixed**: default tag depends on parent tag for any descendant
#### 1.0.1
* **Add**: disable parent mode for blocks
#### 1.0.0
* **Release version**
---
### Thanks
Many thanks to Roman Komarov for the [original idea](https://github.com/kizu/bemto).