I can't seem to get this to work with Rails 3.2.6
I put gem "modular-scale", "~> 0.0.5" in my Gemfile but when I do @import "modular-scale" it throws a file not found error. I've had no problems using it in other frameworks, PHP or whatever, but Rails doesn't seem to find the gem.
Is there something specific to do or is it related to the new incoming gem ?

As a side effect of the new calculation logic, an exponent function is built in.

exponent(5, 3) is a way of calculating 5^3=125

I guess it can go in a new section of the readme, but it doesn't seem to fit with the rest of the modular scale stuff.

Hi Scott,

I'm a bit new to compass etc. I've got your gem running, but I can't figure out how to output my current settings to a list in the terminal.

If you can help, that'd be great!

I had been using the mixin successfully while developing for a project and for some reason it started to throw me this error. I have been researching online and have tried a number of tweaks (order of includes, adding sassy_math) to no avail so I thought I'd check if someone had seen this before and knows the fix.
Syntax error: Undefined operation: "power(golden_ratio(), 1) times 16px 160px".
on line 52 of C:/Users/greggm/Dropbox/htdocs/webdemo1/JAT/JATArticle/v4_5/sass/vendor/_modular-scale.scss

thx.

Had to revert to 1.0.2 due to somehow 'modular-scale' not being registered as @import-able for compass...

Can give more info if needed, but jsut wanted to let you know

In most of my projects i'm using a mixin to generate font sizes for headings.

It accepts the maximum and minimum font-sizes for h1 and h6 respectively and generates font-sizes evenly:

+heading-sizes-even(30px, 16px)

Result:

The mixin is super simple:

=heading-sizes-even($max: 30px, $min: 16px, $start-h: 1, $end-h: 6, $debug: false)

  $number-of-headings: $end-h - $start-h + 1
  $increment: ($max - $min) / ($number-of-headings - 1)

  @for $i from 1 through $number-of-headings
    h#{$start-h + $i - 1}
      $size: $min + ($increment * ($number-of-headings - $i))
      font-size: $size

      @if $debug
        &:after
          content: "#{$size}"

I've been wondering how to include support for modular scale to this mixin. I wish that the distribution of sizes was not even but proportional to e. g. golden ratio. I'm no good at math and i fail to come up with a solution.

Can you please suggest a solution?

Ultimately, i would like to see the described functionality in the modular-scale extension. Something like:

+modular-scale-heading-sizes($sizes: 30px 16px, $headings: 1 6, $ratio: golden())

I'm using modular-scale to generate the font-sizes used by my headlines (h1-h6). When I specified modular-scale-list($n, $n + $i), my expectation as a programmer is that I would have a list containing $i + 1 items. Instead, I receive a list of $i + 2 items where the first item is the string MS-LIST:.

I understand that this string is desirable for debugging purposes with the modular-scale-list mixin, but wouldn't it make more sense to have that string be contained within the mixin instead of returned by the function?

I believe 2c23acf introduced an error with certain negative multiples when the base is a list.

Example ms(-2, 16px 44px, 1.618, false); should equal 9.88875px (see ModularScale.com) but equals 6.11171px.

Actually the multiples -2, -3, and -4 with these settings all equal 6.11171px.

Line 220 of _modular-scale.sass is causing issue as for some reason the file isnt't interpreted as UTF-8. The offending character is "•". Have commented out the line and it worked, but obviously not a solution.

I'm using rvm with ruby 1.9.3 and Compass 0.12.2, Sass 3.2.4.

Any tips would be appreciated.

The modular-scale-classes is great but it can be a bit of an overkill, even more when you don't actually use the created classes in your HTML. For that I suggest the creating of a similar mixin, mudlar-scale-placeholder that would do pretty much the same :

@for $i from 0 through $multiple
    %#{$class-slug}-#{$i}
      #{$property}: modular-scale($i, $base-size, $ratio)

Only the actual output would be a serie of placeholders, thus letting the code clean and leaving only the scales that are actually used.

Actually You can put any units through modular-scale. Just write something like $base-size: 1em; in your project. I have used it with em, rem, %, and px.

Hey,

