Double stranded modular-scale function

[jonathanhefner]

I added double strand support to the modular-scale function, as requested in #127. The function behaves as it did before, but when called with a list as its first argument, it uses the first and last values from the list as the basis for the double strand.

This is my first pull request to you guys, so please let me know if something is amiss. Questions? Comments?

[ldexterldesign]

Hey,

Good work - I've been looking for this feature after reading about it in http://thesassway.com/projects/modular-scale / https://github.com/Team-Sass/modular-scale

Any tips on how to use this new feature with this function?

Yours hopefully,

[plapier]

@jonathanhefner What is double strand? Can you provide any information as to what it is and how it can be used while designing for the web?

[ldexterldesign]

Thought you might ask - see above ^ ( #175 (comment) )

Regards,

[ldexterldesign]

Just revising my theory on this today, as I'm not getting much feedback...

Am I correct in thinking 'double strand' gives us .lace-type features here ala https://github.com/Team-Sass/modular-scale else I've got the term completely wrong, in which case I apologise :1

Cheers,

[jonathanhefner]

Sorry for the delay!

@plapier The best article to illustrate double strand modular scale is probably http://alistapart.com/article/more-meaningful-typography. There is also a calculator at http://modularscale.com to get a sense of how the numbers scale up.

@ldexterldesign This hasn't been merged yet, so you'd need to do some copying and pasting to use it, but you'd use it very similarly to the original modular-scale function. For example, if you have want to switching from a single-strand modular scale with a base of 14px to a double-strand with a dual base of 14px and 20px, you would change modular-scale(14px, 1, 1.618) to modular-scale((14px 20px), 1, 1.618) (and of course vary the increment and ratio args as you please).

[ldexterldesign]

@jonathanhefner great, thanks - will give it a shot. Good work ;)

@plapier hope to see this in the next release! PS Yea, http://alistapart.com/article/more-meaningful-typography is where I read about it [double strand] too

Kind thanks,

[plapier]

Just got around to testing this out. It works as expected.

How about adding the following variables to make it easier for setting the ratios?

$golden:           1.618;
$minor-second:     1.067;
$major-second:     1.125;
$minor-third:      1.2;
$major-third:      1.25;
$perfect-fourth:   1.333;
$augmented-fourth: 1.414;
$perfect-fifth:    1.5;
$minor-sixth:      1.6;
$major-sixth:      1.667;
$minor-seventh:    1.778;
$major-seventh:    1.875;
$octave:           2;
$major-tenth:      2.5;
$major-eleventh:   2.667;
$major-twelfth:    3;
$double-octave:    4;

The names are based off the work done by the team here: https://github.com/Team-Sass/modular-scale and the dropdown here: http://modularscale.com/

Example:

font-size: modular-scale(14px 20px, 2, $golden);

[plapier]

Added the scaling variables in this commit: 5bdaa07

[ldexterldesign]

Totally agree ;)

https://gist.github.com/ldexterldesign/5787787 - my file from Thursday; when I last touched this

Kind thanks,

[ldexterldesign]

@plapier wonder if you can help over here typeplate/typeplate.github.io#112 (comment) ?

Yours hopefully,