npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bemmit

v1.0.4

Published

A simple, opinionated BEM-style classname generator.

Downloads

74

Readme

bemmit

Build Status Code Climate Test Coverage

A small utility for quickly generating BEM-style naming for CSS classes.

Installation

# Install the package
npm install --save bemmit

Usage

var bemmit = require('bemmit');

// Create an instance of bemmit.
var getClass = bemmit('my-block');

// Now you can quickly add BEM-friendly classes to your HTML:
var myMarkup = `
<div class="${getClass()}">
    <h1 class="${getClass('header')}">Choose Your Weapon</h1>
    <ul class="${getClass('weapon-list')}">
        <li class="${getClass('weapon', ['rubber-chicken'])}">
            Rubber Chicken
        </li>
        <li class="${getClass('weapon', ['feather'])}">
            Feather
        </li>
        <li class="${getClass('weapon', ['colorful-language'])}">
            Colorful Language
        </li>
    </ul>
</div>
`;

This generates the following markup:

<div class="my-block">
    <h1 class="my-block__header">Choose Your Weapon</h1>
    <ul class="my-block__weapon-list">
        <li class="my-block__weapon my-block__weapon--rubber-chicken">
            Rubber Chicken
        </li>
        <li class="my-block__weapon my-block__weapon--feather">
            Feather
        </li>
        <li class="my-block__weapon my-block__weapon--colorful-language">
            Colorful Language
        </li>
    </ul>
</div>

API

bemmit(blockName)

Generates a function that will return BEM-style CSS classnames.

Parameters

  • blockName — the name of the block. This is used as the base of the class name.

Return Value

  • Function — a function that will generate CSS class names, with optional element and modifiers parameters.

bemmit(blockName)([element][, [modifiers]])

Generates BEM-style CSS classname(s).

Parameters

  • element (optional) — the element name
  • modifiers (optional) — an array of modifiers for the class

Return Value

  • String — the class or classes

Examples of Usage

// Load bemmit
var bemmit = require('bemmit');

// Create a block called 'photo'.
var getClass = bemmit('photo');

// Get the block classname.
getClass(); // -> photo

// Get the block classname with the modifiers 'active' and 'round'.
getClass(null, ['active', 'round']); // -> photo photo--active photo--round

// Get an element class for the caption
getClass('caption'); // -> photo__caption

// Get an element class for the share button with the modifier 'pinterest'.
getClass('share', ['pinterest']); // -> photo__share photo__share--pinterest