Periodic table

Periodic table with responsive layout.

Demo

netbek.github.io/periodic-table

Integration

Install the package:

npm install @netbek/periodic-table

Create a Sass file:

@import 'node_modules/@netbek/periodic-table/src/css/mixins';

// Define vars that should override defaults
$nb-periodic-table-cell-bg:                       #eee;
$nb-periodic-table-cell-border:                   #ccc;

// Load default vars
@import 'node_modules/@netbek/periodic-table/src/css/variables';

// Mobile-first layout
@include nb-periodic-table-base;
@include nb-periodic-table-color;
@include nb-periodic-table-size;

// Wide breakpoint layout
@media (min-width: 82em) {
  @include nb-periodic-table-color('category');
  @include nb-periodic-table-size('wide');
}

Create a Nunjucks template:

{%- from "path/to/node_modules/@netbek/periodic-table/nunjucks/macros/nb_pt_legend.njk" import nb_pt_legend %}
{%- from "path/to/node_modules/@netbek/periodic-table/nunjucks/macros/nb_pt_table_18.njk" import nb_pt_table_18 %}
<html>
  <body>
    {% set element_columns = {
        atomic_number: 'Atomic number',
        symbol: 'Symbol',
        name: 'Name',
        atomic_mass: 'Atomic mass',
        electronegativity: 'Electronegativity'
    } %}
    {{ nb_pt_legend(elements, categories, element_columns) }}
    {{ nb_pt_table_18(elements, groups) }}
  </body>
</html>

Render the Nunjucks template:

import nunjucks from 'nunjucks';
import periodicTable from '@netbek/periodic-table';

async function render() {
  const categories = await periodicTable.loadCategories();
  const elements = await periodicTable.loadElements();
  const groups = await periodicTable.loadGroups();

  const data = {
    categories,
    elements,
    groups
  };

  return nunjucks.render('path/to/template.njk', data);
}

render();

Development: Installation

Clone the repo:

git clone git@github.com:netbek/periodic-table.git

Install Mise and add activation to ~/.bashrc, e.g.

curl -fsSL https://github.com/jdx/mise/releases/download/v2026.7.13/install.sh | sh

See other installation methods.

Trust mise.toml:
```
mise trust
```
Create a PyPI API token, and add the token to the system keyring as the password:
```
keyring set pypi-periodic-table __token__
```

Development: Usage

Automatically build and refresh browser during development:

gulp livereload

Build and publish the JavaScript and Python distribution packages:

make bump-version [major|minor|patch]
git push
make build-and-commit
git push
make create-release
make publish

Feature ideas

Group and period axes
Color by group or block; different palettes (mendeleevapp)

Credit

Data from mendeleev (MIT License)

License

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

netbek_periodic_table-0.3.4.tar.gz (20.2 kB view details)

Uploaded Jul 25, 2026 Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

The dropdown lists show the available interpreters, ABIs, and platforms. Enable javascript to be able to filter the list of wheel files.

netbek_periodic_table-0.3.4-py3-none-any.whl (22.5 kB view details)

Uploaded Jul 25, 2026 Python 3

File details

Details for the file netbek_periodic_table-0.3.4.tar.gz.

File metadata

Download URL: netbek_periodic_table-0.3.4.tar.gz
Upload date: Jul 25, 2026
Size: 20.2 kB
Tags: Source
Uploaded using Trusted Publishing? No
Uploaded via: twine/6.2.0 CPython/3.13.14

File hashes

Hashes for netbek_periodic_table-0.3.4.tar.gz
Algorithm	Hash digest
SHA256	`5fcdf37b48497c368b9c6229fc730019d621ca2535dc211e0406f5c72434da10`
MD5	`aa7118fc751920fae86eca324fc9a264`
BLAKE2b-256	`9862002fcd590920f8b86b974a172c7c1d6ad07dce355130cbccb8b17e523280`

See more details on using hashes here.

File details

Details for the file netbek_periodic_table-0.3.4-py3-none-any.whl.

File metadata

Download URL: netbek_periodic_table-0.3.4-py3-none-any.whl
Upload date: Jul 25, 2026
Size: 22.5 kB
Tags: Python 3
Uploaded using Trusted Publishing? No
Uploaded via: twine/6.2.0 CPython/3.13.14

File hashes

Hashes for netbek_periodic_table-0.3.4-py3-none-any.whl
Algorithm	Hash digest
SHA256	`020c8517dab17de3c68fc10538b906a38dfaf93712cfdb4005080398f03b8874`
MD5	`090fbf57b45de77c67b8beaf1faaada0`
BLAKE2b-256	`1e5e9aabf0d0bd20f2d2df6f7fed8023e4765d8b1b6dbfca18061b1a50b9ea99`