Owl-kit

SASS

Namespaces

b- Block indicate a block element of the new structure introducing namespace to our css is- Status tells us that the DOM currently has a temporary, optional, or short-lived style applied to it due to a certain state being invoked like is-open for a menu. js- JavaScript classes are for javascript manipulation and should not have any style associate.

Possible enhancement

o- Objects are abstract elements that can be used by lot of things like the media object. If you really must, be very careful when modifying one. c- Components are tiny concrete elements with one specific defined purpose like a button. b- Blocks are big concrete sections like the site header.

BEM

Owl-kit uses the block, element and modifier (BEM) methodology with namespace. The syntax is .block__element--modifier.

Let's see how it works with this silly example:

$block: '.c-narwhal';

#{$block} {
  float: left;

    &__horn {
      display: block;

      &--pretty-big {
        font-size: large;
    }
  }
}

Which produces this beautiful CSS:

.c-narwhal {
  float: left;
}

.c-narwhal__horn {
  display: block;
}

.c-narwhal__horn--pretty-big {
  font-size: large;
}

References

• Atomic design
• Transparent namespaces
• BEM methodology

Styleguide

Installation

Node 8.1.4 +

cd styleguide && npm install

Tasks npm

Run application

npm run start
npm run css:compile

Run application and watch changes

npm run server
npm run css:watch

Note: you need to have nodemon installed

npm install -g nodemon

How to release a new version

It's easy!

Update the package version in the package.json file

And add a summary of the changes in the CHANGELOG.md file

After that, you just need to publish on npm:

$ npm publish