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 Nix:
sh <(curl -L https://nixos.org/nix/install) --daemon
-
Configure Nix. Edit
/etc/nix/nix.conf(for a multi-user installation) or~/.config/nix/nix.conf(for a single-user installation) to include the following lines:experimental-features = nix-command flakes trusted-users = root <USER>
Replace
<USER>with your username on your computer. -
Install direnv:
sudo apt install direnv
-
Enable direnv in your shell by adding a line to your shell configuration file.
For Bash, edit
~/.bashrc:eval "$(direnv hook bash)"
-
Allow
.envrc:direnv allow -
Enter a PyPI API token as the password in
.pypirc.
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
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.3.1.tar.gz.
File metadata
- Download URL: netbek_periodic_table-0.3.1.tar.gz
- Upload date:
- Size: 20.3 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.13.11
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
ead0618d8f2b857757f055ca91c0604034d82483568401cd7848cf8d000dcab8
|
|
| MD5 |
c5387ec93000e1a1a87cd596000960c5
|
|
| BLAKE2b-256 |
cd8753c9ae2fbad996864ac0f867947440359a4259c114e4ad424d0398452ce6
|
File details
Details for the file netbek_periodic_table-0.3.1-py3-none-any.whl.
File metadata
- Download URL: netbek_periodic_table-0.3.1-py3-none-any.whl
- Upload date:
- Size: 22.6 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.13.11
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
a43b15d04d21c35ced62832f90b237a516b3d1a84bfe54d4a945561ab9a4a884
|
|
| MD5 |
a3d56df4e262b71a4f84500d36f4630c
|
|
| BLAKE2b-256 |
4c104531b4a457dd0561472c4d75ffc748657b90ab6ec7590648c951df4035aa
|
