/underscore

NextJS BEM CSS Demonstration Tool

Primary LanguageJavaScript

BEM Combinations Generator

A small, built for fun utility tool to explore different combinations of common BEM CSS elements.

Built by https://twitter.com/jasontcrabtree, https://jasontcrabtree.com for fun.

Built with:

  • NextJS
  • HeadlessUI
  • Netlify
  • GitHub

TODO:

  • Display the combined selection in a single line, above the selection cards
  • Add the ability to copy the chosen class
  • Reset to default options
  • LocalStorage of previous selection
  • Validation for convention breaking combinations (e.g. modifier without a block)
  • (Stretch) Auto-generate possible combinations based on block selections
  • (Stretch) Add references to good modern, advanced BEM resources

Project details

npm run dev to run project. Built to be accessible to set-up and work with.