Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Modular scale mixin and Music Intervals #129

Closed
wants to merge 10 commits into from

3 participants

@polymetis

I have added a font-size mixin that will allow us to use rem values with a pixel fallback for lesser browsers.

I have also added music intervals to both the modular scale function and the font-size mixin to help designers work with other analogies they are comfortable with.

More on Music Intervals and Visual Design here

I have only added to the modular scale function. What was there remains untouched and I tried to follow those conventions.

@kaishin
Owner

I can think of the different use cases for this, but I'd say i's too specific compared to the other Bourbon mixins. We have plans to build a modular-scale mixin and we'd love to see this made into something more generic that can be used in more places than just font sizes.

@polymetis

I could remove the font-size mixin if you like. The music intervals have already been added to the pre-exsisting modular scale function. Is that more in tune, pardon the pun, with the goal set for bourbon?

@polymetis

New idea. What if I treat this like the prefixer addon? Call it something like _rem_modular_scale.scss so that we can pass any css value as an argument and get a pixel fallback?

@polymetis

Any new ideas from bourbon land on this? Would love to start a discussion of some modular geometry.

@plapier

We've added Scaling Variables to the library, which overlaps with much of the stuff in this Pull request. I think the variables are a much more elegant and flexible solution when combined with the modular-scale mixin. 5bdaa07

The mixin also now has double-stranded support: #175

The shortcut helper functions you've created are nice, but I think it may be too specific for Bourbon. I'd rather lean on the module-scale mixin that is flexible for many situations. I could see the helpers living in a separate Bourbon plugin though. Feel free to create a separate library. I'd like to get a collection of plugins/libraries in the wiki that work well with Bourbon.

I'm going to close this for now since I think the new modular scale functionality will do much of what you're looking for.

I'm open to your thoughts.

The new functionality will be available in the next version release (coming soon).

@plapier plapier closed this
@polymetis

The those do pretty much what I wanted this request at least. :D

I have since developed some thoughts about music and web design but that requires a blog post and I would love to make a bourbon plugin to accompany that though.

Just need to get work to calm down. :P

