From 6012d8221b8e4f94c0cf842790ce70d868bb341a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 17 Mar 2013 11:33:07 -0700 Subject: [PATCH] Exploring rems as font-size unit * Added a new mixin to calculate rems and pixels for IE fallback * Updated the body, p, and .lead elements to use the new .font-size() mixin * New mixin has default value of 14px or 1.4rem * Still needs exploration, and change this means lots of work rejiggering margins and line-heights * Related, started to reorganize the mixins a bit to call out mixins that are used by the framework and not utilities or snippets --- docs/assets/css/bootstrap.css | 61 +++++++++++++++++------------------ less/mixins.less | 54 ++++++++++++++++++------------- less/scaffolding.less | 7 +--- less/type.less | 2 +- less/variables.less | 2 +- 5 files changed, 64 insertions(+), 62 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index cffcb1bab9..e902cdaf7e 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -288,11 +288,6 @@ html { } body { - margin: 0; - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - font-size: 14px; - font-size: 1.4rem; - line-height: 1.5; color: #333333; background-color: #ffffff; } @@ -304,6 +299,7 @@ select, textarea { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; + font-size: 1.4rem; line-height: 20px; } @@ -346,6 +342,7 @@ p { .lead { margin-bottom: 20px; font-size: 21px; + font-size: 2.1rem; font-weight: 200; line-height: 1.25; } @@ -470,58 +467,58 @@ h6 { h1, .h1 { - font-size: 38.5px; + font-size: 38.5; font-size: 4rem; } h2, .h2 { - font-size: 31.5px; + font-size: 31.5; font-size: 3rem; } h3, .h3 { - font-size: 24.5px; + font-size: 24.5; font-size: 2.5rem; } h4, .h4 { - font-size: 17.5px; + font-size: 17.5; font-size: 2rem; } h5, .h5 { - font-size: 14px; + font-size: 14; font-size: 1.6rem; } h6, .h6 { - font-size: 11.9px; + font-size: 11.9; font-size: 1.2rem; } h1 small, .h1 small { - font-size: 24.5px; + font-size: 24.5; } h2 small, .h2 small { - font-size: 17.5px; + font-size: 17.5; } h3 small, .h3 small { - font-size: 14px; + font-size: 14; } h4 small, .h4 small { - font-size: 14px; + font-size: 14; } .page-header { @@ -627,7 +624,7 @@ blockquote { blockquote p { margin-bottom: 0; - font-size: 17.5px; + font-size: 17.5; font-weight: 300; line-height: 1.25; } @@ -681,7 +678,7 @@ code, pre { padding: 0 3px 2px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; - font-size: 12px; + font-size: 12; color: #333333; border-radius: 4px; } @@ -698,7 +695,7 @@ pre { display: block; padding: 9.5px; margin: 0 0 10px; - font-size: 13px; + font-size: 13; line-height: 20px; word-break: break-all; word-wrap: break-word; @@ -1118,7 +1115,7 @@ legend { width: 100%; padding: 0; margin-bottom: 20px; - font-size: 21px; + font-size: 21; line-height: 40px; color: #333333; border: 0; @@ -1150,7 +1147,7 @@ input[type="color"] { display: inline-block; min-height: 34px; padding: 6px 9px; - font-size: 14px; + font-size: 14; line-height: 20px; color: #555555; vertical-align: middle; @@ -1326,7 +1323,7 @@ input[type="search"].input-large, input[type="tel"].input-large, input[type="color"].input-large { padding: 11px 14px; - font-size: 17.5px; + font-size: 17.5; border-radius: 6px; } @@ -1348,7 +1345,7 @@ input[type="tel"].input-small, input[type="color"].input-small { min-height: 26px; padding: 2px 10px; - font-size: 11.9px; + font-size: 11.9; border-radius: 3px; } @@ -1535,7 +1532,7 @@ select:focus:invalid:focus { .input-group-addon { padding: 6px 8px; - font-size: 14px; + font-size: 14; font-weight: normal; line-height: 20px; text-align: center; @@ -1549,12 +1546,12 @@ select:focus:invalid:focus { .input-group-addon.input-small { padding: 2px 10px; - font-size: 11.9px; + font-size: 11.9; } .input-group-addon.input-large { padding: 11px 14px; - font-size: 17.5px; + font-size: 17.5; } .input-group input:first-child, @@ -1690,7 +1687,7 @@ select:focus:invalid:focus { display: inline-block; padding: 6px 12px; margin-bottom: 0; - font-size: 14px; + font-size: 14; font-weight: 500; line-height: 20px; text-align: center; @@ -1734,19 +1731,19 @@ fieldset[disabled] .btn { .btn-large { padding: 11px 14px; - font-size: 17.5px; + font-size: 17.5; border-radius: 6px; } .btn-small { padding: 2px 10px; - font-size: 11.9px; + font-size: 11.9; border-radius: 3px; } .btn-mini { padding: 0 6px; - font-size: 10.5px; + font-size: 10.5; border-radius: 3px; } @@ -3788,7 +3785,7 @@ button.close { .pagination-large > li > a, .pagination-large > li > span { padding: 11px 14px; - font-size: 17.5px; + font-size: 17.5; } .pagination-large > li:first-child > a, @@ -3822,13 +3819,13 @@ button.close { .pagination-small > li > a, .pagination-small > li > span { padding: 2px 10px; - font-size: 11.9px; + font-size: 11.9; } .pagination-mini > li > a, .pagination-mini > li > span { padding: 0 6px; - font-size: 10.5px; + font-size: 10.5; } .pager { diff --git a/less/mixins.less b/less/mixins.less index a5c02d5fd7..3a1663ab40 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -114,28 +114,6 @@ } -// FORMS -// -------------------------------------------------- - -.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) { - // Color the label text - .control-label { - color: @text-color; - } - // Set the border and box shadow on specific inputs to match - .input-with-feedback { - padding-right: 32px; // to account for the feedback icon - border-color: @border-color; - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work - &:focus { - border-color: darken(@border-color, 10%); - @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); - .box-shadow(@shadow); - } - } -} - - // CSS3 PROPERTIES // -------------------------------------------------- @@ -553,3 +531,35 @@ .pushX(@grid-columns); .pullX(@grid-columns); } + + + +// Framework mixins +// -------------------------------------------------- + +// Generate rem font-sizes with pixel fallbacks +// By default uses `@font-size-base` with an initial value of 14 (1.4rem or 14px) +.font-size(@font-size: @font-size-base) { + @rem-size: (@font-size / 10); + font-size: ~"@{font-size}px"; + font-size: ~"@{rem-size}rem"; +} + +// Generate form validation states +.formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) { + // Color the label text + .control-label { + color: @text-color; + } + // Set the border and box shadow on specific inputs to match + .input-with-feedback { + padding-right: 32px; // to account for the feedback icon + border-color: @border-color; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work + &:focus { + border-color: darken(@border-color, 10%); + @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%); + .box-shadow(@shadow); + } + } +} diff --git a/less/scaffolding.less b/less/scaffolding.less index 9844a95f2d..2b82d1e90c 100644 --- a/less/scaffolding.less +++ b/less/scaffolding.less @@ -30,12 +30,7 @@ html { } body { - margin: 0; color: @text-color; - font-family: @font-family-base; - font-size: 14px; - font-size: 1.4rem; - line-height: 1.5; background-color: @body-background; } @@ -46,7 +41,7 @@ button, select, textarea { font-family: @font-family-base; - font-size: @font-size-base; + .font-size(); line-height: @line-height-base; } diff --git a/less/type.less b/less/type.less index 03566ebefa..55aea4d8a6 100644 --- a/less/type.less +++ b/less/type.less @@ -11,7 +11,7 @@ p { } .lead { margin-bottom: @line-height-base; - font-size: (@font-size-base * 1.5); + .font-size((@font-size-base * 1.5)); font-weight: 200; line-height: 1.25; } diff --git a/less/variables.less b/less/variables.less index bb73e3dce4..45495a9e1a 100644 --- a/less/variables.less +++ b/less/variables.less @@ -45,7 +45,7 @@ @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; @font-family-base: @font-family-sans-serif; -@font-size-base: 14px; +@font-size-base: 14; @font-size-large: (@font-size-base * 1.25); // ~18px @font-size-small: (@font-size-base * 0.85); // ~12px @font-size-mini: (@font-size-base * 0.75); // ~11px