No project description provided
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
Install Node and Python dependencies:
cd /path/to/periodic-table
./scripts/install.sh
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
File details
Details for the file netbek_periodic_table-0.1.97.tar.gz.
File metadata
- Download URL: netbek_periodic_table-0.1.97.tar.gz
- Upload date:
- Size: 46.1 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.10.12
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 06f3b0e299e37bfae149f2e66c2c8372cc3056a0c6910b871d87705c9a99852a |
|
| MD5 | 362e372afe8e3d9c86ed62bcdd1be46a |
|
| BLAKE2b-256 | cabf6f669c92719bc283a8f35ef1b0ef39d09c89559801a284945680c73214e1 |
File details
Details for the file netbek_periodic_table-0.1.97-py3-none-any.whl.
File metadata
- Download URL: netbek_periodic_table-0.1.97-py3-none-any.whl
- Upload date:
- Size: 34.9 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/4.0.2 CPython/3.10.12
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 552ee83695f73aabef5ff6421e87aee462ad89a4ccb4ecec63e4aa230ddf2d35 |
|
| MD5 | 273cb1256abf41298e7a2f114cc0cff5 |
|
| BLAKE2b-256 | c6383c713c4eb12e717894b6c70b381aafe73f5ba491f4314fce8fd54d315db4 |
