Skip to content

Instantly share code, notes, and snippets.

@paolodina
Last active August 29, 2015 14:02
Show Gist options
  • Save paolodina/0cffc82ebe4283f91adf to your computer and use it in GitHub Desktop.
Save paolodina/0cffc82ebe4283f91adf to your computer and use it in GitHub Desktop.
Generated by SassMeister.com. Gist shared, don't delete.
<pre>
// Firefox 30.0 Linux
html {
font-size: 93.75%;
-webkit-text-size-adjust: 100%;
}
</pre>
// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----
@charset "UTF-8";
/**
* ==============================================================================
* Typesettings
* ==============================================================================
* A Sass toolkit that sets type in Ems based on modular scale, vertical rhythm,
* and responsive ratio based headlines. Oh, and pixel borders that maintain
* rhythm.
*
* Release Versions: https://github.com/ianrose/typesettings/releases
* Github: https://github.com/ianrose/typesettings
* License: The MIT License (MIT)
*
* Inspired by and used stuff from:
* https://github.com/typeplate/typeplate.github.io
* https://github.com/csswizardry/typecsset
*/
//==============================================================================
// Config Variables
//==============================================================================
// The config variables have default values that are just looking to be adjusted.
// Use this variables to customize your Typesettings. Or take the whole thing
// apart if you want :)
// Font families and default text color.
$font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
$font-serif: Georgia, 'Times New Roman', serif !default;
$font-mono: 'Lucida Console', Monaco, monospace !default;
$text-color: #000 !default;
// The vertical grid unit. Margin, padding, and line-height are set to multiples
// of this value. This is the value that determines the baseline for our vertical
// rhythm. The default value of 6px allows more fine tuned designs that still
// obey vertical rhythm.
$base-vertical-unit: 6px !default;
// The value that multiplies the $base-vertical-unit to get the $base-line-height.
// This gives type an ideal line-height.
$base-line-multi: 4 !default;
// Base font size in pixels.
$base-font-size: 15px !default;
// Modular scale ratio that is used to figure out all the different font sizes
$ms-ratio: 1.414 !default;
// [1] Paragraph setting that you can turn on or off the indent of the first line
// 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]
// You can optionally load type styles that use Typesettings.
$load-typesetted: true !default;
//==============================================================================
// Internal Variables
//==============================================================================
// It's Best not to adjust the internal variables directly.[Note]
// Converts the $base-font-size value to EMs
$base-em-font-size: ($base-font-size / 16px) * 1em !default;
// Generates modular scale values in Ems. [Note]If you need more size up and/or down
// then add more sizes.
// [1] One step down in the modular scale in EMs
// [2] Two steps down in the modular scale in EMs
// [3] Three steps down in the modular scale in EMs
// [4] One step up in the modular scale in EMs
// [5] Two steps up in the modular scale in EMs
// [6] Three steps up in the modular scale in EMs
// [7] Four steps up in the modular scale in EMs
$ms-down1: $base-em-font-size / $ms-ratio; // [1]
$ms-down2: $ms-down1 /$ms-ratio; // [2]
$ms-down3: $ms-down2 / $ms-ratio; // [3]
$ms-up1: $base-em-font-size * $ms-ratio; // [4]
$ms-up2: $ms-up1 * $ms-ratio; // [5]
$ms-up3: $ms-up2 * $ms-ratio; // [6]
$ms-up4: $ms-up3 * $ms-ratio; // [7]
// Creates a unitless line-height that is based on typographic ideals and
// maintains vertical rhythm.
$base-line-height: ($base-vertical-unit * $base-line-multi) / $base-font-size;
//==============================================================================
// Helper function(s)
//==============================================================================
// Returns a number without a unit. For example 16px becomes 16
@function stripUnits($number) {
@return $number / ($number * 0 + 1);
}
// Returns an EM value. For example 24px becomes 1.5em
@function emCalc($target, $context: $base-font-size) {
@return stripUnits(($target / $context)) + 0em;
}
// Returns an EM value that is a multiple of our defined base vertical unit. For
// example 3 becomes 1.125em
@function emRhythm($lines: $base-vertical-unit, $font-size: $base-em-font-size) {
@return (stripUnits($lines) * stripUnits($base-vertical-unit)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em;
}
// Returns a unitless number that is a multiple of our defined base vertical unit.
// For example 3 becomes 1.125
@function unitlessRhythm($lines: $base-vertical-unit, $font-size: $base-em-font-size) {
@return ($lines * stripUnits($base-vertical-unit)) / (stripUnits($font-size) * stripUnits($base-font-size));
}
//==============================================================================
// Mixin(s)
//==============================================================================
// Finally, the tools that you can use throughout your project to set
// all the wonderful type related stuffs.
// Sets the type in EMs and makes a vertical rhythm unitless line-height that is
// based on context.
@mixin setType($lines: $base-line-multi, $font-size: $base-em-font-size) {
font-size: $font-size;
line-height: unitlessRhythm($lines, $font-size);
}
// Creates a vertical rhythm unitless line-height that is based on context
@mixin setLeading($lines: $base-line-multi, $font-size: $base-em-font-size) {
line-height: unitlessRhythm($lines, $font-size);
}
// Creates a pixel width border top with padding that is a multiple of the base
// vertical grid unit. You will need to set border style and color rules.
@mixin rhythmBorderTop($border-width: 1px, $lines: $base-line-multi, $font-size: $base-em-font-size) {
border-top-width: $border-width;
padding-top: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em;
}
// Creates a pixel width border bottom with padding that is a multiple of the base
// vertical grid unit. You will need to set border style and color rules.
@mixin rhythmBorderBottom($border-width: 1px, $lines: $base-line-multi, $font-size: $base-em-font-size) {
border-bottom-width: $border-width;
padding-bottom: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em;
}
// Creates a pixel width border with padding that is a multiple of the base
// vertical grid unit. You will need to set border style and color rules.
@mixin rhythmBorder($border-width: 1px, $lines: $base-line-multi, $font-size: $base-em-font-size) {
border-width: $border-width;
padding: (($lines * stripUnits($base-vertical-unit)) - stripUnits($border-width)) / (stripUnits($font-size) * stripUnits($base-font-size)) + 0em;
}
@if $load-typesetted {
//==============================================================================
// 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);
}
}
@charset "UTF-8";
/**
* ==============================================================================
* Typesettings
* ==============================================================================
* A Sass toolkit that sets type in Ems based on modular scale, vertical rhythm,
* and responsive ratio based headlines. Oh, and pixel borders that maintain
* rhythm.
*
* Release Versions: https://github.com/ianrose/typesettings/releases
* Github: https://github.com/ianrose/typesettings
* License: The MIT License (MIT)
*
* Inspired by and used stuff from:
* https://github.com/typeplate/typeplate.github.io
* https://github.com/csswizardry/typecsset
*/
html {
font-size: 93.75%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", serif;
font-weight: 400;
line-height: 1.6;
color: black;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
text-transform: uppercase;
}
h1, .h1 {
margin-bottom: 0.85359em;
font-size: 1.87443em;
line-height: 1.28039;
}
@media (min-width: 43.75em) {
h1, .h1 {
margin-bottom: 0.60367em;
font-size: 2.65045em;
line-height: 1.20734;
}
}
@media (min-width: 56.25em) {
h1, .h1 {
margin-bottom: 0.42692em;
font-size: 3.74774em;
line-height: 1.06731;
}
}
h2, .h2 {
margin-bottom: 1.20698em;
font-size: 1.32562em;
line-height: 1.50872;
}
@media (min-width: 43.75em) {
h2, .h2 {
margin-bottom: 0.85359em;
font-size: 1.87443em;
line-height: 1.28039;
}
}
@media (min-width: 56.25em) {
h2, .h2 {
margin-bottom: 0.60367em;
font-size: 2.65045em;
line-height: 1.20734;
}
}
h3, .h3 {
margin-bottom: 1.20698em;
font-size: 1.32562em;
line-height: 1.50872;
}
@media (min-width: 56.25em) {
h3, .h3 {
margin-bottom: 0.85359em;
font-size: 1.87443em;
line-height: 1.28039;
}
}
h4, .h4 {
margin-bottom: 1.20698em;
font-size: 1.32562em;
line-height: 1.50872;
}
h5, .h5,
h6, .h6 {
margin-bottom: 1.70667em;
font-size: 0.9375em;
line-height: 1.70667;
}
p {
margin-top: 0;
margin-bottom: 1.70667em;
padding-top: 0;
padding-bottom: 0;
max-width: 40.96em;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto;
word-wrap: break-word;
}
@media (min-width: 43.75em) {
p {
text-align: justify;
}
}
p + p {
margin-top: -1.70667em;
text-indent: 1.70667em;
}
small,
.font-small {
font-size: 0.66301em;
line-height: 1.80992;
}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
blockquote {
margin-top: 1.70667em;
margin-bottom: 1.70667em;
margin-left: -2.13333em;
padding-top: 0;
padding-bottom: 0;
padding-left: 1.70667em;
border-left: 6px solid gray;
font-family: "Lucida Console", Monaco, monospace;
font-weight: bold;
}
blockquote footer cite:before {
content: " – ";
}
pre,
code {
font-family: "Lucida Console", Monaco, monospace;
}
time,
.time {
text-transform: uppercase;
}
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1.70667em;
margin-left: 1.70667em;
padding-top: 0;
padding-bottom: 0;
}
ul ul,
ol ol,
dl dl {
margin-left: 0;
}
ul {
list-style: disc;
}
ol {
list-style: decimal;
}
abbr {
font-variant: small-caps;
font-weight: 600;
text-transform: lowercase;
}
abbr[title]:hover {
cursor: help;
}
hr {
margin-top: 1.70667em;
margin-bottom: 0;
border: none;
border-top-color: black;
border-top-style: solid;
border-top-width: 1px;
padding-top: 1.63556em;
}
<pre>
// Firefox 30.0 Linux
html {
font-size: 93.75%;
-webkit-text-size-adjust: 100%;
}
</pre>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment