From 4a1ad6729da3ccddd9959cdf1b747ecc7a3e4b49 Mon Sep 17 00:00:00 2001 From: Daniel Box Date: Sun, 19 Jul 2015 20:19:59 -0500 Subject: [PATCH 1/4] extracting typography mixins from utilities --- axis/typography.styl | 137 ++++++++++++------ axis/utilities.styl | 43 ------ .../{utilities => typography}/font-face.css | 0 .../{utilities => typography}/font-face.styl | 0 .../{utilities => typography}/font-weight.css | 0 .../font-weight.styl | 0 .../{utilities => typography}/raquo.css | 0 .../{utilities => typography}/raquo.styl | 0 test/test.coffee | 18 +-- test/visual.html | 8 +- 10 files changed, 104 insertions(+), 102 deletions(-) rename test/fixtures/{utilities => typography}/font-face.css (100%) rename test/fixtures/{utilities => typography}/font-face.styl (100%) rename test/fixtures/{utilities => typography}/font-weight.css (100%) rename test/fixtures/{utilities => typography}/font-weight.styl (100%) rename test/fixtures/{utilities => typography}/raquo.css (100%) rename test/fixtures/{utilities => typography}/raquo.styl (100%) diff --git a/axis/typography.styl b/axis/typography.styl index 2ee05cf..7b264dc 100644 --- a/axis/typography.styl +++ b/axis/typography.styl @@ -2,9 +2,54 @@ // Typography // ---------- +// Alias: Bold +// It's just faster to type bold() than font-weight: bold + +bold() + font-weight: bold + +// Alias: Italic +// It's just faster to type italic() than font-style: italic + +italic() + font-style: italic + +// Alias: Normal +// Put the font-weight and style back to normal + +normal() + font-weight: normal + font-style: normal + +// Mixin: Raquo +// +// Because technically raquo is not semantic, it's better to add it like this. +// +// ex. raquo() + +raquo() + &:after + content: " \00BB" + +// Mixin: Font Face +// +// Super simple font-face declaration. Just give the name and the folder it +// lives in. Make sure the font name matches the name of the files. Uses the +// fontspring syntax: +// http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax +// +// ex. font-face(proxima-nova, '/fonts') + +font-face(name, folder, weight='normal', style='normal') + @font-face + font-family: name + src: url(folder unquote('/') name unquote('.eot') '?#iefix') format('embedded-opentype'), url(folder unquote('/') name unquote('.woff')) format('woff'), url(folder unquote('/') name unquote('.ttf')) format('truetype'), url(folder unquote('/') name unquote('.eot') unquote('#') name) format('svg'); + font-weight: unquote(weight) + font-style: unquote(style) + // Function: Line Height -// -// If there is a font-size set on the parent element, adjusts the line height to +// +// If there is a font-size set on the parent element, adjusts the line height to // match that. If not, it uses the base font-size to calculate the line-height. -line-height() @@ -15,10 +60,10 @@ line-height: 1.6rem // Mixin: Text Margin -// +// // Puts nice visually pleasing top and bottom margins on a paragraph of text. // Put a font-size on your element to have it adjust accordingly. -// +// // ex. p // font-size: 18px // text-margin() @@ -30,10 +75,10 @@ text-margin(size=font-size) margin: unit(font-size*.75, 'px') 0 // Mixin: Paragraph -// +// // Sets a nice size, line-height, and margins on a paragraph of text. Pass a // size in to customize. Toggle margins off if you don't want them. -// +// // ex. p() // ex. p: 18px // ex. p: 14px false @@ -87,9 +132,9 @@ reset-case() text-transform: none // Mixin: Small -// +// // Makes your text smaller and a little lighter. Great on tags. -// +// // ex. small() small() @@ -110,12 +155,12 @@ small() openTypeLigatures() if ligatures // Mixin Set: h1, h2, h3, h4, h5, h6 -// +// // These provide nice defaults for headings based off the default font size. // The can scale infinitely, and work best when matched to their corresponding // html elements. If you'd like to change the base size of a header, just pass // it as an option. -// +// // ex. h3() // ex. h3: 3.5 @@ -139,11 +184,11 @@ h6(size=0.9) upcase() // Mixin: Link -// +// // A nice default style for links. Accepts a color and a style. Color can be // anything, style can be underline, darken, lighten, or glow, each giving it a // different style of interaction when hovered. More suggestions here welcome. -// +// // ex. link() // ex. link: green // ex. link: #57777E 'glow' @@ -165,12 +210,12 @@ link(color=blue, style='underline') else if style == 'glow' &:hover text-shadow: 0 0 7px rgba(color, .6) - + &:visited opacity: .8 // Mixin: Reset Link -// +// // Sometimes my link mixin of the browser defaults will give you questionable // link defaults that you don't want on certain elements. This guy gets rid of // that. @@ -181,17 +226,17 @@ reset-link() border: none text-decoration: none color: initial - + &:hover border: none text-decoration: none color: initial - + &:visited opacity: 1 // Mixin: Text Selection -// +// // This guy sets the text select color intelligently based on the // highlight-color variable found in the settings file. If you really want, you // can pass it a color override too. @@ -204,17 +249,17 @@ text-selection(color=highlight-color, textColor=null) &::-moz-selection background: color color: textColor - + &::selection background: color color: textColor // Mixin: Ul -// +// // A nice default for list styles. More or less the same as browser defaults, // scales nicely. You can pass it any style that list-style-type would normally // take. Defaults to disc. Use this on a ul element por favor. -// +// // ex. ul() // ex. ul: 'square' @@ -229,11 +274,11 @@ ul(style='disc') padding: 0.125rem // Mixin: Ol -// +// // A nice default for list styles. More or less the same as browser defaults, // scales nicely. You can pass it any style that list-style-type would normally // take. Defaults to decimal. Use this on a ol element por favor. -// +// // ex. ol() // ex. ol: 'upper-roman' @@ -248,10 +293,10 @@ ol(style='decimal') padding: 0.125rem // Mixin: Inline List -// +// // For when you need your list to be horizontal. Pass it the spacing you want // between list elements, whatever units you'd like. Defaults to 20px. -// +// // ex. inline-list() // ex. inline-list: 15px @@ -269,11 +314,11 @@ inline-list(spacing=20px) margin-right: 0 // Mixin: Reset List -// +// // If you're tired of all the list shenanigans and want to get rid of them for // this special list you're working on, this is your guy. Resets the margins, // padding, and style. -// +// // ex. reset-list() reset-list() @@ -287,11 +332,11 @@ reset-list() margin: 0 // Mixin: Blockquote -// +// // Nice styles for a blockquote, and even puts a nice hyphen in before your // citation. Use with a

and ,