Skip to content

Instantly share code, notes, and snippets.

@yckart

yckart/README.md Secret

Last active Dec 30, 2016
Embed
What would you like to do?
SCSS Vertical Rhythm & Elastic Layout Research

Articles

Some related articles, you will like!

More:

Layout

Compass

Helper

Some related helper, you will like!

Inuit

Compass

Approaches

Tools

Clarification

// Keep a nice vertical rhythm with elements that don't have one.
// https://github.com/Gaya/jQuery--Keep-the-Rhythm
function baseline(element, line, align, spacing) {
line = line || 24;
align = align || 'center';
spacing = spacing || 'padding';
var h = element.clientHeight;
var r = line - (h % line);
var top = 0;
var bottom = r;
// If the element is in rhythm: do nothing.
if (r == line) {
r = bottom = 0;
}
// If verticalAlignment is set to center; spread the padding to both top and bottom
if (align == 'center') {
top = r / 2;
bottom = r - top;
}
// If the alignment is bottom; set to padding to the top!
if (align == 'bottom') {
top = r;
bottom = 0;
}
if (spacing == 'margin') {
element.style.marginTop = top + "px"
element.style.marginBottom = bottom + "px"
} else {
element.style.paddingTop = top + "px"
element.style.paddingBottom = bottom + "px"
}
}
// Aligning type to baseline the right way with sass
// https://gist.github.com/razwan/10662500
$base-font-size: 16px;
$base-line-height: 24px;
$base-line-height: $base-line-height / $base-font-size; // 1.5
// this value may vary for each font
// unitless value relative to 1em
$cap-height: 0.68;
@mixin baseline($font-size, $scale: 2) {
// rhythm unit
$rhythm: $base-line-height * $font-size / $scale;
// number of rhythm units that can fit the font-size
$lines: ceil(($font-size + 0.001px) / $rhythm);
// calculate the new line-height
$line-height: $rhythm * $lines / $font-size;
// use the results
font-size: $font-size;
line-height: $line-height;
$baseline-distance: ($line-height - $cap-height) / 2;
// METHOD 1
// Can relatively move down elements you may not want to
// ---
// position: relative;
// top: $baseline-distance + em;
// METHOD 2
// If you use this mixin only on elements that have one direction margins
// http://csswizardry.com/2012/06/single-direction-margin-declarations/
// you can use this method with no worries.
// this method assumes the direction is down and the margin is $base-line-height
padding-top: $baseline-distance + em;
margin-bottom: $base-line-height - $baseline-distance + em;
}
function getElementLineHeight(element) {
return parseFloat((element.currentStyle || getComputedStyle(element)).lineHeight) || 24
}
window.addEventListener('resize', (function resize() {
var all = document.querySelectorAll('iframe, img, video')
Array.prototype.forEach.call(all, function (node) {
rhythme(node, 24)
})
return resize
}()), false)
* {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
html {
font-size: 125%;
line-height: $line-height-ratio;
}
body {
background-image: linear-gradient(#eee, 1px, transparent 1px);
background-size: 100% 1.5em;
padding: $line-height-base;
}
h1 { @include rhythme(6em); }
h2 { @include rhythme(5em); }
h3 { @include rhythme(4em); }
p, ul, ol { @include rhythme(1em); }
.box {
@include rhythme(8em, true);
background-color: blue;
width: 16em;
}
// https://github.com/Gaya/jQuery--Keep-the-Rhythm
function rhythme(node, baseLine, align, spacing) {
var height = node.clientHeight
var ratio = baseLine - (height % baseLine)
// element is in rhythm, do nothing.
if (ratio == baseLine) {
ratio = 0
}
var top = 0
var bottom = ratio
if (align == 'center') {
// spread the padding to both top and bottom
top = ratio / 2
bottom = ratio - top
} else if (align == 'bottom') {
// set to padding to the top
top = ratio
bottom = 0
}
if (spacing == 'padding') {
node.style.paddingTop = top + 'px'
node.style.paddingBottom = bottom + 'px'
} else {
node.style.marginTop = top + 'px'
node.style.marginBottom = bottom + 'px'
}
}
// http://codepen.io/lowercase/pen/tHunj
// http://inlehmansterms.net/2014/06/09/groove-to-a-vertical-rhythm/
$base-font-size: 16px;
$line-height-ratio: 1.5;
$line-height-base: * $line-height-ratio;
@mixin rhythme($font-size, $use-height: false, $bottom-rows: 1, $top-rows: 0, $border: 0em) {
$lines: ceil($font-size / $line-height-base) + 0.001;
$ratio: ($line-height-base / $font-size);
@if $use-height {
$leftover: $line-height-base * $lines - $font-size;
height: $font-size;
margin-top: $line-height-base * $top-rows + $leftover / 2;
margin-bottom: $line-height-base * $bottom-rows + $leftover / 2;
} @else {
font-size: $font-size;
line-height: $ratio * $lines;
margin-top: $ratio * $top-rows * 1em;
margin-bottom: $ratio * $bottom-rows - $border * 1em;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment