Created
July 19, 2013 14:57
-
-
Save Sawboo/6039709 to your computer and use it in GitHub Desktop.
Typeplate 1.0.1 stylus port
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| +---------------------------------------------------------------------+ | |
| | _ _ _ | | |
| | | |_ _ _ _ __ ___ _ __ | | __ _ | |_ ___ | | |
| | | __|| | | || '_ \ / _ \| '_ \ | | / _` || __|/ _ \ | | |
| | | |_ | |_| || |_) || __/| |_) || || (_| || |_| __/ | | |
| | \__| \__, || .__/ \___|| .__/ |_| \__,_| \__|\___| | | |
| | |___/ |_| |_| | | |
| | | | |
| | | | |
| | URL: http://typeplate.com | | |
| | VERSION: 1.0.1 | | |
| | Github: https://github.com/typePlate/typeplate.github.com | | |
| | AUTHORS: Zachary Kain (@zakkain) & Dennis Gaebel (@gryghostvisuals) | | |
| | LICENSE: Creative Commmons | | |
| | http://creativecommons.org/licenses/by/3.0 | | |
| | | | |
| +---------------------------------------------------------------------+ | |
| */ | |
| // ==========================================================================// | |
| // | |
| // $Variables | |
| // | |
| // ==========================================================================// | |
| // $BaseType | |
| // -------------------------------------// | |
| $weight = normal | |
| $line-height = 1.65 | |
| $font-size = 112.5 // percentage value (16 * 112.5% = 18px) | |
| $font-base = 16 * ($font-size/100) // converts our percentage to a pixel value | |
| $measure = $font-base * $line-height | |
| $font-family = serif | |
| $font-family-sans = sans-serif | |
| $font-properties = $weight $line-height $font-size $font-family | |
| //the serif boolean var can be redeclared from another stylesheet. However | |
| //the var must be placed after your @import "typeplate.styl" | |
| $serif-boolean = true !default | |
| // $Color | |
| // -------------------------------------// | |
| $body-copy-color = #444 | |
| $heading-color = #222 | |
| // $Ampersand @font-face | |
| // -------------------------------------// | |
| $amp-fontface-name = Ampersand | |
| $amp-fontface-source = local('Georgia'), local('Garamond'), local('Palatino'), local('Book Antiqua') | |
| $amp-fontface-fallback = local('Georgia') | |
| // $Ampersand font-family | |
| // -------------------------------------// | |
| // Allows for our ampersand element to have differing | |
| // font-family from the ampersand unicode font-family. | |
| $amp-font-family = Verdana, sans-serif | |
| // $TypeScale | |
| // -------------------------------------// | |
| $tera = 117 // 117 = 18 × 6.5 | |
| $giga = 90 // 90 = 18 × 5 | |
| $mega = 72 // 72 = 18 × 4 | |
| $alpha = 60 // 60 = 18 × 3.3333 | |
| $beta = 48 // 48 = 18 × 2.6667 | |
| $gamma = 36 // 36 = 18 × 2 | |
| $delta = 24 // 24 = 18 × 1.3333 | |
| $epsilon = 21 // 21 = 18 × 1.1667 | |
| $zeta = 18 // 18 = 18 × 1 | |
| // $TypeScale Unit | |
| // -------------------------------------// | |
| $type-scale-unit-value = rem | |
| // $Text Indentation Value | |
| // -------------------------------------// | |
| $indent-val = 1.5em | |
| // $StatsTab | |
| // -------------------------------------// | |
| $stats-font-size = 1.5rem | |
| $stats-list-margin = 0 0.625rem 0 0 | |
| $stats-list-padding = 0 0.625rem 0 0 | |
| $stats-item-font-size = 0.875rem | |
| $stats-item-margin = 0.125rem 0 0 0 | |
| $stats-border-style = 0.125rem solid #ccc | |
| // ==========================================================================// | |
| // | |
| // $Fontfaces | |
| // | |
| // ==========================================================================// | |
| // $UnicodeRange Ampersand | |
| // -------------------------------------// | |
| @font-face | |
| font-family: $amp-fontface-name | |
| src: $amp-fontface-source | |
| unicode-range: s('U+0026') | |
| // Ampersand fallback font for unicode range | |
| @font-face | |
| font-family: $amp-fontface-name | |
| src: $amp-fontface-fallback | |
| unicode-range: s('U+270C') | |
| // ==========================================================================// | |
| // | |
| // $Functions and Helpers | |
| // | |
| // ==========================================================================// | |
| // $Context Calculator | |
| // -------------------------------------// | |
| ems($target, $context) | |
| return ($target/$context){em} | |
| // $Modular Scale Calculator | |
| // -------------------------------------/ | |
| // http://thesassway.com/projects/modular-scale | |
| modular-scale-helper($scale, $base, $value) | |
| // divide a given font-size by base font-size & return a relative em value | |
| return ($scale/$base)$value | |
| // $Measure Margin Calculator | |
| // -------------------------------------// | |
| measure-margin-helper($scale, $measure, $value) | |
| // divide 1 unit of measure by given font-size & return a relative em value | |
| return ($measure/$scale)$value | |
| // ==========================================================================// | |
| // | |
| // $Mixins | |
| // | |
| // ==========================================================================// | |
| // $Modular Scale | |
| // -------------------------------------// | |
| // $Typographic scale | |
| modular-scale($scale, $base, $value, $measure = "") | |
| font-size: unit($scale, px) | |
| font-size: modular-scale-helper($scale, $base, $value) | |
| if $measure != "" | |
| margin-bottom: measure-margin-helper($scale, $measure, $value) | |
| // $Body Copy | |
| // -------------------------------------// | |
| base-type($weight, $line-height, $font-size, $font-family...) | |
| if $serif-boolean | |
| $serif = $font-family | |
| else | |
| $serif = $font-family-sans | |
| font: $weight s('%s%/%s', $font-size, $line-height) $serif | |
| // $Hypens | |
| // -------------------------------------// | |
| //http://trentwalton.com/2011/09/07/css-hyphenation | |
| css-hyphens($val) | |
| // Accepted values: [ none | manual | auto ] | |
| -webkit-hyphens: $val // Safari 5.1 thru 6, iOS 4.2 thru 6 | |
| -moz-hyphens: $val // Firefox 16 thru 20 | |
| -ms-hyphens: $val // IE10 | |
| -o-hyphens: $val // Opera | |
| hyphens: $val // W3C standard | |
| // $Smallcaps | |
| // -------------------------------------// | |
| // http://blog.hypsometry.com/articles/true-small-capitals-with-font-face | |
| // ISSUE #1 : https://github.com/typeplate/typeplate.github.com/issues/1 | |
| smallcaps($color, $font-weight) | |
| // depends on the font family. | |
| // some font-families don't support small caps | |
| // or don't provide them with their web font. | |
| font-variant: small-caps | |
| font-weight: $font-weight | |
| text-transform: lowercase | |
| color: $color | |
| // $Fontsize Adjust | |
| // -------------------------------------// | |
| // correct x-height for fallback fonts: requires secret formula | |
| // yet to be discovered. This is still wacky for support. Use | |
| // wisely grasshopper. | |
| font-size-adjust($adjust-value) | |
| // firefox 17+ only (as of Feb. 2013) | |
| font-size-adjust: $adjust-value | |
| // $Ampersand | |
| // -------------------------------------// | |
| ampersand($amp-font-family...) | |
| font-family: $amp-font-family | |
| ampersand-placeholder() | |
| ampersand($amp-fontface-name, $amp-font-family) | |
| // Call your ampersand on any element you wish from another stylesheet | |
| // using this Sass extends we've provided... | |
| // @extends %ampersand-placeholder | |
| // $Wordwrap | |
| // -------------------------------------// | |
| // Silent Sass Classes - A.K.A Placeholders | |
| // normal: Indicates that lines may only break at normal word break points. | |
| // break-word : Indicates that normally unbreakable words may be broken at | |
| // arbitrary points if there are no otherwise acceptable break points in the line. | |
| breakword() | |
| word-wrap: break-word | |
| normal-wrap() | |
| word-wrap: normal | |
| inherit-wrap() | |
| word-wrap: auto | |
| // $Dropcaps | |
| // -------------------------------------// | |
| /** | |
| * Dropcap Sass @include | |
| * Use the following Sass @include with any selector you feel necessary. | |
| * | |
| dropcap($float: left, $font-size: 4em, $font-family: inherit, $text-indent: 0, $margin: inherit, $padding: inherit, $color: inherit, $lineHeight: 1, $bg: transparent) | |
| * | |
| * Extends this object into your custom stylesheet. | |
| * | |
| */ | |
| // Include your '@include dropcap()' mixin and pass the following | |
| // arguments below. Feel free to pass in arguments we've provided. | |
| // At this time you cannot pass in font-family arguments but you're gonna | |
| // change that anyway so why not just make that separately in your declaration. | |
| dropcap($float=left, $font-size=4em, $font-family=inherit, $text-indent=0, $margin=inherit, $padding=inherit, $color=inherit, $lineHeight = 1, $bg = transparent) | |
| .dropcap:first-letter | |
| float: $float | |
| margin: $margin | |
| padding: $padding | |
| font-size: $font-size | |
| font-family: $font-family | |
| line-height: $lineHeight | |
| text-indent: $text-indent | |
| background: $bg | |
| color: $color | |
| // $Definition Lists | |
| // -------------------------------------// | |
| // lining | |
| // http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css | |
| // | |
| // dictionary-style | |
| // http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css | |
| definition-list-style($style) | |
| // lining style | |
| if $style == lining | |
| dt, | |
| dd | |
| display: inline | |
| margin: 0 | |
| dt, | |
| dd | |
| & + dt | |
| &:before | |
| content: "\A" | |
| white-space: pre | |
| dd | |
| & + dd | |
| &:before | |
| content: ", " | |
| &:before | |
| content: ": " | |
| margin-left: -0.2rem //removes extra space between the dt and the colon | |
| // dictionary-style | |
| if $style == dictionary-style | |
| dt | |
| display: inline | |
| counter-reset: definitions | |
| & + dt | |
| &:before | |
| content: ", " | |
| margin-left: -0.2rem // removes extra space between the dt and the comma | |
| dd | |
| display: block | |
| counter-increment: definitions | |
| &:before | |
| content: counter(definitions, decimal) ". " | |
| // ==========================================================================// | |
| // | |
| // $Typeplate Styles | |
| // | |
| // ==========================================================================// | |
| // $Globals | |
| // -------------------------------------// | |
| html | |
| base-type($font-properties[0], $font-properties[1], $font-properties[2], $font-properties[3]) | |
| body | |
| // Ala Trent Walton | |
| css-hyphens(auto) | |
| // normal: Indicates that lines may only break at normal word break points. | |
| // break-word : Indicates that normally unbreakable words may be broken at ... | |
| // arbitrary points if there are no otherwise acceptable break points in the line. | |
| breakword() | |
| color: $body-copy-color | |
| // $Headings | |
| // -------------------------------------// | |
| // styles for all headings, in the style of @csswizardry | |
| hN() | |
| // voodoo to enable ligatures and kerning | |
| text-rendering: optimizeLegibility | |
| // this fixes huge spaces when a heading wraps onto two lines | |
| line-height: 1 | |
| margin-top: 0 | |
| // make a multi-dimensional array, where | |
| // the first value is the name of the class | |
| // and the second value is the variable for the size | |
| $sizes = (tera $tera) (giga $giga) (mega $mega) (alpha $alpha) (beta $beta) (gamma $gamma) (delta $delta) (epsilon $epsilon) (zeta $zeta) | |
| // for each size in the scale, create a class | |
| for $size in $sizes | |
| .{$size[0]} | |
| modular-scale $size[1], $font-base, $type-scale-unit-value, $measure | |
| // associate h1-h6 tags with their appropriate greek heading | |
| h1 | |
| @extends .alpha | |
| hN() | |
| h2 | |
| @extends .beta | |
| hN() | |
| h3 | |
| @extends .gamma | |
| hN() | |
| h4 | |
| @extends .delta | |
| hN() | |
| h5 | |
| @extends .epsilon | |
| hN() | |
| h6 | |
| @extends .zeta | |
| hN() | |
| // $Parargraphs | |
| // -------------------------------------// | |
| p | |
| margin: 0 0 $indent-val | |
| & + p | |
| //siblings indentation | |
| text-indent: $indent-val | |
| margin-top: s("-%s", $indent-val) | |
| // $Hyphenation | |
| // -------------------------------------// | |
| // http://meyerweb.com/eric/thoughts/2012/12/17/where-to-avoid-css-hyphenation | |
| abbr, | |
| acronym, | |
| blockquote, | |
| code, | |
| dir, | |
| kbd, | |
| listing, | |
| plaintext, | |
| q, | |
| samp, | |
| tt, | |
| var, | |
| xmp | |
| css-hyphens(none) | |
| // $Codeblocks | |
| // -------------------------------------// | |
| white-space($wrap-space) | |
| if $wrap-space == 'pre-wrap' | |
| white-space: s('-moz-%s', $wrap-space) // Firefox 1.0-2.0 | |
| white-space: $wrap-space // current browsers | |
| else | |
| white-space: $wrap-space | |
| pre code | |
| normal-wrap() | |
| white-space(pre-wrap) | |
| pre | |
| white-space(pre) | |
| code | |
| white-space(pre) | |
| font-family: monospace | |
| // $Smallcaps | |
| // -------------------------------------// | |
| /** | |
| * Abbreviations Markup | |
| * | |
| <abbr title="hyper text markup language">HMTL</abbr> | |
| * | |
| * Extends this object into your markup. | |
| * | |
| */ | |
| abbr | |
| smallcaps(gray, 600) | |
| &:hover | |
| cursor: help | |
| // $Headings Color | |
| // -------------------------------------// | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 | |
| color: $heading-color | |
| // $Definition Lists | |
| // -------------------------------------// | |
| /** | |
| * Lining Definition Style Markup | |
| * | |
| <dl class="lining"> | |
| <dt><b></b></dt> | |
| <dd></dd> | |
| </dl> | |
| * | |
| * Extends this object into your markup. | |
| * | |
| */ | |
| .lining | |
| definition-list-style(lining) | |
| /** | |
| * Dictionary Definition Style Markup | |
| * | |
| <dl class="dictionary-style"> | |
| <dt><b></b></dt> | |
| <dd></dd> | |
| </dl> | |
| * | |
| * Extends this object into your markup. | |
| * | |
| */ | |
| .dictionary-style | |
| definition-list-style(dictionary-style) | |
| // $Stats Tabs | |
| // -------------------------------------// | |
| /** | |
| * Stats Tab Markup | |
| * | |
| <ul class="stats-tabs"> | |
| <li><a href="#">[value]<b>[name]</b></a></li> | |
| </ul> | |
| * | |
| * Extends this object into your markup. | |
| * | |
| */ | |
| .stats-tabs | |
| padding: 0 | |
| li | |
| display: inline-block | |
| margin: $stats-list-margin | |
| padding: $stats-list-padding | |
| border-right: $stats-border-style | |
| &:last-child | |
| margin: 0 | |
| padding: 0 | |
| border: none | |
| a | |
| display: inline-block | |
| font-size: $stats-font-size | |
| font-weight: bold | |
| b | |
| display: block | |
| margin: $stats-item-margin | |
| font-size: $stats-item-font-size | |
| font-weight: normal | |
| // $Blockquote Cites | |
| // -------------------------------------// | |
| /* | |
| * Blockquote Markup | |
| * | |
| <blockquote cite=""> | |
| <p>&Prime&Prime</p> | |
| <cite> | |
| <small><a href=""></a></small> | |
| </cite> | |
| </blockquote> | |
| * | |
| * Extends this object into your markup. | |
| */ | |
| cite-style($display = block, $text-align = right, $font-size = .875em) | |
| display: $display | |
| font-size: $font-size | |
| text-align: $text-align | |
| cite() | |
| cite-style() | |
| // $Pull Quotes | |
| // -------------------------------------// | |
| // http://24ways.org/2005/swooshy-curly-quotes-without-images | |
| // http://todomvc.com - Thanks sindresorhus! | |
| // https://github.com/typeplate/typeplate.github.com/issues/49 | |
| /** | |
| * Pull Quotes Markup | |
| * | |
| <aside class="pull-quote"> | |
| <blockquote> | |
| <p></p> | |
| </blockquote> | |
| </aside> | |
| * | |
| * Extends this object into your custom stylesheet. | |
| * | |
| */ | |
| pull-quotes($font-size, $opacity) | |
| position: relative | |
| padding: ems($font-size, $font-size) | |
| &:before, | |
| &:after | |
| height: ems($font-size, $font-size) | |
| opacity: $opacity | |
| position: absolute | |
| font-size: $font-size | |
| &:before | |
| content: '“' | |
| top: 0 | |
| left: 0 | |
| &:after | |
| content: '”' | |
| bottom: 0 | |
| right: 0 | |
| .pull-quote | |
| pull-quotes(4em, .15) | |
| // $Figures | |
| // -------------------------------------// | |
| /* | |
| * Figures Markup | |
| * | |
| * <figure> | |
| * <figcaption> | |
| * <strong>Fig. 4.2 | </strong>Type Anatomy, an excerpt from Mark Boulton's book<cite title="http://designingfortheweb.co.uk/book/part3/part3_chapter11.php">"Designing for the Web"</cite> | |
| * </figcaption> | |
| * </figure> | |
| * | |
| * Extends this object into your markup. | |
| * | |
| */ | |
| // $Footnotes | |
| // -------------------------------------// | |
| /* | |
| * Footnote Markup : Replace 'X' with your unique number for each footnote | |
| * | |
| * <article> | |
| * <p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p> | |
| * <footer> | |
| * <ol class="foot-notes"> | |
| * <li id="fn-itemX"><a href="#fn-returnX">↩</a></li> | |
| * </ol> | |
| * </footer> | |
| * </article> | |
| * | |
| * Extends this object into your markup. | |
| * | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment