0.1.103 • Published 9 months ago

@netbek/periodic-table v0.1.103

Weekly downloads
25
License
AGPL-3.0
Repository
github
Last release
9 months ago

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.

normalize-css
@infinitebrahmanuniverse/nolb-_net@everything-registry/sub-chunk-642@zalastax/nolb-_net
0.1.98

12 months ago

0.1.99

12 months ago

0.1.103

9 months ago

0.1.102

12 months ago

0.1.101

12 months ago

0.1.100

12 months ago

0.1.96

1 year ago

0.1.97

1 year ago

0.1.90

1 year ago

0.1.91

1 year ago

0.1.92

1 year ago

0.1.93

1 year ago

0.1.94

1 year ago

0.1.95

1 year ago

0.1.85

1 year ago

0.1.86

1 year ago

0.1.87

1 year ago

0.1.88

1 year ago

0.1.89

1 year ago

0.1.84

2 years ago

0.1.83

2 years ago

0.1.80

2 years ago

0.1.81

2 years ago

0.1.82

2 years ago

0.1.79

3 years ago

0.1.78

3 years ago

0.1.77

3 years ago

0.1.76

3 years ago

0.1.75

3 years ago

0.1.74

3 years ago

0.1.72

4 years ago

0.1.73

4 years ago

0.1.71

4 years ago

0.1.70

4 years ago

0.1.67

4 years ago

0.1.68

4 years ago

0.1.69

4 years ago

0.1.65

4 years ago

0.1.66

4 years ago

0.1.64

4 years ago

0.1.63

4 years ago

0.1.62

5 years ago

0.1.61

5 years ago

0.1.60

5 years ago

0.1.59

5 years ago

0.1.58

6 years ago

0.1.57

6 years ago

0.1.56

6 years ago

0.1.55

6 years ago

0.1.54

6 years ago

0.1.53

6 years ago

0.1.52

6 years ago

0.1.51

6 years ago

0.1.50

6 years ago

0.1.49

7 years ago

0.1.48

7 years ago

0.1.47

7 years ago

0.1.46

7 years ago

0.1.45

8 years ago

0.1.44

8 years ago

0.1.43

8 years ago

0.1.42

8 years ago

0.1.41

8 years ago

0.1.40

8 years ago

0.1.39

8 years ago

0.1.38

8 years ago

0.1.37

8 years ago

0.1.36

8 years ago

0.1.35

8 years ago

0.1.34

8 years ago

0.1.33

8 years ago

0.1.32

8 years ago

0.1.31

8 years ago

0.1.30

8 years ago

0.1.29

8 years ago

0.1.28

8 years ago

0.1.27

8 years ago

0.1.26

8 years ago

0.1.25

8 years ago

0.1.24

8 years ago

0.1.22

8 years ago

0.1.21

8 years ago

0.1.20

8 years ago

0.1.19

8 years ago

0.1.18

8 years ago

0.1.17

9 years ago

0.1.16

9 years ago

0.1.15

9 years ago