{"id":21703090,"url":"https://github.com/one-nexus/cell","last_synced_at":"2025-04-12T15:06:58.540Z","repository":{"id":34024477,"uuid":"147679271","full_name":"One-Nexus/Cell","owner":"One-Nexus","description":"Style BEM DOM elements using Sass","archived":false,"fork":false,"pushed_at":"2023-01-07T02:27:50.000Z","size":1459,"stargazers_count":20,"open_issues_count":13,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T15:06:53.219Z","etag":null,"topics":["bem","modules","sass","stylesheets","styling","synergy","ui-components"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/One-Nexus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-06T13:39:46.000Z","updated_at":"2022-02-22T20:09:55.000Z","dependencies_parsed_at":"2023-01-15T04:02:45.446Z","dependency_job_id":null,"html_url":"https://github.com/One-Nexus/Cell","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-Nexus%2FCell","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-Nexus%2FCell/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-Nexus%2FCell/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/One-Nexus%2FCell/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/One-Nexus","download_url":"https://codeload.github.com/One-Nexus/Cell/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248586235,"owners_count":21128997,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bem","modules","sass","stylesheets","styling","synergy","ui-components"],"created_at":"2024-11-25T21:29:18.003Z","updated_at":"2025-04-12T15:06:58.518Z","avatar_url":"https://github.com/One-Nexus.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/One-Nexus/Cell/blob/master/LICENSE)\n[![Build Status](https://travis-ci.com/One-Nexus/Cell.svg?branch=master)](https://travis-ci.com/One-Nexus/Cell)\n[![npm version](https://badge.fury.io/js/%40onenexus%2Fcell.svg)]((https://www.npmjs.com/package/@onenexus/cell))\n[![npm downloads](https://img.shields.io/npm/dm/@onenexus/cell.svg)](https://www.npmjs.com/package/@onenexus/cell)\n\n\u003e Style BEM DOM elements using Sass [[View SassDocs](https://one-nexus.github.io/Cell/sass/)]\n\n\u003cimg src=\"https://edmundreed.com/projects/cell/banner.png\" /\u003e\n\n* [Overview](#overview)\n* [Installation \u0026 Setup](#installation--setup)\n* [Creating a Module](https://github.com/One-Nexus/Cell/wiki/Creating-a-Module)\n* [Mixins](#mixins)\n* [Utility Functions](#utilities)\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth colspan=\"4\"\u003eCodeSandbox Demos\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ca href=\"https://codesandbox.io/s/cell-demo-r04z5\"\u003eStandard Demo\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ca href=\"https://codesandbox.io/s/cell-demo--js-iklx3\"\u003eJavaScript Demo\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ca href=\"https://codesandbox.io/s/cell-demo--react-hygf9\"\u003eReact Demo\u003c/a\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ca href=\"https://codesandbox.io/s/cell-demo--basic-p55bc\"\u003eBasic Sass-Only Demo\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Overview\n\nCell is used for styling DOM elements that follow the [Cell naming convention](https://github.com/One-Nexus/Cell/wiki/Cell-Naming-Convention) (which is almost identical to [BEM](http://getbem.com/)).\n\n\u003e [Learn how to integrate with React components](#using-with-react)\n\n* Cell is used for creating modular, configurable and scalable Sass components\n* Works with any Sass implementation (Ruby, Dart, Node...)\n* Requires Sass 3.4+ (4.9+ if using Node-Sass)\n* [Import themes/configuration into your Sass/Cell components as JavaScript/JSON](https://github.com/One-Nexus/Cell/wiki/JavaScript-Configuration#usage)\n* Built for the [Synergy framework](https://github.com/One-Nexus/Synergy)\n* [Compatible with Cell Query](https://github.com/One-Nexus/Synergy-Front-End-Guides/wiki/Cell-Query)\n\n### Example\n\nGiven the following markup for an accordion with an active panel component:\n\n\u003e [View CodeSandbox Demo](https://codesandbox.io/s/cell-demo--basic-p55bc)\n\n\u003e Unlike traditional BEM, you do not need separate classes for modifiers\n\n```html\n\u003cdiv class=\"accordion\"\u003e\n  \u003cdiv class=\"accordion__panel\"\u003e\n    \u003cdiv class=\"accordion__title\"\u003efoo\u003c/div\u003e\n    \u003cdiv class=\"accordion__content\"\u003ebar\u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"accordion__panel--active\"\u003e\n    \u003cdiv class=\"accordion_title\"\u003efizz\u003c/div\u003e\n    \u003cdiv class=\"accordion_content\"\u003ebuzz\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nThis can be styled with Cell like so:\n\n```scss\n@include module('accordion') {\n  @include component('panel') {\n    ...\n\n    @include is('active') {\n      @include component('content') {\n        display: block;\n      }\n    }\n  }\n\n  @include component('title') {\n    ...\n  }\n\n  @include component('content') {\n    ...\n    display: none;\n  }\n}\n```\n\n### Using `context()`\n\nThe above examples use the traditional _cascading_ paradigm to apply styles under certain conditions. You can see that to _show_ the `content` component above, the `display` property is applied in a cascading fashion _inside_ the `panel` component.\n\nCell allows you to go about this in a dfferent way, allowing you to keep all styles pertaining to a single component in one place, thanks to the [`context()`](https://github.com/One-Nexus/Cell/wiki/Context()) mixin, as seen in this example (this will produce identical CSS to the previous example):\n\n```scss\n@include module('accordion') {\n  @include component('panel') {\n    ...\n  }\n\n  @include component('title') {\n    ...\n  }\n\n  @include component('content') {\n    ...\n    display: none;\n\n    @include context(($this, 'panel'), 'active') {\n      display: block;\n    }\n  }\n}\n```\n\n### Using [Cell Atoms](https://github.com/One-Nexus/Cell/wiki/Atoms)\n\n\u003e [Learn more about Cell Atoms](https://github.com/One-Nexus/Cell/wiki/Atoms)\n\nContinuing from the previous example, the `display` Atom can instead be used to handle the `display` property:\n\n```scss\n@include module('accordion') {\n  @include component('panel') {\n    ...\n  }\n\n  @include component('title') {\n    ...\n  }\n\n  @include component('content') {\n    ...\n    @include display((($this, 'panel'), 'active'), block, none);\n  }\n}\n```\n\n### Using [Cell Query (CQ)](https://github.com/One-Nexus/Synergy-Front-End-Guides/wiki/Cell-Query)\n\nCell can interpret and parse CQ by passing a CQ compatible Sass map as the second parameter to the `module()` mixin, allowing the `accordion` example to be re-written as:\n\n```scss\n@include module('accordion', (\n  'panel': (\n    ...\n  ),\n\n  'title': (\n    ...\n  ),\n\n  'content': (\n    ...\n    'display': none,\n\n    'panel-is-active': (\n      'display': block\n    )\n  )\n));\n```\n\n\u003e [Learn more about Cell and Cell Query (CQ)](https://github.com/One-Nexus/Cell/wiki/Cell-Query)\n\n## Installation \u0026 Setup\n\n```\nnpm install --save @onenexus/cell\n```\n\n```scss\n// this path will vary depending on where the library is being imported\n@import '../../node_modules/@onenexus/cell/dist/cell';\n```\n\nIf you are using Node Sass, you can import the library anywhere using:\n\n```scss\n@import '~@onenexus/cell/dist/cell';\n```\n\n\u003e See the [JavaScript Configuration](https://github.com/One-Nexus/Cell/wiki/JavaScript-Configuration) page for instructions on how to use JavaScript/JSON configuration\n\n## Using with JavaScript\n\nCell can be used with JavaScript for things like [theming](https://github.com/One-Nexus/Cell/wiki/Theming) and [module configuration](https://github.com/One-Nexus/Cell/wiki/Module-Configuration).\n\n\u003e [View CodeSandbox Demo](https://codesandbox.io/s/cell-demo--js-iklx3)\n\n\u003e [Using React?](#using-with-react)\n\n### Example\n\n```\nmodules/\n|--myModule/\n|  |--config.js\n|  |--styles.scss\nthemes/\n|--myTheme.js\napp.scss\n```\n\n###### themes/myTheme.js\n\n```js\nexport default {\n  colors: {\n    primary: '#00d4ff',\n    secondary: '#58ed02'\n  },\n  breakpoints: {\n    small: '720px',\n    large: '1400px'\n  }\n}\n```\n\n###### modules/myModule/config.js\n\n```js\nexport default (theme) =\u003e ({\n  name: 'myModule',\n  background: theme.colors.primary,\n  gutter: '1em'\n});\n```\n\n###### modules/myModule/styles.scss\n\n```scss\n@import 'config.js';\n\n@include module {\n  display: block;\n  margin-top: this('gutter');\n\n  @media (min-width: theme('breakpoints', 'small')) {\n    display: inline-block;\n  }\n}\n```\n\n###### app.scss\n\n```scss\n@import '~@onenexus/cell/dist/cell';\n@import 'themes/myTheme.js';\n@import 'modules/myModule/styles';\n```\n\n###### CSS Output\n\n```css\n.myModule, [class*=\"myModule--\"] {\n  background: #00d4ff;\n  display: block;\n  margin-top: 1em;\n}\n\n@media (min-width: 720px) {\n  .myModule, [class*=\"myModule--\"] {\n    display: inline-block;\n  }\n}\n```\n\n\u003e Note that the `background` property is output to CSS despite not being hard-coded inside `styles.scss` - this is because configuration properties that correspond to CSS properties can be automatically parsed as CSS - read the [Cell Query page](https://github.com/One-Nexus/Cell/wiki/Cell-Query) to learn more\n\n\u003e Read the [JavaScript Configuration page](https://github.com/One-Nexus/Cell/wiki/JavaScript-Configuration) for setup instructions and more information\n\n## Using with React\n\nUsing Cell with React can be as simple as configuring your Webpack to use [Sass-Loader](https://github.com/webpack-contrib/sass-loader). See how the below React accordion component can be styled by importing its corresponding Cell module (`styles.scss`):\n\n\u003e [View CodeSandbox Demo](https://codesandbox.io/s/cell-demo--react-hygf9)\n\n###### modules/Accordion/index.js\n\n```jsx\nimport React, { useState } from 'react';\nimport './styles.scss';\n\nconst Accordion = ({ panels, ...props }) =\u003e {\n  const [activeIndex, toggle] = useState(0);\n\n  return (\n    \u003cdiv className='accordion' { ...props }\u003e\n      {panels.map(({ heading, content }, index) =\u003e (\n        \u003cdiv className={`accordion__panel${index === activeIndex ? '--active':''}`}\u003e\n          \u003cdiv className='accordion__title' onClick={() =\u003e toggle(index)}\u003e\n            {title}\n          \u003c/div\u003e\n\n          \u003cdiv className='accordion__content'\u003e\n            {content}\n          \u003c/div\u003e\n        \u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n}\n\nexport default Accordion;\n```\n\n### Using with Lucid (React Library)\n\n[Lucid](https://github.com/One-Nexus/Lucid) is a React library for working with the Cell/BEM naming convention. If using Lucid, the above React component could be rewritten as:\n\n```jsx\nimport React, { useState } from 'react';\nimport { Module, Component } from '@onenexus/lucid';\nimport './styles';\n\nconst Accordion = ({ panels, ...props }) =\u003e {\n  const [activeIndex, toggle] = useState(0);\n\n  return (\n    \u003cModule name='accordion' { ...props }\u003e\n      {panels.map(({ heading, content }, index) =\u003e (\n        \u003cComponent name='panel' active={index === activeIndex}\u003e\n          \u003cComponent name='heading' onClick={() =\u003e toggle(index)}\u003e\n            {heading}\n          \u003c/Component\u003e\n\n          \u003cComponent name='content'\u003e\n            {content}\n          \u003c/Component\u003e\n        \u003c/Component\u003e\n      ))}\n    \u003c/Module\u003e\n  );\n}\n\nexport default Accordion;\n```\n\nThis solution offers all the practical benefits of scoped styling (thanks to the underlying Cell/BEM naming convention) without any of the uglyness that BEM usually brings, and without any of the overhead that CSS-in-JS techniques (and actual *scoping*) bring, keeping everything clean and tidy.\n\n## Useful Wiki Pages\n\n* [Creating a Cell Module](https://github.com/One-Nexus/Cell/wiki/Creating-a-Module)\n* [Module Configuration](https://github.com/One-Nexus/Cell/wiki/Module-Configuration)\n* [Theming](https://github.com/One-Nexus/Cell/wiki/Theming)\n* [Cell Query (CQ)](https://github.com/One-Nexus/Cell/wiki/Cell-Query)\n* [Using with JavaScript](https://github.com/One-Nexus/Cell/wiki/JavaScript-Configuration)\n* [Atoms](https://github.com/One-Nexus/Cell/wiki/Atoms)\n\n## Mixins\n\nCell comes with the following mixins to help create and structure your modules in the most efficient way possible:\n\n* [Module](https://github.com/One-Nexus/Cell/wiki/Module())\n* [Component](https://github.com/One-Nexus/Cell/wiki/Component())\n* [Modifier](https://github.com/One-Nexus/Cell/wiki/Modifier())\n* [Option](https://github.com/One-Nexus/Cell/wiki/Option())\n* [Value](https://github.com/One-Nexus/Cell/wiki/Value())\n* [Extend](https://github.com/One-Nexus/Cell/wiki/Extend())\n* [Context](https://github.com/One-Nexus/Cell/wiki/Context())\n* [Pseudo-State](https://github.com/One-Nexus/Cell/wiki/Pseudo-State())\n* [Wrapper](https://github.com/One-Nexus/Cell/wiki/Wrapper())\n\n## Utility Functions\n\n* [Create Config](https://github.com/One-Nexus/Cell/wiki/utilities#create-config)\n* [Enabled](https://github.com/One-Nexus/Cell/wiki/utilities#enabled)\n* [Value Enabled](https://github.com/One-Nexus/Cell/wiki/utilities#value-enabled)\n* [Option](https://github.com/One-Nexus/Cell/wiki/utilities#option)\n* [Setting](https://github.com/One-Nexus/Cell/wiki/utilities#setting)\n* [This](https://github.com/One-Nexus/Cell/wiki/utilities#this)\n* [Theme](https://github.com/One-Nexus/Cell/wiki/utilities#theme)\n\n## BEM Inspired Motivation\n\nThe initial motiviation behind creating Cell is twofold:\n\n* Address the uglyness of BEM\n* Address the practical implementation of BEM using Sass\n\nBEM solves very real problems like no other solution due to [its inherent nature](https://itnext.io/thinking-of-bem-as-a-ui-philosophy-instead-of-a-css-naming-convention-9727e2cf9328), however it is [often considered quite ugly](https://hackernoon.com/bem-should-not-exist-6414005765d6); the `__` and `--` thrown into your HTML along with [repeated keywords when using modifiers](https://stackoverflow.com/questions/32052836/sass-bem-avoid-modifier-duplication-when-element-is-inside-a-modifier) (`block__component block__component--modifier-1 block__component--modifier-2`) make the HTML extremely jarring to look at. Cell solves these issues by abstracting the logic into mixins and making use of CSS's [wildcard attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).\n\nSince the initial conception, Cell has evolved to become a fully-fledged framework for writing scalable and maintainable CSS.\n\n---\n\n\u003ca href=\"https://github.com/ESR360\"\u003e\n  \u003cimg src=\"http://edmundreed.com/assets/images/github.gif?v=1\" width=\"230px\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://twitter.com/ESR360\"\u003e\n  \u003cimg src=\"http://edmundreed.com/assets/images/twitter.gif?v=1\" width=\"230px\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.instagram.com/edmund_reed/\"\u003e\n  \u003cimg src=\"http://edmundreed.com/assets/images/insta.png\" width=\"230px\" /\u003e\n\u003c/a\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fone-nexus%2Fcell","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fone-nexus%2Fcell","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fone-nexus%2Fcell/lists"}