Xmeter Style Guide

7 #Atoms Atoms

Very specific classes used for creating anomalies or fixing broken styles.

Source: kss-styleguide.scss, line 74

7.1 #Atoms.margin-top margin-top

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the margin-top property on an element, or margin-block-start if it is supported.

author
Chris Harvey
updated
Example
  • Point (0.00)
  • Quark (0.25)
  • Atom (0.50)
  • Molecule (1.00)
  • Asteroid (2.00)
  • Planet (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-mt.css"/-->
<ul>
  <li class="-mt-0">Point    (0.00)</li>
  <li class="-mt-q">Quark    (0.25)</li>
  <li class="-mt-h">Atom     (0.50)</li>
  <li class="-mt-1">Molecule (1.00)</li>
  <li class="-mt-2">Asteroid (2.00)</li>
  <li class="-mt-4">Planet   (4.00)</li>
</ul>
Source: _-mt.less, line 7

7.2 #Atoms.margin-bottom margin-bottom

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the margin-bottom property on an element, or margin-block-end if it is supported.

author
Chris Harvey
updated
Example
  • Point (0.00)
  • Quark (0.25)
  • Atom (0.50)
  • Molecule (1.00)
  • Asteroid (2.00)
  • Planet (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-mb.css"/-->
<ul>
  <li class="-mb-0">Point    (0.00)</li>
  <li class="-mb-q">Quark    (0.25)</li>
  <li class="-mb-h">Atom     (0.50)</li>
  <li class="-mb-1">Molecule (1.00)</li>
  <li class="-mb-2">Asteroid (2.00)</li>
  <li class="-mb-4">Planet   (4.00)</li>
</ul>
Source: _-mb.less, line 7

7.3 #Atoms.margin-vertical margin-vertical

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the margin-top and margin-bottom properties on an element, or margin-block if it is supported.

author
Chris Harvey
updated
Example
  • Point (0.00)
  • Quark (0.25)
  • Atom (0.50)
  • Molecule (1.00)
  • Asteroid (2.00)
  • Planet (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-my.css"/-->
<ul>
  <li class="-my-0">Point    (0.00)</li>
  <li class="-my-q">Quark    (0.25)</li>
  <li class="-my-h">Atom     (0.50)</li>
  <li class="-my-1">Molecule (1.00)</li>
  <li class="-my-2">Asteroid (2.00)</li>
  <li class="-my-4">Planet   (4.00)</li>
</ul>
Source: _-my.less, line 7

7.4 #Atoms.margin-left margin-left

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the margin-left property on an element, or margin-inline-start if it is supported.

author
Chris Harvey
updated
Example
  • Point (0.00)
  • Quark (0.25)
  • Atom (0.50)
  • Molecule (1.00)
  • Asteroid (2.00)
  • Planet (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-ml.css"/-->
<ul>
  <li class="-ml-0">Point    (0.00)</li>
  <li class="-ml-q">Quark    (0.25)</li>
  <li class="-ml-h">Atom     (0.50)</li>
  <li class="-ml-1">Molecule (1.00)</li>
  <li class="-ml-2">Asteroid (2.00)</li>
  <li class="-ml-4">Planet   (4.00)</li>
</ul>
Source: _-ml.less, line 7

7.5 #Atoms.margin-right margin-right

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the margin-right property on an element, or margin-inline-end if it is supported.

author
Chris Harvey
updated
Example
  • Point (0.00)
  • Quark (0.25)
  • Atom (0.50)
  • Molecule (1.00)
  • Asteroid (2.00)
  • Planet (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-mr.css"/-->
<ul>
  <li class="-mr-0">Point    (0.00)</li>
  <li class="-mr-q">Quark    (0.25)</li>
  <li class="-mr-h">Atom     (0.50)</li>
  <li class="-mr-1">Molecule (1.00)</li>
  <li class="-mr-2">Asteroid (2.00)</li>
  <li class="-mr-4">Planet   (4.00)</li>
</ul>
Source: _-mr.less, line 7

7.6 #Atoms.margin-horizontal margin-horizontal

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the margin-left and margin-right properties on an element, or margin-inline if it is supported.

author
Chris Harvey
updated
Example
  • Point (0.00)
  • Quark (0.25)
  • Atom (0.50)
  • Molecule (1.00)
  • Asteroid (2.00)
  • Planet (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-mx.css"/-->
<ul>
  <li class="-mx-0">Point    (0.00)</li>
  <li class="-mx-q">Quark    (0.25)</li>
  <li class="-mx-h">Atom     (0.50)</li>
  <li class="-mx-1">Molecule (1.00)</li>
  <li class="-mx-2">Asteroid (2.00)</li>
  <li class="-mx-4">Planet   (4.00)</li>
</ul>
Source: _-mx.less, line 7

7.7 #Atoms.padding-top padding-top

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the padding-top property on an element, or padding-block-start if it is supported.

author
Chris Harvey
updated
Example
  • Point (0.00)
  • Quark (0.25)
  • Atom (0.50)
  • Molecule (1.00)
  • Asteroid (2.00)
  • Planet (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-pt.css"/-->
<ul>
  <li class="-pt-0">Point    (0.00)</li>
  <li class="-pt-q">Quark    (0.25)</li>
  <li class="-pt-h">Atom     (0.50)</li>
  <li class="-pt-1">Molecule (1.00)</li>
  <li class="-pt-2">Asteroid (2.00)</li>
  <li class="-pt-4">Planet   (4.00)</li>
</ul>
Source: _-pt.less, line 7

7.8 #Atoms.padding-bottom padding-bottom

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the padding-bottom property on an element, or padding-block-end if it is supported.

author
Chris Harvey
updated
Example
  • Point (0.00)
  • Quark (0.25)
  • Atom (0.50)
  • Molecule (1.00)
  • Asteroid (2.00)
  • Planet (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-pb.css"/-->
<ul>
  <li class="-pb-0">Point    (0.00)</li>
  <li class="-pb-q">Quark    (0.25)</li>
  <li class="-pb-h">Atom     (0.50)</li>
  <li class="-pb-1">Molecule (1.00)</li>
  <li class="-pb-2">Asteroid (2.00)</li>
  <li class="-pb-4">Planet   (4.00)</li>
</ul>
Source: _-pb.less, line 7

7.9 #Atoms.padding-vertical padding-vertical

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the padding-top and padding-bottom properties on an element, or padding-block if it is supported.

author
Chris Harvey
updated
Example
  • Point (0.00)
  • Quark (0.25)
  • Atom (0.50)
  • Molecule (1.00)
  • Asteroid (2.00)
  • Planet (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-py.css"/-->
<ul>
  <li class="-py-0">Point    (0.00)</li>
  <li class="-py-q">Quark    (0.25)</li>
  <li class="-py-h">Atom     (0.50)</li>
  <li class="-py-1">Molecule (1.00)</li>
  <li class="-py-2">Asteroid (2.00)</li>
  <li class="-py-4">Planet   (4.00)</li>
</ul>
Source: _-py.less, line 7

7.10 #Atoms.padding-left padding-left

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the padding-left property on an element, or padding-inline-start if it is supported.

author
Chris Harvey
updated
Example
  • Point (0.00)
  • Quark (0.25)
  • Atom (0.50)
  • Molecule (1.00)
  • Asteroid (2.00)
  • Planet (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-pl.css"/-->
<ul>
  <li class="-pl-0">Point    (0.00)</li>
  <li class="-pl-q">Quark    (0.25)</li>
  <li class="-pl-h">Atom     (0.50)</li>
  <li class="-pl-1">Molecule (1.00)</li>
  <li class="-pl-2">Asteroid (2.00)</li>
  <li class="-pl-4">Planet   (4.00)</li>
</ul>
Source: _-pl.less, line 7

7.11 #Atoms.padding-right padding-right

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the padding-right property on an element, or padding-inline-end if it is supported.

author
Chris Harvey
updated
Example
  • Point (0.00)
  • Quark (0.25)
  • Atom (0.50)
  • Molecule (1.00)
  • Asteroid (2.00)
  • Planet (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-pr.css"/-->
<ul>
  <li class="-pr-0">Point    (0.00)</li>
  <li class="-pr-q">Quark    (0.25)</li>
  <li class="-pr-h">Atom     (0.50)</li>
  <li class="-pr-1">Molecule (1.00)</li>
  <li class="-pr-2">Asteroid (2.00)</li>
  <li class="-pr-4">Planet   (4.00)</li>
</ul>
Source: _-pr.less, line 7

7.12 #Atoms.padding-horizontal padding-horizontal

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the padding-left and padding-right properties on an element, or padding-inline if it is supported.

author
Chris Harvey
updated
Example
  • Point (0.00)
  • Quark (0.25)
  • Atom (0.50)
  • Molecule (1.00)
  • Asteroid (2.00)
  • Planet (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-px.css"/-->
<ul>
  <li class="-px-0">Point    (0.00)</li>
  <li class="-px-q">Quark    (0.25)</li>
  <li class="-px-h">Atom     (0.50)</li>
  <li class="-px-1">Molecule (1.00)</li>
  <li class="-px-2">Asteroid (2.00)</li>
  <li class="-px-4">Planet   (4.00)</li>
</ul>
Source: _-px.less, line 7

7.13 #Atoms.font-size font-size

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Set the font-size property on an element. There are eight Atoms available, each corresponding to a font-size given by the project’s type scale. You can see the source for the font-size settings in /src/__settings.less.

author
Chris Harvey
updated
Example
  • Quark (0.625)
  • Atom (0.75)
  • Molecule (1.00)
  • Asteroid (1.25)
  • Planet (1.75)
  • Star (2.25)
  • Galaxy (3.00)
  • Universe (4.00)
Markup 
<!--link rel="stylesheet" href="/node_modules/xmeter/css/dist/-fz.css"/-->
<ul>
  <li class="-fz-micr">Quark    (0.625)</li>
  <li class="-fz-mill">Atom     (0.75) </li>
  <li class="-fz-norm">Molecule (1.00) </li>
  <li class="-fz-kilo">Asteroid (1.25) </li>
  <li class="-fz-mega">Planet   (1.75) </li>
  <li class="-fz-giga">Star     (2.25) </li>
  <li class="-fz-tera">Galaxy   (3.00) </li>
  <li class="-fz-peta">Universe (4.00) </li>
</ul>
Source: _-fz.less, line 9