🍉 pasteque

Vertical rhythm.

pasteque is a fork from compass/typography/vertical_rhythm

Installation

$ npm install pasteque

Usage

📖 Read the docs! Coming soon.

@charset "UTF-8";

@import "path/to/node_modules/pasteque/pasteque";

// Default `border-color` value.
$p-border-color-global: #ccc;

// Default `border-style` value.
$p-border-style-global: "solid";

// Default `border-width` value.
$p-border-width-global: 1px;

// Toggle vertical grid.
$p-debug-vertical-alignment--toggle: true;

// Vertical grid color.
$p-debug-vertical-alignment--color: #f00;

@debug p-rhythm();
// /path/to/style.scss:20 DEBUG: 1rem

@debug p-rhythm($minus: $p-border-width-global);
// /path/to/style.scss:23 DEBUG: 0.9375rem

@debug _p-lines-for(16px);
// /path/to/style.scss:26 DEBUG: 1

@debug p-lines-for(16px);
// /path/to/style.scss:29 DEBUG: 2

// Establishes a font baseline.
@include p-establish-baseline;

.foo {
  @include p-line-height(16px);
}

.foo {
  @include p-font-size(48px, 5);
}

.foo {
  @include p-padding-top;
}

.foo {
  @include p-padding-bottom(2)
}

.foo {
  @include p-padding;
}

.foo {
  @include p-margin-top;
}

.foo {
  @include p-margin-bottom(2);
}

.foo {
  @include p-margin;
}

.foo {
  @include _p-border("all");
}

.foo {
  @include p-border;
}

.foo {
  @include p-border-top;
}

.foo {
  @include p-border-bottom;
}

.foo::after {
  @include p-debug-vertical-alignment;
}

:root {
  font-size: 100%;
  line-height: 2em;
}

.foo {
  line-height: 2rem;
}

.foo {
  font-size: 3rem;
  line-height: 5rem;
}

.foo {
  padding-top: 1rem;
}

.foo {
  padding-bottom: 2rem;
}

.foo {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.foo {
  margin-top: 1rem;
}

.foo {
  margin-bottom: 2rem;
}

.foo {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.foo {
  padding: 0.9375rem;
  border: 0.0625rem solid #ccc;
}

.foo {
  padding: 0.9375rem;
  border: 0.0625rem solid #ccc;
}

.foo {
  padding-top: 0.9375rem;
  border-top: 0.0625rem solid #ccc;
}

.foo {
  padding-bottom: 0.9375rem;
  border-bottom: 0.0625rem solid #ccc;
}

.foo::after {
  background: linear-gradient(to top, rgba(255, 0, 0, 0.2) 12.5%, transparent 12.5%), linear-gradient(to top, rgba(255, 0, 0, 0.6) 6.25%, transparent 6.25%) top right;
  background-size: 100% 0.5rem, 100% 1rem;
}

Author

Zaza Agency

Contributors

Aziz Da