Skip to content

Conversation

@Cleecanth
Copy link

Using modular scale principles (http://alistapart.com/article/more-meaningful-typography), I added the option for automatic heading scaling.

This still uses the typecsset base functions/mixins, but allows the user to create a typographic scale for slightly more harmonious type scaling.

Some of this might be able to be cleaned up, but the functions work as suggested.

Future possibility:

  • Make the modular-scale function available via a mixin (or variable list) to allow users access to their scale outside of just headings.

Cleecanth added 2 commits January 7, 2014 14:25
Using the principles from Tim Brown's "More Meaningful Typography",
users can now set automatic heading sizes.

- Added exponent function to remove compass dependency.

- Added Modular Scale function.

- Added loop for automatic heading creation.
@mmadden
Copy link

mmadden commented Jan 7, 2014

Funny, I just started using typcecsset in a new project last night and also integrated https://github.com/Team-Sass/modular-scale (2.x) to do exactly this (applying modular scales to headings, etc.).

There are two things I really like about the modular-scale (2.x) project that I'd like typecsset to play nice with or replicate:

  • I can use the ms(n) function anywhere I need to apply the scale to other elements (e.g. table cell padding).
  • The scale is easily changed using named-constants or the decimal value (e.g. $minor-seventh or 1.778).

Even more awesome would be having functions to convert to/from pixel/rem units, and add leading/trailing line spaces (with pixel fallbacks) to arbitrary elements to maintain the baseline when applying modular scales.

@Cleecanth
Copy link
Author

I'll be adding a commit tomorrow to expose the modular scale as a mixin that can be used for any property.

Something like (where 1 is the desired scale increment):

p { @include modular-scale( 1 , margin-left ); }

Which would output to something like:

p { margin-left: 21px; margin-left: 1.3125rem; }

Using negative numbers will allow you to go down the scale (just a nice side effect of the algorithm).

@mmadden
Copy link

mmadden commented Jan 9, 2014

@Cleecanth, I look forward to seeing how this turns out.

What do you think about specifying the $typecsset-ratio as an integer instead? (e.g. the scale values shown at http://type-scale.com/)

Cleecanth added 2 commits January 9, 2014 12:54
Exposed the modular scale to users via a mixin, using the syntax:
typecsset(x, property), and made typecsset-ratio more versatile.

- Added function to allow floats in typecsset-ratio .

-Added function to ensure typecsset-ratio is >= 1.

-Added documentation for new mixin and additional typecsset-ratio
functionality to README.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants