8-point-grid/dist/8-point-grid.css

The 8 point scss grid system

/*!
 * 8-point-grid 0.4.0
 * Repository (https://github.com/sethne/8-point-grid)
 * By sethne
 */
.pg-m-1 {
  margin: 8px; }

.pg-mt-1 {
  margin-top: 8px; }

.pg-mr-1 {
  margin-right: 8px; }

.pg-mb-1 {
  margin-bottom: 8px; }

.pg-ml-1 {
  margin-left: 8px; }

.pg-my-1 {
  margin-top: 8px;
  margin-bottom: 8px; }

.pg-mx-1 {
  margin-left: 8px;
  margin-right: 8px; }

.pg-m-2 {
  margin: 16px; }

.pg-mt-2 {
  margin-top: 16px; }

.pg-mr-2 {
  margin-right: 16px; }

.pg-mb-2 {
  margin-bottom: 16px; }

.pg-ml-2 {
  margin-left: 16px; }

.pg-my-2 {
  margin-top: 16px;
  margin-bottom: 16px; }

.pg-mx-2 {
  margin-left: 16px;
  margin-right: 16px; }

.pg-m-3 {
  margin: 24px; }

.pg-mt-3 {
  margin-top: 24px; }

.pg-mr-3 {
  margin-right: 24px; }

.pg-mb-3 {
  margin-bottom: 24px; }

.pg-ml-3 {
  margin-left: 24px; }

.pg-my-3 {
  margin-top: 24px;
  margin-bottom: 24px; }

.pg-mx-3 {
  margin-left: 24px;
  margin-right: 24px; }

.pg-m-4 {
  margin: 32px; }

.pg-mt-4 {
  margin-top: 32px; }

.pg-mr-4 {
  margin-right: 32px; }

.pg-mb-4 {
  margin-bottom: 32px; }

.pg-ml-4 {
  margin-left: 32px; }

.pg-my-4 {
  margin-top: 32px;
  margin-bottom: 32px; }

.pg-mx-4 {
  margin-left: 32px;
  margin-right: 32px; }

.pg-m-5 {
  margin: 40px; }

.pg-mt-5 {
  margin-top: 40px; }

.pg-mr-5 {
  margin-right: 40px; }

.pg-mb-5 {
  margin-bottom: 40px; }

.pg-ml-5 {
  margin-left: 40px; }

.pg-my-5 {
  margin-top: 40px;
  margin-bottom: 40px; }

.pg-mx-5 {
  margin-left: 40px;
  margin-right: 40px; }

.pg-m-6 {
  margin: 48px; }

.pg-mt-6 {
  margin-top: 48px; }

.pg-mr-6 {
  margin-right: 48px; }

.pg-mb-6 {
  margin-bottom: 48px; }

.pg-ml-6 {
  margin-left: 48px; }

.pg-my-6 {
  margin-top: 48px;
  margin-bottom: 48px; }

.pg-mx-6 {
  margin-left: 48px;
  margin-right: 48px; }

.pg-m-7 {
  margin: 56px; }

.pg-mt-7 {
  margin-top: 56px; }

.pg-mr-7 {
  margin-right: 56px; }

.pg-mb-7 {
  margin-bottom: 56px; }

.pg-ml-7 {
  margin-left: 56px; }

.pg-my-7 {
  margin-top: 56px;
  margin-bottom: 56px; }

.pg-mx-7 {
  margin-left: 56px;
  margin-right: 56px; }

.pg-m-8 {
  margin: 64px; }

.pg-mt-8 {
  margin-top: 64px; }

.pg-mr-8 {
  margin-right: 64px; }

.pg-mb-8 {
  margin-bottom: 64px; }

.pg-ml-8 {
  margin-left: 64px; }

.pg-my-8 {
  margin-top: 64px;
  margin-bottom: 64px; }

.pg-mx-8 {
  margin-left: 64px;
  margin-right: 64px; }

.pg-p-1 {
  padding: 8px; }

.pg-pt-1 {
  padding-top: 8px; }

.pg-pr-1 {
  padding-right: 8px; }

.pg-pb-1 {
  padding-bottom: 8px; }

.pg-pl-1 {
  padding-left: 8px; }

.pg-py-1 {
  padding-top: 8px;
  padding-bottom: 8px; }

.pg-px-1 {
  padding-left: 8px;
  padding-right: 8px; }

.pg-p-2 {
  padding: 16px; }

.pg-pt-2 {
  padding-top: 16px; }

.pg-pr-2 {
  padding-right: 16px; }

.pg-pb-2 {
  padding-bottom: 16px; }

.pg-pl-2 {
  padding-left: 16px; }

.pg-py-2 {
  padding-top: 16px;
  padding-bottom: 16px; }

.pg-px-2 {
  padding-left: 16px;
  padding-right: 16px; }

.pg-p-3 {
  padding: 24px; }

.pg-pt-3 {
  padding-top: 24px; }

.pg-pr-3 {
  padding-right: 24px; }

.pg-pb-3 {
  padding-bottom: 24px; }

.pg-pl-3 {
  padding-left: 24px; }

.pg-py-3 {
  padding-top: 24px;
  padding-bottom: 24px; }

.pg-px-3 {
  padding-left: 24px;
  padding-right: 24px; }

.pg-p-4 {
  padding: 32px; }

.pg-pt-4 {
  padding-top: 32px; }

.pg-pr-4 {
  padding-right: 32px; }

.pg-pb-4 {
  padding-bottom: 32px; }

.pg-pl-4 {
  padding-left: 32px; }

.pg-py-4 {
  padding-top: 32px;
  padding-bottom: 32px; }

.pg-px-4 {
  padding-left: 32px;
  padding-right: 32px; }

.pg-p-5 {
  padding: 40px; }

.pg-pt-5 {
  padding-top: 40px; }

.pg-pr-5 {
  padding-right: 40px; }

.pg-pb-5 {
  padding-bottom: 40px; }

.pg-pl-5 {
  padding-left: 40px; }

.pg-py-5 {
  padding-top: 40px;
  padding-bottom: 40px; }

.pg-px-5 {
  padding-left: 40px;
  padding-right: 40px; }

.pg-p-6 {
  padding: 48px; }

.pg-pt-6 {
  padding-top: 48px; }

.pg-pr-6 {
  padding-right: 48px; }

.pg-pb-6 {
  padding-bottom: 48px; }

.pg-pl-6 {
  padding-left: 48px; }

.pg-py-6 {
  padding-top: 48px;
  padding-bottom: 48px; }

.pg-px-6 {
  padding-left: 48px;
  padding-right: 48px; }

.pg-p-7 {
  padding: 56px; }

.pg-pt-7 {
  padding-top: 56px; }

.pg-pr-7 {
  padding-right: 56px; }

.pg-pb-7 {
  padding-bottom: 56px; }

.pg-pl-7 {
  padding-left: 56px; }

.pg-py-7 {
  padding-top: 56px;
  padding-bottom: 56px; }

.pg-px-7 {
  padding-left: 56px;
  padding-right: 56px; }

.pg-p-8 {
  padding: 64px; }

.pg-pt-8 {
  padding-top: 64px; }

.pg-pr-8 {
  padding-right: 64px; }

.pg-pb-8 {
  padding-bottom: 64px; }

.pg-pl-8 {
  padding-left: 64px; }

.pg-py-8 {
  padding-top: 64px;
  padding-bottom: 64px; }

.pg-px-8 {
  padding-left: 64px;
  padding-right: 64px; }

.pg-w-1 {
  width: 8px; }

.pg-h-1 {
  height: 8px; }

.pg-s-1 {
  height: 8px;
  width: 8px; }

.pg-w-2 {
  width: 16px; }

.pg-h-2 {
  height: 16px; }

.pg-s-2 {
  height: 16px;
  width: 16px; }

.pg-w-3 {
  width: 24px; }

.pg-h-3 {
  height: 24px; }

.pg-s-3 {
  height: 24px;
  width: 24px; }

.pg-w-4 {
  width: 32px; }

.pg-h-4 {
  height: 32px; }

.pg-s-4 {
  height: 32px;
  width: 32px; }

.pg-w-5 {
  width: 40px; }

.pg-h-5 {
  height: 40px; }

.pg-s-5 {
  height: 40px;
  width: 40px; }

.pg-w-6 {
  width: 48px; }

.pg-h-6 {
  height: 48px; }

.pg-s-6 {
  height: 48px;
  width: 48px; }

.pg-w-7 {
  width: 56px; }

.pg-h-7 {
  height: 56px; }

.pg-s-7 {
  height: 56px;
  width: 56px; }

.pg-w-8 {
  width: 64px; }

.pg-h-8 {
  height: 64px; }

.pg-s-8 {
  height: 64px;
  width: 64px; }

.pg-fs-1 {
  font-size: 8px; }

.pg-lh-1 {
  line-height: 12px; }

.pg-fs-2 {
  font-size: 16px; }

.pg-lh-2 {
  line-height: 24px; }

.pg-fs-3 {
  font-size: 24px; }

.pg-lh-3 {
  line-height: 36px; }

.pg-fs-4 {
  font-size: 32px; }

.pg-lh-4 {
  line-height: 48px; }

.pg-fs-5 {
  font-size: 40px; }

.pg-lh-5 {
  line-height: 60px; }

.pg-fs-6 {
  font-size: 48px; }

.pg-lh-6 {
  line-height: 72px; }

.pg-fs-7 {
  font-size: 56px; }

.pg-lh-7 {
  line-height: 84px; }

.pg-fs-8 {
  font-size: 64px; }

.pg-lh-8 {
  line-height: 96px; }