/* ========================================================================== *\ Core -> Base -> Root ($core-base-root) \* ========================================================================== */ /** * The element. * * 1. Set the default `font-size` and `line-height` for the project based on variables set previously. The `font-size` is represented in `rem`s, and the `line-height` is represented as a unitless value. * 2. Force a vertical scrollbar. * @link http://cbrac.co/163MspB * 3. Ensure the element's `height` is at least the viewport height. * * NOTES: * * Use `text-rendering` with caution. * @link http://cbrac.co/SJt8p1 * * Avoid the webkit anti-aliasing trap. * @link http://cbrac.co/TAdhbH * * IE for Windows Phone 8 ignores `-ms-text-size-adjust` if the viewport * tag is used. * @link http://cbrac.co/1cFrAvl */ html { font-family: @root-font-family; .to-rem(font-size, @root-font-size); /* 1 */ line-height: @root-line-height; /* 1 */ overflow-y: scroll; /* 2 */ height: 100%; /* 3 */ background-color: @root-background-color; color: @root-text-color; } /** * The element. * * 1. Ensure the element's `min-height` is at least the viewport height. */ body { min-height: 100%; /* [1] */ } /** * Set a consistent margin for common elements to maintain vertical rhythm. */ blockquote, dl, figure, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, hr, menu, ol, p, pre, summary, table, ul { .to-rem(margin-bottom, @spacing-base); } /** * Add word wrapping and basic hyphenation to common elements. */ caption, p, table, td, textarea, th { word-wrap: break-word; hyphens: auto; }