From 6760cfac4ff5239155510c4fbfef4eada8a36cfc Mon Sep 17 00:00:00 2001 From: Ian Rose Date: Thu, 10 Apr 2014 21:56:46 -0400 Subject: [PATCH 1/4] moved type styles to a separate partial that can be optionally loaded --- _typesetted.scss | 213 +++++++++++++++++++++++++++++++++++++++++++ _typesettings.scss | 223 ++------------------------------------------- 2 files changed, 220 insertions(+), 216 deletions(-) create mode 100644 _typesetted.scss diff --git a/_typesetted.scss b/_typesetted.scss new file mode 100644 index 0000000..87d1451 --- /dev/null +++ b/_typesetted.scss @@ -0,0 +1,213 @@ +//============================================================================== +// Default Type Styles +//============================================================================== + +// [1] Sets the font-size of the project as a percentage. Making it easy to scale +// up/down the whole project for specific media queries +// [2] Stops iOS from scaling up text. +html { + font-size: ($base-font-size / 16px) * 100%; // [1] + -webkit-text-size-adjust: 100%; // [2] +} + +body { + margin: 0; + padding: 0; + font-family: $font-serif; + font-weight: 400; + line-height: $base-line-height; + color: $text-color; +} + +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + margin-top: 0; + padding-top: 0; + padding-bottom: 0; + font-family: $font-sans; + font-weight: bold; + text-transform: uppercase; +} + +// [1] Applies a margin bottom that is a multiple of the vertical grid in EMs. +// The first argument is the font size context and the second is multiple of the +// vertical grid unit. +// [2] Sets the type to one of the modular scale values and the second argument +// sets a unitless line-height as a multiple of the vertical grid. +// [3] A generic media query for tablet size ranges. +// [4] Applies a margin bottom that is the same vertical grid value as the mobile +// first rule. +// [5] Sets the type to one of the modular scale values and the second argument +// sets a unitless line-height as a multiple of the vertical grid. +h1, .h1 { + margin-bottom: emRhythm(4, $ms-up2); // [1] + @include setType(6, $ms-up2); // [2] + + @media (min-width: 43.75em) { + // [3] + margin-bottom: emRhythm(4, $ms-up3); // [4] + @include setType(8, $ms-up3); // [5] + } + + @media (min-width: 56.25em) { + margin-bottom: emRhythm(4, $ms-up4); + @include setType(10, $ms-up4); + } +} + +h2, .h2 { + margin-bottom: emRhythm(4, $ms-up1); + @include setType(5, $ms-up1); + + @media (min-width: 43.75em) { + margin-bottom: emRhythm(4, $ms-up2); + @include setType(6, $ms-up2) + } + + @media (min-width: 56.25em) { + margin-bottom: emRhythm(4, $ms-up3); + @include setType(8, $ms-up3); + } +} + +h3, .h3 { + margin-bottom: emRhythm(4, $ms-up1); + @include setType(5, $ms-up1); + + @media (min-width: 56.25em) { + margin-bottom: emRhythm(4, $ms-up2); + @include setType(6, $ms-up2); + } +} + +h4, .h4 { + margin-bottom: emRhythm(4, $ms-up1); + @include setType(5, $ms-up1); +} + +h5, .h5, +h6, .h6 { + margin-bottom: emRhythm(4); + @include setType(4); +} + +p { + margin-top: 0; + margin-bottom: emRhythm(4); + padding-top: 0; + padding-bottom: 0; + max-width: emRhythm(96); + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + -o-hyphens: auto; + hyphens: auto; + word-wrap: break-word; + + @media (min-width: 43.75em) { + @if $paragraph-justify { + text-align: justify; + } + } +} + +@if $paragraph-indent { + p + p { + margin-top: emRhythm(-4); + text-indent: emRhythm(4); + } +} + +small, +.font-small { + @include setType(3, $ms-down1); +} + +em { + font-style: italic; +} + +strong { + font-weight: bold; +} + +blockquote { + margin-top: emRhythm(4); + margin-bottom: emRhythm(4); + margin-left: emRhythm(-5); + padding-top: 0; + padding-bottom: 0; + padding-left: emRhythm(4); + border-left: $base-vertical-unit solid lighten(#000, 50%); + font-family: $font-mono; + font-weight: bold; + + footer { + cite { + &:before { + content: " – "; + } + } + } +} + +pre, +code { + font-family: $font-mono; +} + +time, +.time { + text-transform: uppercase; +} + +ol, +ul, +dl { + margin-top: 0; + margin-bottom: emRhythm(4); + margin-left: emRhythm(4); + padding-top: 0; + padding-bottom: 0; +} + +ul ul, +ol ol, +dl dl { + margin-left: 0; +} + +ul { + list-style: disc; +} + +ol { + list-style: decimal; +} + +// [1] https://developer.mozilla.org/en-US/docs/CSS/font-variant +abbr { + font-variant: small-caps; // [1] + font-weight: 600; + text-transform: lowercase; +} + +// Cursor changed to a question mark when it has a title +abbr[title]:hover { + cursor: help; +} + +// Creates horizontal rules that obey the baseline. +// [1] Zero outs the user agent border +hr { + margin-top: emRhythm(4); + margin-bottom: 0; + border: none; // [1] + border-top-color: $text-color; + border-top-style: solid; + @include rhythmBorderTop(1px, 4); +} \ No newline at end of file diff --git a/_typesettings.scss b/_typesettings.scss index 0e61bc6..7afa6f1 100644 --- a/_typesettings.scss +++ b/_typesettings.scss @@ -50,10 +50,11 @@ $ms-ratio: 1.414 !default; // of a new paragraph. // [2] Paragraph setting that you can turn on or off to have your paragraphs ragged // right or justified. -$paragraph-indent: true !default; -// [1] -$paragraph-justify: true !default; -// [2] +$paragraph-indent: true !default; // [1] +$paragraph-justify: true !default; // [2] + +// You can optionally load type styles that use Typesettings. +$load-typesetted: true !default; //============================================================================== // Internal Variables @@ -149,216 +150,6 @@ $base-line-height: ($base-vertical-unit * $base-line-multi) / $base-font-size; padding: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em; } -//============================================================================== -// Default Type Styles -//============================================================================== - -// [1] Sets the font-size of the project as a percentage. Making it easy to scale -// up/down the whole project for specific media queries -// [2] Stops iOS from scaling up text. -html { - font-size: ($base-font-size / 16px) * 100%; // [1] - -webkit-text-size-adjust: 100%; // [2] -} - -body { - margin: 0; - padding: 0; - font-family: $font-serif; - font-weight: 400; - line-height: $base-line-height; - color: $text-color; -} - -h1, .h1, -h2, .h2, -h3, .h3, -h4, .h4, -h5, .h5, -h6, .h6 { - margin-top: 0; - padding-top: 0; - padding-bottom: 0; - font-family: $font-sans; - font-weight: bold; - text-transform: uppercase; -} - -// [1] Applies a margin bottom that is a multiple of the vertical grid in EMs. -// The first argument is the font size context and the second is multiple of the -// vertical grid unit. -// [2] Sets the type to one of the modular scale values and the second argument -// sets a unitless line-height as a multiple of the vertical grid. -// [3] A generic media query for tablet size ranges. -// [4] Applies a margin bottom that is the same vertical grid value as the mobile -// first rule. -// [5] Sets the type to one of the modular scale values and the second argument -// sets a unitless line-height as a multiple of the vertical grid. -h1, .h1 { - margin-bottom: emRhythm(4, $ms-up2); // [1] - @include setType(6, $ms-up2); // [2] - - @media (min-width: 43.75em) { - // [3] - margin-bottom: emRhythm(4, $ms-up3); // [4] - @include setType(8, $ms-up3); // [5] - } - - @media (min-width: 56.25em) { - margin-bottom: emRhythm(4, $ms-up4); - @include setType(10, $ms-up4); - } -} - -h2, .h2 { - margin-bottom: emRhythm(4, $ms-up1); - @include setType(5, $ms-up1); - - @media (min-width: 43.75em) { - margin-bottom: emRhythm(4, $ms-up2); - @include setType(6, $ms-up2) - } - - @media (min-width: 56.25em) { - margin-bottom: emRhythm(4, $ms-up3); - @include setType(8, $ms-up3); - } -} - -h3, .h3 { - margin-bottom: emRhythm(4, $ms-up1); - @include setType(5, $ms-up1); - - @media (min-width: 56.25em) { - margin-bottom: emRhythm(4, $ms-up2); - @include setType(6, $ms-up2); - } -} - -h4, .h4 { - margin-bottom: emRhythm(4, $ms-up1); - @include setType(5, $ms-up1); -} - -h5, .h5, -h6, .h6 { - margin-bottom: emRhythm(4); - @include setType(4); -} - -p { - margin-top: 0; - margin-bottom: emRhythm(4); - padding-top: 0; - padding-bottom: 0; - max-width: emRhythm(96); - -webkit-hyphens: auto; - -moz-hyphens: auto; - -ms-hyphens: auto; - -o-hyphens: auto; - hyphens: auto; - word-wrap: break-word; - - @media (min-width: 43.75em) { - @if $paragraph-justify { - text-align: justify; - } - } -} - -@if $paragraph-indent { - p + p { - margin-top: emRhythm(-4); - text-indent: emRhythm(4); - } -} - -small, -.font-small { - @include setType(3, $ms-down1); -} - -em { - font-style: italic; -} - -strong { - font-weight: bold; -} - -blockquote { - margin-top: emRhythm(4); - margin-bottom: emRhythm(4); - margin-left: emRhythm(-5); - padding-top: 0; - padding-bottom: 0; - padding-left: emRhythm(4); - border-left: $base-vertical-unit solid lighten(#000, 50%); - font-family: $font-mono; - font-weight: bold; - - footer { - cite { - &:before { - content: " – "; - } - } - } -} - -pre, -code { - font-family: $font-mono; -} - -time, -.time { - text-transform: uppercase; +@if $load-typesetted { + @import "typesetted"; } - -ol, -ul, -dl { - margin-top: 0; - margin-bottom: emRhythm(4); - margin-left: emRhythm(4); - padding-top: 0; - padding-bottom: 0; -} - -ul ul, -ol ol, -dl dl { - margin-left: 0; -} - -ul { - list-style: disc; -} - -ol { - list-style: decimal; -} - -// [1] https://developer.mozilla.org/en-US/docs/CSS/font-variant -abbr { - font-variant: small-caps; // [1] - font-weight: 600; - text-transform: lowercase; -} - -// Cursor changed to a question mark when it has a title -abbr[title]:hover { - cursor: help; -} - -// Creates horizontal rules that obey the baseline. -// [1] Zero outs the user agent border -hr { - margin-top: emRhythm(4); - margin-bottom: 0; - border: none; // [1] - border-top-color: $text-color; - border-top-style: solid; - @include rhythmBorderTop(1px, 4); -} \ No newline at end of file From 6a2aaab51957eb86373cd0545d876c66b0eac30e Mon Sep 17 00:00:00 2001 From: Ian Rose Date: Thu, 17 Apr 2014 18:58:36 -0400 Subject: [PATCH 2/4] readme update to include _typesetted.scss --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index daf0161..f1566ea 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Set your type in Ems with modular scale, vertical rhythm, and responsive ratio b * It comes with a default 6px baseline to maintain rhythm on all block elements * It relies more on using Sass functions combined with vanilla CSS rules rather than mixins to style * It uses modular scale values to set font-size - * It provides settings for adjusting headlines based on screen width + * It has optional default type rules, `_typesetted.scss`, that includes settings for adjusting headlines based screen width ## How to setup @@ -36,6 +36,7 @@ To start using Typesettings `@import` the `_typesettings.scss` partial into your $ms-ratio: 1.414; $paragraph-indent: true; $paragraph-justify: true; + $load-typesetted: true; @import "path/typesettings"; // Here is the _typesettings.scss partial From e072b475d55fba97a6449c0b9a4d7d3308ccda4f Mon Sep 17 00:00:00 2001 From: Ian Rose Date: Thu, 17 Apr 2014 18:59:07 -0400 Subject: [PATCH 3/4] readme grammar --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f1566ea..550b990 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Set your type in Ems with modular scale, vertical rhythm, and responsive ratio b * It comes with a default 6px baseline to maintain rhythm on all block elements * It relies more on using Sass functions combined with vanilla CSS rules rather than mixins to style * It uses modular scale values to set font-size - * It has optional default type rules, `_typesetted.scss`, that includes settings for adjusting headlines based screen width + * It has optional default type rules, `_typesetted.scss`, that includes settings for adjusting headlines based on screen width ## How to setup From 6a743debe9c2050fe7e2d9368a357cddbf5344cf Mon Sep 17 00:00:00 2001 From: Ian Rose Date: Thu, 17 Apr 2014 19:08:09 -0400 Subject: [PATCH 4/4] version bump --- bower.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bower.json b/bower.json index 6ec782b..45232bf 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "typesettings", - "version": "1.2.1", + "version": "1.3.0", "homepage": "https://github.com/ianrose/typesettings", "authors": [ "Ian Rose"