Last active
August 29, 2015 14:02
-
-
Save paolodina/5ab4ddb19c36ffb723c3 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com. Gist shared, don't delete.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| http://sassmeister.com/gist/680859146a5a951c19d5 | |
| --> | |
| <main class="va-debug"> | |
| <p class="note">Rhythm OK on Firefox (v. 30 Linux), KO Chrome (v. 35 Linux).</p> | |
| <h1>foobar</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <h1>foobar</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <h1>foobar</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| </main> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // Sass (v3.3.8) | |
| // Compass (v1.0.0.alpha.19) | |
| // ---- | |
| // Vertical rhythm configurable variables | |
| // ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻ | |
| // In this example we use ry5n vertical rhythm. | |
| // Works perfectly in Firefox, but ugly in Chrome. | |
| // Absolute height of body text, in pixels | |
| $base-font-size: 14px; | |
| // Absolute height of one line of type, in pixels | |
| $base-line-height: 24px; | |
| // The font unit to use when returning values in rhythm functions | |
| $rhythm-font-unit: px !default; | |
| // Allows the `adjust-font-size-to` mixin and the `lines-for-font-size` function | |
| // to round the line height to the nearest half line height instead of the | |
| // nearest integral line height to avoid large spacing between lines. | |
| $round-to-nearest-half-line: false; | |
| // Ensure there is at least this many pixels | |
| // of vertical padding above and below the text. | |
| $min-line-padding: 2px !default; | |
| // Constants | |
| // ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻ | |
| // Most (all?) browsers use a default of 16px for type. | |
| $browser-default-font-size: 16px; | |
| // The height of one line of type, in rems. | |
| $rem-line-height: $base-line-height / $base-font-size * 1rem; | |
| // Moving parts | |
| // ⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻⁻ | |
| // Given pixel inputs, print rem values with pixel fallbacks. | |
| // Based on Bitmanic's rem mixin (https://github.com/bitmanic/rem) | |
| // | |
| // $property - The css property name | |
| // $px-values - The value or values (space-separated list) for $property, in pixels | |
| @mixin px-to-rem($property, $px-values) { | |
| // Number of pixels in 1rem (default: 16px/rem) | |
| // When converting to rems, we must divide by this ratio. | |
| $px-per-rem: $base-font-size / 1rem; | |
| // Print the pixel fallback declaration first so we can override it in capable browsers. | |
| #{$property}: $px-values; | |
| // If there is only one value, print the declaration with the value converted to rems. | |
| @if type-of($px-values) == "number" { | |
| #{$property}: $px-values / $px-per-rem; | |
| } | |
| @else { | |
| // Otherwise, we've got a list and we'll need to convert each value in turn. | |
| // Create an empty list that we can dump values into. | |
| $rem-values: (); | |
| @each $value in $px-values { | |
| // If the value is zero, a string or a color, leave it be. | |
| @if $value == 0 or type-of($value) == "string" or type-of($value) == "color" { | |
| $rem-values: append($rem-values, $value); | |
| } @else { | |
| $rem-values: append($rem-values, $value / $px-per-rem); | |
| } | |
| } | |
| // Print the property and its list of converted values. | |
| #{$property}: $rem-values; | |
| } | |
| } | |
| // Return the height of n baselines. | |
| // Returns px or rem based on the value of $rhythm-font-unit. | |
| @function rhythm($lines: 1) { | |
| $line-height: if($rhythm-font-unit != px, $rem-line-height, $base-line-height); | |
| @return $line-height * $lines; | |
| } | |
| // Calculate the number of baselines required to accomodate a | |
| // given pixel-based font size. | |
| @function lines-for-font-size($font-size) { | |
| $lines: if( | |
| $round-to-nearest-half-line, | |
| ceil(2 * $font-size / $base-line-height) / 2, | |
| ceil($font-size / $base-line-height) | |
| ); | |
| @if $lines * $base-line-height - $font-size < $min-line-padding * 2 { | |
| $lines: $lines + if($round-to-nearest-half-line, 0.5, 1); | |
| } | |
| @return $lines; | |
| } | |
| // Set type size and baseline grid on the root element. | |
| @mixin establish-baseline { | |
| html { | |
| $new-font-size: $base-font-size / $browser-default-font-size * 100%; // eg. 16px ÷ 16px * 100% | |
| // Only set the font size if it differs from the browser default | |
| @if $new-font-size != 100% { | |
| font-size: $new-font-size; | |
| } | |
| @include set-leading(1); | |
| } | |
| } | |
| // Set the font size to the specified number of pixels while | |
| // maintaining the vertical rhythm. | |
| // | |
| // $to-size - Desired font size, in pixels | |
| // $lines - Desired leading, expressed in baselines (can fractional) | |
| @mixin set-font-size($to-size, $lines: lines-for-font-size($to-size)) { | |
| @include px-to-rem(font-size, $to-size); | |
| @include set-leading($lines); | |
| } | |
| // Adjust the leading to a new multiple of the baseline | |
| @mixin set-leading($lines) { | |
| @include px-to-rem(line-height, $base-line-height * $lines); | |
| } | |
| // Apply leading whitespace | |
| @mixin leader($lines: 1, $property: margin) { | |
| @include px-to-rem(#{$property}-top, rhythm($lines)); | |
| } | |
| // Apply trailing whitespace | |
| @mixin trailer($lines: 1, $property: margin) { | |
| @include px-to-rem(#{$property}-bottom, rhythm($lines)); | |
| } | |
| // Apply leading whitespace as padding | |
| @mixin padding-leader($lines: 1) { | |
| @include leader($lines, padding); | |
| } | |
| // Apply trailing whitespace as padding | |
| @mixin padding-trailer($lines: 1) { | |
| @include trailer($lines, padding); | |
| } | |
| // Apply leading and trailing whitespace together. | |
| // Defaults to equal margins above and below and no padding. | |
| @mixin rhythm-spacing($leader: 1, $trailer: $leader, $padding-leader: 0, $padding-trailer: $padding-leader) { | |
| @include leader($leader); | |
| @include trailer($trailer); | |
| @include padding-leader($padding-leader); | |
| @include padding-trailer($padding-trailer); | |
| } | |
| // Apply a border to one side of an element without throwing off | |
| // the vertical rhythm. The available space ($lines) must be | |
| // greater than the width of your border. | |
| @mixin side-rhythm-border($side, $lines: 1, $border: $rule-width $rule-style $rule-color) { | |
| $width: nth($border, 1); | |
| $style: nth($border, 2); | |
| $color: nth($border, 3); | |
| @include px-to-rem(border-#{$side}, $width $style $color); | |
| $padding: ($base-line-height - $width) * $lines; | |
| @include px-to-rem(padding-#{$side}, $padding); | |
| } | |
| // Apply a leading rhythm border | |
| @mixin leading-border($lines: 1, $border: $rule-width $rule-style $rule-color) { | |
| @include side-rhythm-border(top, $lines, $border); | |
| } | |
| // Apply a trailing rhythm border | |
| @mixin trailing-border($lines: 1, $border: $rule-width $rule-style $rule-color) { | |
| @include side-rhythm-border(bottom, $lines, $border); | |
| } | |
| // Apply borders equally to all sides with padding to maintain the vertical rhythm | |
| @mixin rhythm-borders($lines: 1, $border: $rule-width $rule-style $rule-color) { | |
| $width: nth($border, 1); | |
| $style: nth($border, 2); | |
| $color: nth($border, 3); | |
| @include px-to-rem(border, $width $style $color); | |
| $padding: ($base-line-height - $width) * $lines; | |
| @include px-to-rem(padding, $padding); | |
| } | |
| @include establish-baseline; | |
| // DEBUG - https://github.com/ianrose/typesettings/blob/gh-14-debug-vertical-alignment/_typesettings.scss#L153 | |
| // Creates base type baseline overlay and vertical unit overlay. | |
| // To use on the body tag for example: body { @include debug-vertical-alignment(); } and add class va-debug to the body tag | |
| @mixin debug-vertical-alignment($opacity: 0.8, $vertical-unit: rhythm(), $type-baseline: $base-line-height) { | |
| position: relative; | |
| &:before, &:after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| width: 100%; | |
| display: none; | |
| } | |
| &:before { | |
| z-index: 10; | |
| background-image: -webkit-linear-gradient(rgba(233, 0, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px); | |
| background-image: linear-gradient(rgba(233, 0, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px); | |
| //background-size: 100% ($base-line-height * 1em); | |
| } | |
| &:after { | |
| z-index: 9; | |
| background-image: -webkit-linear-gradient(rgba(0, 233, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px); | |
| background-image: linear-gradient(rgba(0, 233, 0, $opacity) 1px, rgba(0, 0, 0, 0) 1px); | |
| background-size: 100% $vertical-unit; | |
| } | |
| &.va-debug:before, &.va-debug:after { | |
| display: block; | |
| pointer-events: none; | |
| } | |
| } | |
| // basic vertical rhythm test | |
| main { | |
| @include debug-vertical-alignment(); | |
| } | |
| h1 { | |
| @include set-font-size(24px); | |
| @include rhythm-spacing(); | |
| text-transform: uppercase; | |
| } | |
| p { | |
| @include rhythm-spacing(); | |
| } | |
| .note { | |
| background: yellow; | |
| @include trailer(1); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html { | |
| font-size: 87.5%; | |
| line-height: 24px; | |
| line-height: 1.71429rem; | |
| } | |
| main { | |
| position: relative; | |
| } | |
| main:before, main:after { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| width: 100%; | |
| display: none; | |
| } | |
| main:before { | |
| z-index: 10; | |
| background-image: -webkit-linear-gradient(rgba(233, 0, 0, 0.8) 1px, transparent 1px); | |
| background-image: linear-gradient(rgba(233, 0, 0, 0.8) 1px, transparent 1px); | |
| } | |
| main:after { | |
| z-index: 9; | |
| background-image: -webkit-linear-gradient(rgba(0, 233, 0, 0.8) 1px, transparent 1px); | |
| background-image: linear-gradient(rgba(0, 233, 0, 0.8) 1px, transparent 1px); | |
| background-size: 100% 24px; | |
| } | |
| main.va-debug:before, main.va-debug:after { | |
| display: block; | |
| pointer-events: none; | |
| } | |
| h1 { | |
| font-size: 24px; | |
| font-size: 1.71429rem; | |
| line-height: 48px; | |
| line-height: 3.42857rem; | |
| margin-top: 24px; | |
| margin-top: 1.71429rem; | |
| margin-bottom: 24px; | |
| margin-bottom: 1.71429rem; | |
| padding-top: 0px; | |
| padding-top: 0rem; | |
| padding-bottom: 0px; | |
| padding-bottom: 0rem; | |
| text-transform: uppercase; | |
| } | |
| p { | |
| margin-top: 24px; | |
| margin-top: 1.71429rem; | |
| margin-bottom: 24px; | |
| margin-bottom: 1.71429rem; | |
| padding-top: 0px; | |
| padding-top: 0rem; | |
| padding-bottom: 0px; | |
| padding-bottom: 0rem; | |
| } | |
| .note { | |
| background: yellow; | |
| margin-bottom: 24px; | |
| margin-bottom: 1.71429rem; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| http://sassmeister.com/gist/680859146a5a951c19d5 | |
| --> | |
| <main class="va-debug"> | |
| <p class="note">Rhythm OK on Firefox (v. 30 Linux), KO Chrome (v. 35 Linux).</p> | |
| <h1>foobar</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <h1>foobar</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <h1>foobar</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> | |
| </main> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment