# grunt-init-block

> Generates css file structure according to classes used in HTML. Relies on BEM naming for classes.

Latest version **0.2.0** (published 2013-09-16) · 0 weekly downloads

## Install

```sh
npm install grunt-init-block
pnpm add grunt-init-block
yarn add grunt-init-block
bun add grunt-init-block
```

Provides the command `init-block`.

## Health

**Score 10/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2013-09-16 |
| First published | 2013-07-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.8.0 |
| Dependencies | 5 |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Andrew Motoshin |
| Maintainers | htmlhero |
| Keywords | gruntplugin, bem, markup |

## Links

- npm: https://www.npmjs.com/package/grunt-init-block
- Repository: https://github.com/htmlhero/grunt-init-block
- Issues: https://github.com/htmlhero/grunt-init-block/issues
- npm.io page: https://npm.io/package/grunt-init-block

## Dependencies (5)

- [colors](https://npm.io/package/colors.md) ~0.6.2
- [lodash](https://npm.io/package/lodash.md) ~2.0.0
- [cheerio](https://npm.io/package/cheerio.md) ~0.12.0
- [optimist](https://npm.io/package/optimist.md) ~0.6.0
- [copy-paste](https://npm.io/package/copy-paste.md) 0.0.9

## Recent versions

- 0.2.0 (latest) — 2013-09-16
- 0.1.0 — 2013-07-20

## README

# grunt-init-block

> Generates css file structure according to classes used in HTML. Relies on BEM naming for classes.

## Getting Started
This plugin requires Grunt `~0.4.1`

If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

```shell
npm install grunt-init-block --save-dev
```

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

```js
grunt.loadNpmTasks('grunt-init-block');
```

## The "initBlock" task

### Overview
In your project's Gruntfile, add a section named `initBlock` to the data object passed into `grunt.initConfig()`.

```js
grunt.initConfig({
	initBlock: {
		options: {
			// Task-specific options go here.
		},
		your_target: {
			// Target-specific file lists and/or options go here.
		}
	}
})
```

### Options

#### options.attr
Type: `String`
Default value: `'init-block'`

Attribute that contains the name of the target file.
Example: `<div class="block" init-block="blocks.css">`
If there is no filename, the text will be copied to the clipboard.

#### options.element
Type: `String`
Default value: `'__'`

Element class name separator in your HTML.
Example: `<div class="block__element">`

#### options.modifier
Type: `String`
Default value: `'_'`

Modifier class name separator in your HTML.
Example: `<div class="block _modifier">`

#### options.longModifier
Type: `Boolean`
Default value: `false`

Use a long modifier.
Example: `<div class="block block_modifier">`

#### options.preprocessor
Type: `Boolean`
Default value: `false`

Use stylus style for output without braces.

#### options.indent
Type: `String`
Default value: `'\t'`

Output line indent style. Use spaces or tabs.

### Usage Example

Describe the task in your Gruntfile.js:

```js
grunt.initConfig({
	initBlock: {
		options: {},
		all: {
			src: ['test/*.html'],
            dest: 'test/'
		}
	}
})
```

write html:

```html
<div class="post _modifier" init-block="blocks.css">
	<h2 class="post__title"></h2>
	<div class="post__content"></div>
	<div class="post__comments"></div>
</div>
```

then run `grunt initBlock` and you will get in blocks.css:

```css
.post {

}
	.post__title {

	}
	.post__content {

	}
	.post__comments {

	}
.post._modifier {

}
```

## Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).

---
_Source: https://npm.io/package/grunt-init-block · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._