Example of using various compass rhythm mixins

Example of using various compass rhythm mixins

@import "compass";

$base-font-size: 16px;
$base-line-height: 24px;

@include establish-baseline;

h1 {
  @include adjust-font-size-to(48px);
  @include adjust-leading-to(4, 48px);
}

h2 {
  @include adjust-font-size-to(24px);
  @include leading-border(2px, 1, 24px);
  border-color: #c5bdaf;
}

p {
  @include adjust-font-size-to(19px);
  @include trailer(1, 19px);
  @include rhythm-borders(2px,1,19px);
  border-color: #c5bdaf;
}

ul {
  @include trailer(1);
}

li {
  @include rhythm(0.5, 0.5, 0.5, 0.5);
}

Add your comment