diff --git a/.gitignore b/.gitignore index 1356686..6bff994 100755 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,3 @@ Thumbs.db -.DS_Store \ No newline at end of file +.DS_Store +node_modules \ No newline at end of file diff --git a/README.md b/README.md index dc8744e..f680736 100755 --- a/README.md +++ b/README.md @@ -5,3 +5,11 @@ The only dependency is SASS. We also provide an npm package. Find all the documentation at [ritmo.marzeelabs.org](http://ritmo.marzeelabs.org). + +=== + +##### Compass Aliases + +If you would like to use the original [Compass naming conventions](http://compass-style.org/reference/compass/typography/vertical_rhythm/) with RITMO, simply add the following line to your main stylesheet after importing RITMO. + +`@import '~ritmo/compass-aliases';` diff --git a/_compass-aliases.scss b/_compass-aliases.scss new file mode 100644 index 0000000..2e8f0ff --- /dev/null +++ b/_compass-aliases.scss @@ -0,0 +1,31 @@ +// Aliases Ritmo namespaced variables, functions, and mixins back to the original names from the Compass Veritcial Rhythm toolkit. Including this partial makes it possible to use Ritmo as a nearly plug and play replacement. You will still need to define the newer Ritmo configurable variables for $base-line-unit and $base-line-multi in place of $base-line-height. + +// ALIASED VARIABLES + +$ritmo-unit: $rhythm-unit !default; +$ritmo-border-width: $default-rhythm-border-width !default; + +// ALIASED FUNCTIONS + +@function rhythm($args...) { @return ritmo($args...); } + +// ALIASED MIXINS + +@mixin establish-baseline($args...) { @include ritmo-baseline($args...); } +@mixin adjust-font-size-to($args...) { @include ritmo-font-size($args...); } +@mixin adjust-leading-to($args...) { @include ritmo-leading($args...); } +@mixin leader($args...) { @include ritmo-top($args...); } +@mixin padding-leader($args...) { @include ritmo-top-padding($args...); } +@mixin margin-leader($args...) { @include ritmo-top-margin($args...); } +@mixin trailer($args...) { @include ritmo-bottom($args...); } +@mixin padding-trailer($args...) { @include ritmo-bottom-padding($args...); } +@mixin margin-trailer($args...) { @include ritmo-bottom-margin($args...); } +@mixin rhythm($args...) { @include ritmo($args...); } +@mixin rhythm-margins($args...) { @include ritmo-margins($args...); } +@mixin rhythm-padding($args...) { @include ritmo-padding($args...); } +@mixin apply-side-rhythm-border($args...) { @include ritmo-side-border($args...); } +@mixin leading-border($args...) { @include ritmo-top-border($args...); } +@mixin trailing-border($args...) { @include ritmo-bottom-border($args...); } +@mixin horizontal-borders($args...) { @include ritmo-horizontal-borders($args...); } +@mixin h-borders($args...) { @include ritmo-horizontal-borders($args...); } +@mixin rhythm-borders($args...) { @include ritmo-horizontal-borders($args...); } diff --git a/package.json b/package.json index 3b1d7fa..57049f3 100755 --- a/package.json +++ b/package.json @@ -18,5 +18,6 @@ }, "devDependencies": { "node-sass": "^3.7.0" - } + }, + "main": "_ritmo.scss" }