Thanks for your work on this feature - excited to get playing with it ( https://twitter.com/ldexterldesign/status/345131467938091008 ), however I'm getting the following error on start up - any help?

Yours hopefully,

Awesome plugin, but I am kind confused on some of the documentation on here.

"You can output a list to your terminal to help you find out what values are on your scale."
@include modular-scale-list($start, $end, $base-size, $ratio)

So I can call +modular-scale-list(1, 12, 16px, $ratio) in say base.sass and I will see the 1—12 scale numbers flash by in my Bash terminal?

Or start in the Sass repl sass -i and type modular-scale-list(1, 12, 16px, $ratio) and see the 1—12 scale numbers flash by in my Bash terminal?

Neither of these are working for me.

In this article they mention modular-scale-classes with class slug variable and all that. I tried this, peeked at my source code and no "ms-1", "ms-2" to be found. I also peeked at your source code and didnt see any modular-scale-classes mixins.

Is this feature no longer available? Deprecated?

Thanks!

We have the domains modular-scale.com and modularscal.es to work with.

Aesthetically it seems like we need to use lots of modular scales, probably the golden ratio. Maybe something like this: http://2011.beercamp.com/ but moving to different levels of a golden ratio nautilus kind of thing.

But focusing on content first that may not mesh well. Docs and install guides with a history of why modular scales are so great with an article about their usage in the history of design. Singularity works really well with modular scales if we need a column grid.

Hey Scott,

I'm glad Mason got the function in place cause that let me get to this mixin a bit faster. I can see someone defining a scale and using the new modular-scale-classes mixin to generate a range of classes to @extend. I've built in support for setting the class slug as well as setting the property. Take a peek and let me know what you think and if it can be improved more.

I think there is a lot we can simplify and consolodate here as well as writing more in Ruby.

I started a new branch where I am working on some things. Architecture wise I think we can make this tighter.

ms-function($n)
  @if multi-ratio or multi-size
    list: ()
    from 0 - $n
      add each ratio to list
      add each size to list
    sort list, trim list
    return nth list ($n)
  @else
    return basic math

This should be faster, easier to read, and more DRY. Hunting down issue #33 is a nightmare in the current iteration.

We should also have the math consolidated in the ruby instead of broken in both ruby and Sass. Starting to explore some here: https://github.com/scottkellum/modular-scale/tree/refactor

The default $base-size is currently 14px. The browser default is usually 16px.

Should we re-evaluate this default? 1em or rem is also a good candidate. Rem would be ideal because it IS the actual base font size but there isn’t enough browser support.

Hi, I want to output ems instead of pixels. I've tried setting $base-size: 1em however Compass doesn't like this.

Hi! I've been trying to use your gem, it installs just fine but when I try to require it using codekit (I know I have to use the complete path): require '/Library/Ruby/Gems/1.8/gems/modular-scale-1.0.2/lib/modular-scale.rb';

I keep getting this error:

"Compass was unable to compile one or more files in the project:

LoadError on line 2 of /Library/Ruby/Gems/1.8/gems/modular-scale-1.0.2/lib/modular-scale.rb: no such file to load -- sassy-math
Run with --trace to see the full backtrace"

I've even installed sassy-math just in case and nothing, I hope you guys can help me here!

Thanks a lot

Refactoring this in Ruby as a Compass plugin is going to provide a significant speed increase as well as increase accuracy. Downside: those not using Compass will have difficulty using this.

If we write this correctly it will not have to even be included in a stylesheet.

Is there a way to show a ms background like, for instance, the way we can turn on a SUSY grid background? You know, sort of like the horizontal rules on a piece of notebook paper.

Thanks!

Tim's modular scale uses dual base-sizes instead of dual ratios.
http://modularscale.com/

Playing around with dual ratios the ratio closer to 1 usually takes precedent over the more extreme ratio.

We can either re-write it so that we support multiple base-sizes or support both multiple base-sizes and multiple ratios. The logic required will grow exponentially if we choose to support both.

Mason, it was your addition, how do you feel about it?

The error I get is:

Syntax error: Undefined operation: "Infinity times 16px 78px".
on line 52 of /home/rajib/.rvm/gems/ruby-1.9.3-p392/gems/modular-scale-1.0.6/stylesheets/_modular-scale.scss

The sass code I am calling from is:

$ratio: perfect-fourth();
$base-font-size: 16px !default;
$importantNum: 78px !default;
$base-size: $base-font-size $importantNum;

Instead of perfect-fourth() if I use golden() then its working properly.

I love using modular scales but find that, while it works great for increasing sizes from the base size (positive multiples), decreasing sizes (negative multiples) get too small too quick—even with smaller ratios. I need finer control with smaller sizes. I have created a function that allows for a separate ratio for negative multiples. Might this be something that would be useful for others and built into Modular Scale?

I have simply set a $ratio-negative variable and if the multiple is negative, I use this ratio. $ratio-negative could default to $ratio so this feature wouldn't take affect unless $ratio-negative was explicitly set.

Below is a table showing the difference between having a 1.25 ratio for all numbers and a 1.25 ratio for 0 and greater and 1.125 for negative numbers.

            All =        < 0 =
Multiple  1.25 Ratio  1.125 Ratio
========  ==========  ===========
 ms(5)        49          49
 ms(4)        39          39
 ms(3)        31          31
 ms(2)        25          25
 ms(1)        20          20
 ms(0)        16          16
ms(-1)        13          14
ms(-2)        10          13
ms(-3)         8          11
ms(-4)         7          10
ms(-5)         5           9

0.0.3 is out there: https://rubygems.org/gems/modular-scale

And we did a write up on The Sass Way: http://thesassway.com/projects/modular-scale

Seems superfluous now to have both the function and original mixin. The function is far more versatile and is easier to write.

I am running Sass & Compass via Codekit. To be able to use the Modular Scale extension i had to install Sass & Compass in the terminal and then call the external versions of them from within Codekit. Otherwise they wouldn't work due to dependency issues. So far so good. But my questions is, is there a way to output the mixin modular-scale-list if the preprocessing is done in Codekit - cuz a console output wouldn't be possible if Codekit is running things i suppose?

And would it be possible to implent an option to print out a "commented out" ms-list to the sass/scss file?

A mixin offering some kind of Modular Scale summary, like suggested by Tim Brown, would be nice as well :

/*

Typesetting for ALA
Author: Tim Brown
Date: 21 Apr 2011

http://modularscale.com/scale/?px1=18&px2=190&ra1=1.618
18px @ 1:1.618
190px @ 1:1.618

http://alistapart.com/articles/more-meaningful-typography/
----------------------------------------------- */

Best regards Ralf

Hello,
Totzl ruby / sass / compass newbie here.

I am trying to use modular-scale.
I am not installing the gem or anything. I tried but it didn't seem to work for some reason but that's not the issue.
I installed sassy-math (the gem) and I'm importing modular-scale directly in my scss file
I keep getting problems with the compiler complaining about the sort-list function not being defined.

In an old version of modular scale that function was included but it's not anymore.
I also can't find it anywhere in sassy-math.

I just can't figure it out. Could you help me please?

could there be a .scss version of modular-scale.sass?

there's one, but it's outdated (canarymason/modular-scale)

It is more important to allow the user to set the defaults, but I understand the importance of defaults being baked in. The nature of the cascade makes this hard to do as a standalone file.

Adam, can you push the new gem? Can you also add @canarymason and I so we can push new gems?

Thanks!

Good example: https://github.com/sparklemotion/nokogiri/blob/master/CHANGELOG.rdoc

Undefined operation: "power(minor-sixth(), 1) times 16px".)

