Created
April 30, 2014 18:26
-
-
Save finteractive/11434514 to your computer and use it in GitHub Desktop.
Compass Vertical Rhythm Demo
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
| <body> | |
| <article> | |
| <h1>Title</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod lacus nec sapien aliquet sollicitudin. Sed varius tempor lacus a varius. Nunc rutrum sollicitudin lectus, eleifend pretium lectus mollis quis. Aliquam suscipit ac nibh vel vehicula. Nam tellus nunc, euismod eu sodales in, feugiat eget justo. Suspendisse non orci a turpis imperdiet placerat sit amet quis nisi. Integer eu posuere dolor, a condimentum sem. Vestibulum rutrum lectus ut sem mollis, et placerat felis semper. Nam eu nulla non ante ullamcorper luctus. Curabitur at adipiscing ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque adipiscing tellus et augue elementum auctor. Aliquam a elit commodo, fringilla ligula vel, malesuada augue. Quisque fermentum congue urna ut varius. Morbi ut auctor nibh</p> | |
| </article> | |
| <aside> | |
| <h2>Aside Title</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. uismod lacus nec sapien aliquet sollicitudin. Sed varius tempor lacus a varius. Nunc rutrum sollicitudin lectus, eleifend pretium lectus mollis quis. Aliquam suscipit ac nibh vel vehicula. Nam tellus nunc,uismod lacus nec sapien aliquet sollicitudin. Sed varius tempor lacus a varius. Nunc rutrum sollicitudin lectus, eleifend pretium lectus mollis quis. Aliquam suscipit ac nibh vel vehicula. Nam tellus nunc,Sed euismod lacus nec sapien aliquet sollicitudin.</p> | |
| </aside> | |
| </body> |
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.6) | |
| // Compass (v) | |
| // ---- | |
| // Vertical Rhythm Demo | |
| // See http://compass-style.org/reference/compass/typography/vertical_rhythm/ | |
| @import "compass"; | |
| $base-font-size: 14px; | |
| $base-line-height: 21px; | |
| // $round-to-nearest-half-line: true; | |
| * { | |
| @include box-sizing(border-box); | |
| // Kill Default Margins for demo | |
| margin:0; | |
| } | |
| @include establish-baseline; | |
| body{ | |
| @include adjust-font-size-to($base-font-size); | |
| } | |
| h1 { | |
| @include adjust-font-size-to(32px); | |
| } | |
| h2 { | |
| @include adjust-font-size-to(24px); | |
| } | |
| article { | |
| background-color: #eee; | |
| width: 75%; | |
| float: left; | |
| padding: rhythm(1); | |
| } | |
| aside { | |
| background-color: #ccc; | |
| width: 25%; | |
| float: right; | |
| padding: rhythm(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
| * { | |
| -moz-box-sizing: border-box; | |
| -webkit-box-sizing: border-box; | |
| box-sizing: border-box; | |
| margin: 0; | |
| } | |
| html { | |
| font-size: 87.5%; | |
| line-height: 1.5em; | |
| } | |
| body { | |
| font-size: 1em; | |
| line-height: 1.5em; | |
| } | |
| h1 { | |
| font-size: 2.28571em; | |
| line-height: 1.3125em; | |
| } | |
| h2 { | |
| font-size: 1.71429em; | |
| line-height: 1.75em; | |
| } | |
| article { | |
| background-color: #eee; | |
| width: 75%; | |
| float: left; | |
| padding: 1.5em; | |
| } | |
| aside { | |
| background-color: #ccc; | |
| width: 25%; | |
| float: right; | |
| padding: 1.5em; | |
| } |
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
| <body> | |
| <article> | |
| <h1>Title</h1> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod lacus nec sapien aliquet sollicitudin. Sed varius tempor lacus a varius. Nunc rutrum sollicitudin lectus, eleifend pretium lectus mollis quis. Aliquam suscipit ac nibh vel vehicula. Nam tellus nunc, euismod eu sodales in, feugiat eget justo. Suspendisse non orci a turpis imperdiet placerat sit amet quis nisi. Integer eu posuere dolor, a condimentum sem. Vestibulum rutrum lectus ut sem mollis, et placerat felis semper. Nam eu nulla non ante ullamcorper luctus. Curabitur at adipiscing ligula. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque adipiscing tellus et augue elementum auctor. Aliquam a elit commodo, fringilla ligula vel, malesuada augue. Quisque fermentum congue urna ut varius. Morbi ut auctor nibh</p> | |
| </article> | |
| <aside> | |
| <h2>Aside Title</h2> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. uismod lacus nec sapien aliquet sollicitudin. Sed varius tempor lacus a varius. Nunc rutrum sollicitudin lectus, eleifend pretium lectus mollis quis. Aliquam suscipit ac nibh vel vehicula. Nam tellus nunc,uismod lacus nec sapien aliquet sollicitudin. Sed varius tempor lacus a varius. Nunc rutrum sollicitudin lectus, eleifend pretium lectus mollis quis. Aliquam suscipit ac nibh vel vehicula. Nam tellus nunc,Sed euismod lacus nec sapien aliquet sollicitudin.</p> | |
| </aside> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment