Fastred-bem NPM

Fastred-BEM

Web development bootstrap with extendable BEM blocks, Fastred modules and Webpack configuration.

Based on:

BEM
Fastred
Webpack

Languages:

Pug
Stylus
JavaScript
PHP

Components:

pug-php
Fastred

JavaScript

Requirements

Webpack

Installation

npm install fastred-bem

PHP

Requirements

PHP 5.3+

Installation

composer require dehero/fastred-bem

File structure of block

Common block file structure looks like this:

block
|---block.pug
|---block__item.pug
|---block.styl
|---block.js
|---block.json
|---block.css.styl

block.js

require('block/block.css.styl');
template('block', require('block/block.pug'));
template('block__item', require('block/block__item.pug'));

block.styl

Here you declare global stylus variables and mixins and load json with json function:

$json = json('./block.json', {hash: true})

$block__variable_1 = $json.block__variable_1
$block__variable_2 = #fff

block__mixin()
    color $block__variable_2

The file is loaded when you call @require block in Stylus files of other blocks.

Don't put classes inside block.styl. If you do this and use @require block more than once in your project, these classes will double in the output CSS. block.css.styl should be used for defining classes, as it's required only once by block.js.

block.css.styl

Here you declare classes and other stuff that goes to output CSS:

@require 'block/block.styl'
@require block1
@require block2

.block
  color $block1__color
  background #fff
  
  &_dark
    background #000
  
.block__item
  color $block2__color
  
  &_size
  
    &_l
      font-size 1.5rem
  
    &_xl
      font-size 2rem