I am going around and around trying to fix this error. I have been able to get past it before some how but for the life of me I cannot now.

I have installed gems for modular-scale and sassy-math and configured the config.rb file to require modular-scale.

Please help.

Hi, I just reinstalled compass and the modular-scale gem.

Everything was working before without any problem. Now it started saying this message and I have no clue.

My site is a simple github page, so you can see what I mean.

https://github.com/bernardoantunes/bernardoantunes.github.com

Any help would be appreciate, I saw the other post about the same problem but I got no solution that worked. Also this is a different problem because it was already working nice and I changed nothing in the code.

When updating to sass 3.2.0 I get a error like this in my stylesheets: 'error sass/app.scss (Line 7 of _globals.scss: Function ms is missing argument $base-size.)'

It does give this error on sass version 3.2.0.alpha.278 and below.

Warning. Error encountered while saving cache [RAILS_ROOT]/tmp/cache/sass/c128eee8c8d012fc0634122b270ca80bc0c6c6e5/_modular-scale.sassc: can't dump anonymous class #

Sample app https://github.com/slbug/test_modular_scale (just start, open localhost:3000, see console)

I have installed the gem and required it in my Compass. The following code:

@import "modular-scale";
$ratio: golden();
$scale: modular-scale(1, 16px, $ratio);
@include modular-scale-list(1, 3, 16px, $ratio);
@debug $scale;

Produces:

/Library/Ruby/Gems/1.8/gems/modular-scale-1.0.0/stylesheets/_modular-scale.sass:209 DEBUG: MS-LIST: 0px 0px 0px
/Users/Oliver/Development/Static/OliverJAsh/source/_scss/base.scss:34 DEBUG: 0px
overwrite source/css/base.css 

Have I missed something? I have the previous version of the gem but ran sudo gem install modular-scale again and it appeared to update.

I get the following error when simpliy including an @import to 'modular-scale.scss';

I installed the gem added it to my config.rb file. When I started compiling, it was tripping up over the variable I had set of "$ratio: $golden;" I opted to just copy/past the stylesheet instead, but thought I'd call out this possible bug for you guys.

I am playing around with the combo modular scale alongside the compass vertical rhythm module. If you would like to try to apply different base sizes like on the ia.net homepage with a small base size for small viewports and a larger base size for desktop sized viewports i ask myself two questions:

• If you try to build a layout like the ia.net page with a single scale it would be like ms(-1) (or a even lower value) on mobile for the p element and for desktop viewports ms(0) and the adjustment on other typography related elements accordingly?
• Or would it make a noticeable visual impact if you define a scale for mobile viewports and a second for desktop viewports; so that you would be able to establish different scales on different viewports in compass vertical rhythm module. I am just unsure if it would make a noticeable difference and thinking it through makes my head spin pretty much. ;))) But if it would i might have an idea for the vertical rhythm side how to take advantage of it - might give a patch a try then too.

Best regards r.

As soon as i import "modular-scale" i get the following error on compilation:

�[31m�[0m�[31m error�[0m css-src/main.scss (Line 198 of _modular-scale.sass: Invalid CSS after "($args": expected ")", was "...)")

Im running with sass-3.2.1 and latest compass also.

how i use important number? can i go with something like this: ms(0, 16px, 14px) ?

major-tenth() ratio and decimal need switching?

Best regards,

Hello, having some problems with installing as a gem.

I've bundled the Gem, added modular-scale to compass.rb (Rails project)

In applications.css.sass I've added @import "modular-scale" and then in another file called..

$ratio: $golden

The @import is definitely being called before $ratio is set.
Getting a Undefined variable: "$golden"

Edit
Getting the same error using it inline, while removing the global $ratio var.
font-size: ms(3, 16, $golden)

When I run:

bower install modular-scale

It shows installs 0.0.4, and I can't seem to get 1.0.6?

If I run:

bower info modular-scale

I get:

cached git://github.com/Team-Sass/modular-scale.git#0.0.4
validate 0.0.4 against git://github.com/Team-Sass/modular-scale.git#*

I have just started using git & bower so maybe I am doing it wrong, but it seems like I am getting the wrong version?

The intention of the modular scale classes mixin is to provide a list of values the designer can read through. However it might be better to simply write values to a list and warn them. That way the list is visible to the designer but doesn’t generate code.

I also think that we should keep modular scale as a calculator, not a code generator. Tools around calculation should be included in this project, tools around code generation should not be in this partial (grids, type tools… should be separate projects)

See issue #17
https://github.com/scottkellum/modular-scale/issues/17#issuecomment-5355407

Figure out ways to consolidate and refine logic. Building support for exponents may help here. Seems like the calculation loop can be written in once and pulled in as needed.

// Sass exponent support
@function exponent($base, $exponenet)
  @if $base > 0
    @for $i from 0 through ($exponenet - 2)
      $base: $base * $base
  @if $base < 0
    @for $i from 0 through ($exponenet + 2)
      $base: $base / $base
  @return ($base)

Hey Scott,

We're using Modular Scale in Foundation 3 and I'm having a difficult time getting the $ratio variable to change correctly. You can see how we're using it here: https://github.com/zurb/foundation/tree/master/stylesheets/foundation

The problem is when people create a new compass project and update the ratio, it doesn't change. I've tried moving variable order around and commenting/uncommenting from within modular-scale.sass. Can you take a look at our repo and see if we're doing something wrong?

If there is any other information I should pass along, let me know.

Wondering if this is dead because there seem to be a couple of issues and no work as been done on this project

1. There is no scss file
2. There is no template folder so nothing gets copied into your project

On line 19 of the main file you used a square root symbol √, and granted although neither Sass nor Compass themselves have a problem with it, a lot of the modern compilers and watchers out there (LiveReload, FireApp, Compass.app) seem to choke on it.

As it is not really a crucial element of the sass file and could maybe be replaced by a simple V or a text formulation square root, is there any chance this character might be removed or modified ?