Docs - Magnet

Getting Started

An overview of Magnet, including folder structure, how to download and use it, examples and more.

Filter by category:

Sort by:

Hydrogenium 1 H 1.008

Helium 2 He 4.002

Lithium 3 Li 6.94

Beryllium 4 Be 9.012

Borium 5 B 10.81

Carbonium 6 C 12.011

Nitrogenium 7 N 14.007

Oxygenium 8 O 15.999

Fluorum 9 F 18.998

Neon 10 Ne 20.179

Natrium 11 Na 22.989

Magnesium 12 Mg 24.305

Aluminium 13 Al 26.981

Silicium 14 Si 28.085

Phosphorus 15 P 30.973

Sulphur 16 S 32.06

Chlorum 17 Cl 35.45

Argon 18 Ar 39.948

Kalium 19 K 39.098

Calcium 20 Ca 40.078

Scandium 21 Sc 44.955

Titanium 22 Ti 47.867

Vanadium 23 V 50.941

Chromium 24 Cr 51.996

Manganum 25 Mn 54.938

Ferrum 26 Fe 55.845

Cobaltum 27 Co 58.933

Niccolum 28 Ni 58.693

Cuprum 29 Cu 63.546

Zincum 30 Zn 65.38

Gallium 31 Ga 69.723

Germanium 32 Ge 72.63

Arsenicum 33 As 74.921

Selenium 34 Se 78.971

Bromum 35 Br 79.904

Krypton 36 Kr 83.798

Rubidium 37 Rb 85.467

Strontium 38 Sr 87.62

Yttrium 39 Y 88.905

Zirconium 40 Zr 91.224

Niobium 41 Nb 92.906

Molybdenum 42 Mo 95.95

Technetium 43 Tc (98)

Ruthenium 44 Ru 101.07

Rhodium 45 Rh 102.905

Palladium 46 Pd 106.42

Argentum 47 Ag 107.868

Cadmium 48 Cd 112.414

Indium 49 In 114.818

Stannum 50 Sn 118.710

Stibium 51 Sb 121.760

Tellurium 52 Te 127.60

Iodum 53 I 126.904

Xenon 54 Xe 131.293

Caesium 55 Cs 132.905

Barium 56 Ba 137.327

Hafnium 72 Hf 178.49

Tantalum 73 Ta 180.947

Wolframium 74 W 183.84

Rhenium 75 Re 186.207

Osmium 76 Os 190.23

Iridium 77 Ir 192.217

Platinum 78 Pt 195.084

Aurum 79 Au 196.966

Hydrargyrum 80 Hg 200.59

Thallium 81 Tl 204.38

Plumbum 82 Pb 207.2

Bisemutum 83 Bi 208.980

Polonium 84 Po (209)

Astatum 85 At (210)

Radon 86 Rn (222)

Francium 87 Fr (223)

Radium 88 Ra (226)

Rutherfordium 104 Rf (267)

Dubnium 105 Db (268)

Seaborgium 106 Sg (271)

Bohrium 107 Bh (272)

Hassium 108 Hs (270)

Meitnerium 109 Mt (276)

Darmstadtium 110 Ds (281)

Roentgenium 111 Rg (280)

Copernicium 112 Cn (285)

Nihonium 113 Nh (284)

Flerovium 114 Fl (289)

Moscovium 115 Mc (288)

Livermorium 116 Lv (293)

Tennessine 117 Ts (294)

Oganesson 118 Og (294)

Lanthanum 57 La 138.905

Cerium 58 Ce 140.116

Praseodymium 59 Pr 140.907

Neodymium 60 Nd 144.242

Promethium 61 Pm (145)

Samarium 62 Sm 150.36

Europium 63 Eu 151.964

Gadolinium 64 Gd 157.25

Terbium 65 Tb 158.925

Dysprosium 66 Dy 162.500

Holmium 67 Ho 164.930

Erbium 68 Er 167.259

Thulium 69 Tm 168.934

Ytterbium 70 Yb 173.054

Lutetium 71 Lu 174.966

Actinium 89 Ac (227)

Thorium 90 Th 232.037

Protactinium 91 Pa 231.035

Uranium 92 U 238.028

Neptunium 93 Np (237)

Plutonium 94 Pu (244)

Americium 95 Am (243)

Curium 96 Cm (247)

Berkelium 97 Bk (247)

Californium 98 Cf (251)

Einsteinium 99 Es (252)

Fermium 100 Fm (257)

Mendelevium 101 Md (258)

Nobelium 102 No (259)

Lawrencium 103 Lr (262)

What’s Included

Every downloaded copy of Magnet is compressed. Once downloaded, unzip the compressed folder to get a structure like this:

magnet/
├── js/
│   ├── magnet.js
│   └── magnet.min.js
└── README.md

magnet.js for development.
magnet.min.js for production.

Installation

Download

Copy magnet.js or magnet.min.js to your project, then include it in your site.

<script src="/path/to/magnet.min.js"></script>

HTML

Magnet works on a container element with a group of child items. This items are selected by a class.

<div class="grid">
  <div class="grid-item">
  <div class="grid-item grid-item--width2">
  <div class="grid-item">
  ...
  <div class="grid-item">
</div>

CSS

Item style is handled by your own CSS.

.grid-item { width: 25%; }
.grid-item--width2 { width: 50%; }

Initialization

jQuery

Initialize Magnet as a jQuery plugin.

//No options
$('.grid').magnet();

//With options
$('.grid').magnet({
  itemSelector: '.grid-item',
  layoutMode: 'grid'
});

Bind plugin initialization to a jQuery event to ensure all items have finished loading, if the script is included within <head>.

//Document is ready
$(document).ready(function() {
  $('.grid').magnet();
});

//Images have finished loading.
//Wait until images loading is complete to get their correct size.
//You can use any other method to detect completion, 
//then initialize the plugin. 
$(window).load(function() {
  $('.grid').magnet();
});

JavaScript

Initialize the plugin with Vanilla JavaScript. Magnet constructor accepts two arguments: container element and options object.

var elem = document.querySelector('.grid');
var mgnt = new Magnet(elem, {
  itemSelector: '.grid-item'
});