开发者

What is the correct usage of blueprint-typography-body([$font-size])?

开发者 https://www.devze.com 2022-12-30 22:06 出处:网络
Recent convert to RoR and I\'ve been using Compass w/ Blueprint to dip into the proverbial pool. Compass has been fantastic, but I\'ve come across something strange within the Typography library.

Recent convert to RoR and I've been using Compass w/ Blueprint to dip into the proverbial pool. Compass has been fantastic, but I've come across something strange within the Typography library.

The blueprint-typography-body mixin contains the following:

=blueprint-typography-body($font-size: $blueprint-font-size)
  line-height: 1.5
  +normal-text
  font-size: 100% * $font-size / 16px

My question revolves around "font-siz开发者_JAVA技巧e." I'm a bit lost, as I would expect to pass in a font size and have that size reflected upon page load. However, in this scenario the formula seems to dictate a percentage against the default font.

ie:

+blueprint-typography-body(10px) //produces 7.5px off of the default font size of 12px from what I can tell.

In essence, I'm curious if there is a standard to setting font size within Compass other than explicitly declaring "font-size: 10px".

Note: The reason I'm leaning towards Blueprint/Compass font stylings is due to the standardization of line-heights, fonts and colors.


To be honest, the compass port of the blueprint typography is not fully configurable yet. So changing that default is probably not going to give you a proper font rhythm.

However, The next release of susy has a fully configurable vertical rhythm module that I helped build and it's pretty nice.

Susy

Vertical Rhythm Module


Just read in the discussion on Compass documentation (Julio Antúnez's comment) that you can adjust font sizes like this:

@import "compass/typography"

$base-font-size:   14px
$base-line-height: 21px

header h1
  +adjust-font-size-to(18px)

Not sure this is recommended way but it works for me. I just started using Compass & Blueprint so above might cause problems elsewhere.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号