Periodic table with responsive layout
Project description
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
-
Install Node 22.x:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash source ~/.bashrc nvm install 22 nvm use 22
-
Install uv:
curl -LsSf https://astral.sh/uv/install.sh | sh
-
Create
.pypirc:cp example.pypirc .pypirc
-
Enter a PyPI API token as the password in
.pypirc. -
Install Node and Python dependencies:
npm ci uv sync
Development: Usage
Automatically build and refresh browser during development:
gulp livereload
Build the Python distribution package:
npm run build-dist
Publish the Node and Python distribution packages:
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
Copyright (c) 2016 Hein Bekker. Licensed under the GNU Affero General Public License, version 3.
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file netbek_periodic_table-0.2.2.tar.gz.
File metadata
- Download URL: netbek_periodic_table-0.2.2.tar.gz
- Upload date:
- Size: 20.2 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.10.18
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
145fc52f7f4b7022ada7a75bbc842f1da95342fd4a2d96582ef4313513401aa5
|
|
| MD5 |
5f11eb89b6555406c14349a590da4c8b
|
|
| BLAKE2b-256 |
b81bf84580362d4a085f78ef3963721e9f666c4b59b3f3537a21bfb87efc3409
|
File details
Details for the file netbek_periodic_table-0.2.2-py3-none-any.whl.
File metadata
- Download URL: netbek_periodic_table-0.2.2-py3-none-any.whl
- Upload date:
- Size: 14.2 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.10.18
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
6d40e14db0a252cc0fd8de4ef294527e277595d003dbbcf0f33e842a096a864b
|
|
| MD5 |
cc82d5d2031a41e00b9252383c3eb44a
|
|
| BLAKE2b-256 |
bb076b91b43982f4eb99af27f6895c22c44e3b8d2f6533e582415a03973cba61
|
