https://github.com/netbek/periodic-table
Periodic table with responsive layout
https://github.com/netbek/periodic-table
nunjucks periodic-table sass
Last synced: 29 days ago
JSON representation
Periodic table with responsive layout
- Host: GitHub
- URL: https://github.com/netbek/periodic-table
- Owner: netbek
- License: agpl-3.0
- Created: 2016-12-20T15:35:38.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2025-10-11T03:49:17.000Z (about 1 month ago)
- Last Synced: 2025-10-12T08:23:16.281Z (about 1 month ago)
- Topics: nunjucks, periodic-table, sass
- Language: Python
- Homepage: https://netbek.github.io/periodic-table
- Size: 1.54 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Periodic table
Periodic table with responsive layout.
## Demo
[netbek.github.io/periodic-table](https://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](https://pypi.org/manage/account/#api-tokens) 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](https://github.com/lmmentel/mendeleevapp))
## Credit
Data from [mendeleev](https://mendeleev.readthedocs.io/en/stable/bibliography.html) (MIT License)
## License
Copyright (c) 2016 Hein Bekker. Licensed under the GNU Affero General Public License, version 3.