Skip to content

Instantly share code, notes, and snippets.

@neojp
Created June 23, 2014 04:56
Show Gist options
  • Save neojp/7f6f8e97ba7f0cbf3bd8 to your computer and use it in GitHub Desktop.
Save neojp/7f6f8e97ba7f0cbf3bd8 to your computer and use it in GitHub Desktop.
Foundation 5. Reestablish font inheritance using the SCSS $font-size variables
// Convert units
// Eg.
// font-size: convert-unit(16rem, em);
// >> font-size: 16em;
//
// font-size: convert-unit(16em, rem);
// >> font-size: 16rem;
//
// font-size: convert-unit(16em, px);
// >> font-size: 16rpx;
@function convert-unit($val, $unit) {
@return strip-units($val) + $unit;
}
// Bring back font-size inheritance for Foundation 5
// Add this class to the content container and change the font-size accordingly
// Eg.
// HTML markup
// <article class="MainContent u-textFormat">
// Font size with REM assuming html has a default font size of 16px
// .MainContent { font-size: 1.25rem; }
// or font size with pixels
// .MainContent { font-size: 20px; }
// Then all <p> tags would have a font-size of 20px;
.u-textFormat {
font-size: 1rem;
h1 {
font-size: convert-unit($h1-font-size, em);
}
h2 {
font-size: convert-unit($h2-font-size, em);
}
h3 {
font-size: convert-unit($h3-font-size, em);
}
h4 {
font-size: convert-unit($h4-font-size, em);
}
h5 {
font-size: convert-unit($h5-font-size, em);
}
h6 {
font-size: convert-unit($h6-font-size, em);
}
p {
font-size: convert-unit($paragraph-font-size, em);
}
ul,
ol,
dl {
font-size: convert-unit($list-font-size, em);
}
blockquote cite {
font-size: convert-unit($blockquote-cite-font-size, em);
}
table caption {
font-size: convert-unit($table-caption-font-size, em);
}
table thead tr th,
table thead tr td {
font-size: convert-unit($table-head-font-size, em);
}
table tfoot tr th,
table tfoot tr td {
font-size: convert-unit($table-foot-font-size, em);
}
table tr th,
table tr td {
font-size: convert-unit($table-row-font-size, em);
}
}
.u-textFormat {
font-size: 1rem;
}
.u-textFormat h1 {
font-size: 2.75em;
}
.u-textFormat h2 {
font-size: 2.3125em;
}
.u-textFormat h3 {
font-size: 1.6875em;
}
.u-textFormat h4 {
font-size: 1.4375em;
}
.u-textFormat h5 {
font-size: 1.125em;
}
.u-textFormat h6 {
font-size: 1em;
}
.u-textFormat p {
font-size: 1em;
}
.u-textFormat ul,
.u-textFormat ol,
.u-textFormat dl {
font-size: 1em;
}
.u-textFormat blockquote cite {
font-size: 0.8125em;
}
.u-textFormat table caption {
font-size: 1em;
}
.u-textFormat table thead tr th,
.u-textFormat table thead tr td {
font-size: 0.875em;
}
.u-textFormat table tfoot tr th,
.u-textFormat table tfoot tr td {
font-size: 0.875em;
}
.u-textFormat table tr th,
.u-textFormat table tr td {
font-size: 0.875em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment