Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add automatic type scaling based on modular scales #2

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

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