kotovalexarian-likes-github
/
twbs--bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Releases Activity

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
This commit is contained in:
Mark Otto 2013-03-17 11:33:07 -07:00
parent 47f69c0d9e
commit 6012d8221b
5 changed files with 64 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
docs/assets/css/bootstrap.css vendored
View File

@ -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 {

54
less/mixins.less
View File

@ -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);
}
}
}

7
less/scaffolding.less
View File

@ -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;
}

2
less/type.less
View File

@ -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;
}

2
less/variables.less
View File

@ -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