Last active
December 26, 2015 05:39
-
-
Save DanCouper/7102651 to your computer and use it in GitHub Desktop.
Conversion of core Typeplate file to stylus, building in some of the items from the newest SCSS version. @todo icons - currently, Compass is used for the SCSS version. Needs looking at in detail to see if it can be replicated.
@todo replicate the base font family/sizing etc wizardry
This file contains hidden or 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 | |
| // | |
| // ==========================================================================// | |
| // $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 | |
| // $Variables $Color | |
| // -------------------------------------// | |
| $body-copy-color = #444 | |
| $heading-color = #222 | |
| // $Variables $Ampersand @font-face | |
| // -------------------------------------// | |
| $amp-fontface-name = Ampersand | |
| $amp-fontface-source = local('Georgia'), local('Garamond'), local('Palatino'), local('Book Antiqua') | |
| $amp-fontface-fallback = local('Georgia') | |
| // $Variables $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 | |
| // $Variables $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 | |
| // $Variables $TypeScale Unit | |
| // -------------------------------------// | |
| $type-scale-unit-value = rem | |
| // $Variables $Text Indentation Value | |
| // -------------------------------------// | |
| $indent-val = 1.5em | |
| // $Variables $Pull-Quotes | |
| // -------------------------------------// | |
| $pull-quote-fontsize = 4em | |
| $pull-quote-opacity = 0.5 | |
| $pull-quote-color = #dc976e | |
| // $Variables Citation | |
| // -------------------------------------// | |
| $cite-display = block | |
| $cite-text-align = right | |
| $cite-font-size = inherit | |
| // $Variables Small-Caps | |
| // -------------------------------------// | |
| $small-caps-color = gray | |
| $small-caps-weight = 600 | |
| // $Variables DropCap | |
| // -------------------------------------// | |
| $dropcap-float-position = left | |
| $dropcap-font-size = 4em | |
| $dropcap-font-family = inherit | |
| $dropcap-txt-indent = 0 | |
| $dropcap-margin = inherit | |
| $dropcap-padding = inherit | |
| $dropcap-color = inherit | |
| $dropcap-line-height = 1 | |
| $dropcap-bg = transparent | |
| // ==========================================================================// | |
| // | |
| // $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 | |
| // | |
| // ==========================================================================// | |
| // $Functions $Context Calculator | |
| // -------------------------------------// | |
| ems($target, $context) | |
| return ($target/$context){em} | |
| // $Functions $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 | |
| // $Functions $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 | |
| // | |
| // ==========================================================================// | |
| // $Mixin $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) | |
| // $Mixin $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 | |
| // $Mixin $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 | |
| // $Mixin $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 | |
| // $Mixin $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 | |
| // $Mixin $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 Stylus extends we've provided. For example: | |
| // | |
| // <h6 class="ampersand">Dewey Cheat 'em & Howe</h6> | |
| // | |
| // .ampersand | |
| // @extend ampersand-placeholder | |
| // $Mixin $Blockquote | |
| // -------------------------------------// | |
| // https://github.com/typeplate/typeplate.github.io/issues/95 | |
| // | |
| // Use our pre-defined markup and add a class | |
| // to your custom blockquote element. | |
| // For example: | |
| // | |
| // .blockquote | |
| // blockquote('-') | |
| // | |
| // "-" is your citation flourish. For example: | |
| // | |
| // I always say important things because I'm so smart | |
| // - Super Important Person | |
| // Citation Mixin for Custom Styling | |
| cite-style($display, $text-align, $font-size) | |
| display $display | |
| font-size $font-size | |
| text-align $text-align | |
| .cite | |
| cite-style($cite-display, $cite-text-align, $cite-font-size) | |
| blockquote($citation-flourish) | |
| p | |
| &:last-of-type | |
| margin-bottom s("-%sem", $line-height/2) | |
| + figcaption | |
| @extend .cite | |
| &:before | |
| content $citation-flourish | |
| // $Mixin $Pull-Quotes | |
| // -------------------------------------// | |
| pull-quotes($pull-quote-fontsize, $pull-quote-opacity, $pull-quote-color) | |
| position relative | |
| padding context-calc($pull-quote-fontsize, $pull-quote-fontsize, em) | |
| &:before, | |
| &:after | |
| height context-calc($pull-quote-fontsize, $pull-quote-fontsize, em) | |
| opacity $pull-quote-opacity | |
| position absolute | |
| font-size $pull-quote-fontsize | |
| color $pull-quote-color | |
| &:before | |
| content '“' | |
| top 0 | |
| left 0 | |
| &:after | |
| content '”' | |
| bottom 0 | |
| right 0 | |
| // $Mixin $Wordwrap | |
| // -------------------------------------// | |
| // Silent Stylus 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 | |
| // $Mixin $Dropcaps | |
| // -------------------------------------// | |
| /** | |
| * Dropcap Stylus include | |
| * Use the following Stylus 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 'dropcap()' mixin and pass the following | |
| // arguments below. Feel free to pass in arguments we've provided. | |
| // Make sure you add the class “drop-cap” to your markup in order to operate. | |
| dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg) | |
| &:first-letter | |
| float $dropcap-float-position | |
| margin $dropcap-margin | |
| padding $dropcap-padding | |
| font-size $dropcap-font-size | |
| font-family $dropcap-font-family | |
| line-height $dropcap-line-height | |
| text-indent $dropcap-txt-indent | |
| background $dropcap-bg | |
| color $dropcap-color | |
| // $Mixin $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 | |
| // $Mixin $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 | |
| // | |
| // ==========================================================================// | |
| // $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 | |
| // $Styles $Headings | |
| // -------------------------------------// | |
| // Extend included classes on any element of your | |
| // choosing for adjusting type based on the scale | |
| // provided. | |
| // For example: | |
| // <h6 class="giga">Awesome Headline</h6> | |
| // <p class="tera">a story about a dude</p> | |
| // 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 | |
| @extend .alpha | |
| hN() | |
| h2 | |
| @extend .beta | |
| hN() | |
| h3 | |
| @extend .gamma | |
| hN() | |
| h4 | |
| @extend .delta | |
| hN() | |
| h5 | |
| @extend .epsilon | |
| hN() | |
| h6 | |
| @extend .zeta | |
| hN() | |
| // $Styles $Paragraphs | |
| // -------------------------------------// | |
| p | |
| margin: 0 0 $indent-val | |
| & + p | |
| //siblings indentation | |
| text-indent: $indent-val | |
| margin-top: s("-%s", $indent-val) | |
| // $Styles $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) | |
| // $Styles $Codeblocks | |
| // -------------------------------------// | |
| pre code | |
| @extend .normal-wrap | |
| white-space(pre-wrap) | |
| pre | |
| white-space(pre) | |
| code | |
| white-space(pre) | |
| font-family: monospace | |
| // $Styles $Smallcaps | |
| // -------------------------------------// | |
| /** | |
| * Abbreviations Markup | |
| * | |
| <abbr title="hyper text markup language">HMTL</abbr> | |
| * | |
| * Extends this object into your markup. | |
| * | |
| */ | |
| abbr | |
| smallcaps($small-caps-color, $small-caps-weight) | |
| &[title]:hover | |
| cursor help | |
| // $Styles $Headings Color | |
| // -------------------------------------// | |
| h1, | |
| h2, | |
| h3, | |
| h4, | |
| h5, | |
| h6 | |
| color: $heading-color | |
| // $Styles $Dropcap | |
| // -------------------------------------// | |
| // Combats our sibling paragraphs syling and indentation | |
| // As not to ruin our beautiful drop caps. | |
| p + .drop-cap | |
| text-indent: 0 | |
| margin-top: 0 | |
| .drop-cap | |
| dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg) | |
| // $Styles $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) | |
| // $Styles $Blockquote-Markup | |
| // -------------------------------------// | |
| /** | |
| * Blockquote Markup | |
| * | |
| <figure> | |
| <blockquote cite=""> | |
| <p></p> | |
| </blockquote> | |
| <figcaption> | |
| <cite> | |
| <small><a href=""></a></small> | |
| </cite> | |
| </figcaption> | |
| </figure> | |
| * | |
| * Extend this object into your markup. | |
| * | |
| */ | |
| // $Styles $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-quote | |
| pull-quotes($pull-quote-fontsize, $pull-quote-opacity, $pull-quote-color) | |
| // $Styles $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. | |
| * | |
| */ | |
| // $Styles $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