Periodic table

Periodic table with responsive layout.

Demo

netbek.github.io/periodic-table

Integration

Install the package:

``shell npm install @netbek/periodic-table`

Create a Sass file:

`scss @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:

`html {%- 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 %} {% 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) }}`

Render the Nunjucks template:

`js 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`

1. Install Node 22.x:

`shell curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash source ~/.bashrc nvm install 22 nvm use 22`

2. Install uv:

`shell curl -LsSf https://astral.sh/uv/install.sh | sh`

3. Create .pypirc:

`shell cp example.pypirc .pypirc`

4. Enter a PyPI API token as the password in .pypirc.

5. Install Node and Python dependencies:

`shell npm ci uv sync`

`Development: Usage`

Automatically build and refresh browser during development:

`shell gulp livereload`

Build the Python distribution package:

`shell npm run build-dist`

Publish the Node and Python distribution packages:

`shell npm run publish-dist``

Feature ideas

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

Credit

Data from mendeleev (MIT License)

License