Thanks for responding though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
1  app/assets/stylesheets/_bourbon.scss
@@ -35,6 +35,7 @@
@import "addons/button";
@import "addons/clearfix";
@import "addons/font-family";
+@import "addons/modular-scale-font-size";
@import "addons/hide-text";
@import "addons/html5-input-types";
@import "addons/position";
View
110 app/assets/stylesheets/addons/_modular-scale-font-size.scss
@@ -0,0 +1,110 @@
+/* Usage
+ * This makes using rem easier by setting a pixel fallback for lesser browser.
+ *
+ *This mixin expects the $value to be an *intended* em value, an increment value {Where on the scale it is} and a ratio that is either a value of your own devising or one of the named values below.
+ * e.g. @include modular-scale-font-size(1,6, minor-third) or modular-scale-font-size(1.05,3, 1.0004)
+ *
+ * The mixin will also take into account a root-font-size if it is set with the variable $root-font-size. If not it defaults to 100%.
+ *
+ * More info: http://snook.ca/archives/html_and_css/font-size-with-rem, http://24ways.org/2011/composing-the-new-canon
+*/
+$root-font-size: 100% !default;
+
+$root-font-multiplier: ($root-font-size / ($root-font-size * 0 + 1))/100;
+
+@mixin modular-scale-font-size($value, $increment, $ratio){
+ @if $ratio == unison {
+ $ratio: 1;
+ }
+
+ @else if $ratio == minor-second {
+ $ratio: 1.067;
+ }
+
+ @else if $ratio == major-second {
+ $ratio: 1.125;
+ }
+
+ @else if $ratio == minor-third {
+ $ratio: 1.2;
+ }
+
+ @else if $ratio == major-third {
+ $ratio: 1.25;
+ }
+
+ @else if $ratio == perfect-fourth {
+ $ratio: 1.333;
+ }
+
+ @else if $ratio == augmented-fourth {
+ $ratio: 1.414;
+ }
+
+ @else if $ratio == diminished-fifth {
+ $ratio: 1.414;
+ }
+
+ @else if $ratio == perfect-fifth {
+ $ratio: 1.5;
+ }
+
+ @else if $ratio == minor-sixth {
+ $ratio: 1.6;
+ }
+
+ @else if $ratio == major-sixth {
+ $ratio: 1.667;
+ }
+
+ @else if $ratio == minor-seventh {
+ $ratio: 1.778;
+ }
+
+ @else if $ratio == major-seventh {
+ $ratio: 1.875;
+ }
+
+ @else if $ratio == octave {
+ $ratio: 2;
+ }
+
+ @else if $ratio == major-tenth {
+ $ratio: 2.5;
+ }
+
+ @else if $ratio == major-eleventh {
+ $ratio: 2.667;
+ }
+
+ @else if $ratio == major-twelfth {
+ $ratio: 3;
+ }
+
+ @else if $ratio == double-octave {
+ $ratio: 4;
+ }
+
+ @else if $ratio == golden-ratio {
+ $ratio: 1.618;
+ }
+
+ @else {
+ $ratio: $ratio;
+ }
+
+ @if $increment > 0 {
+ @for $i from 1 through $increment {
+ $value: ($value * $ratio);
+ }
+ }
+ @if $increment < 0 {
+ $increment: abs($increment);
+ @for $i from 1 through $increment {
+ $value: ($value / $ratio);
+ }
+ }
+
+ font-size: $value * $root-font-multiplier * 16px;
+ font-size: $value * 1rem;
+}
View
81 app/assets/stylesheets/functions/_modular-scale.scss
@@ -38,3 +38,84 @@
// }
//
// goldenratiocalculator.com
+
+// Music Intervals
+
+@function unison($value, $increment) {
+ @return modular-scale($value, $increment, 1)
+}
+
+@function minor-second($value, $increment) {
+ @return modular-scale($value, $increment, 1.067)
+}
+
+@function major-second($value, $increment) {
+ @return modular-scale($value, $increment, 1.125)
+}
+
+@function minor-third($value, $increment) {
+ @return modular-scale($value, $increment, 1.2)
+}
+
+@function major-third($value, $increment) {
+ @return modular-scale($value, $increment, 1.25)
+}
+
+@function perfect-fourth($value, $increment) {
+ @return modular-scale($value, $increment, 1.333)
+}
+
+@function augmented-forth($value, $increment) {
+ @return modular-scale($value, $increment, 1.414)
+}
+
+@function diminished-fifth($value, $increment) {
+ @return modular-scale($value, $increment, 1.414)
+}
+
+@function perfect-fifth($value, $increment) {
+ @return modular-scale($value, $increment, 1.5)
+}
+
+@function minor-sixth($value, $increment) {
+ @return modular-scale($value, $increment, 1.6)
+}
+
+@function major-sixth($value, $increment) {
+ @return modular-scale($value, $increment, 1.667)
+}
+
+@function minor-seventh($value, $increment) {
+ @return modular-scale($value, $increment, 1.778)
+}
+
+@function major-seventh($value, $increment) {
+ @return modular-scale($value, $increment, 1.875)
+}
+
+@function octave($value, $increment) {
+ @return modular-scale($value, $increment, 2)
+}
+
+@function major-tenth($value, $increment) {
+ @return modular-scale($value, $increment, 2.5)
+}
+
+@function major-eleventh($value, $increment) {
+ @return modular-scale($value, $increment, 2.667)
+}
+
+@function major-twelfth($value, $increment) {
+ @return modular-scale($value, $increment, 3)
+}
+
+@function double-octave($value, $increment) {
+ @return modular-scale($value, $increment, 4)
+}
+
+// Added function aliases for Music Interval scales. http://24ways.org/2011/composing-the-new-canon
+// Usage
+// div {
+// font-size: perfect-fourth(14px, 1); // returns: 18.662px
+// }
+
Something went wrong with that request. Please try again.