dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

IE font-size fixing

Browse source
This commit is contained in:
Raphael Goetter 2014-05-19 10:46:39 +02:00
parent 9acce25176
commit dd856d6755
12 changed files with 1088 additions and 1534 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

133
css/01-base.css
View file

@ -1,5 +1,5 @@
/*! /*!
* www.KNACSS.com V3.0.2 (2014-05-07) @author: Raphael Goetter, Alsacreations * www.KNACSS.com V3.0.3 (2014-05-19) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */
@ -16,7 +16,6 @@
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
/* soft reset */ /* soft reset */
html, html,
@ -24,55 +23,50 @@ body {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
ul, ul,
ol { ol {
padding-left: 2em; padding-left: 2em;
} }
ul.unstyled { ul.unstyled {
list-style: none; list-style: none;
} }
img { img {
height: auto; height: auto;
vertical-align: middle; vertical-align: middle;
border: 0; border: 0;
} }
audio, audio,
canvas, canvas,
video { video {
display: inline-block; display: inline-block;
} }
svg:not(:root) { svg:not(:root) {
overflow: hidden; overflow: hidden;
} }
/* ----------------------------- */ /* ----------------------------- */
/* == typography */ /* == typography */
/* ----------------------------- */ /* ----------------------------- */
/* base font-size corresponds to "10px" and is adapted to rem unit */
html { html {
/* set base font-size to equiv "10px", which is adapted to rem unit */
font-size: 62.5%; font-size: 62.5%;
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
/* thanks to @guardian, @victorbritopro and @eQRoeil */
font-size: calc(1em * 0.625);
/* disallow text zooming on orientation change (non standard property) */
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
text-size-adjust: 100%;
} }
body { body {
/* set body font-size in em (1.4em equiv "14px") */
font-size: 1.4em;
background-color: #ffffff; background-color: #ffffff;
color: #000000; color: #000000;
font-family: Helvetica, Arial, sans-serif; font-family: Helvetica, Arial, sans-serif;
font-size: 1.4em;
line-height: 1.5; line-height: 1.5;
} }
/* font-sizing for content */ /* font-sizing for content */
p, p,
@ -93,70 +87,57 @@ figure {
margin-bottom: 0; margin-bottom: 0;
line-height: 1.5; line-height: 1.5;
} }
h1, h1,
.h1-like { .h1-like {
font-size: 3.2rem; font-size: 3.2rem;
} }
h2, h2,
.h2-like { .h2-like {
font-size: 2.8rem; font-size: 2.8rem;
} }
h3, h3,
.h3-like { .h3-like {
font-size: 2.4rem; font-size: 2.4rem;
} }
h4, h4,
.h4-like { .h4-like {
font-size: 2rem; font-size: 2rem;
} }
h5, h5,
.h5-like { .h5-like {
font-size: 1.8rem; font-size: 1.8rem;
} }
h6, h6,
.h6-like { .h6-like {
font-size: 1.6rem; font-size: 1.6rem;
} }
/* alternate font-sizing */ /* alternate font-sizing */
.smaller { .smaller {
font-size: 0.71em; font-size: 0.71em;
} }
.small { .small {
font-size: 0.86em; font-size: 0.86em;
} }
.big { .big {
font-size: 1.14em; font-size: 1.14em;
} }
.bigger { .bigger {
font-size: 1.29em; font-size: 1.29em;
} }
.biggest { .biggest {
font-size: 1.43em; font-size: 1.43em;
} }
code, code,
pre, pre,
samp, samp,
kbd { kbd {
white-space: pre-line;
/* IE fix */ /* IE fix */
white-space: pre-line;
white-space: pre-wrap; white-space: pre-wrap;
font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace; font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace;
line-height: normal; line-height: normal;
} }
em, em,
.em, .em,
address, address,
@ -166,26 +147,21 @@ i,
var { var {
font-style: italic; font-style: italic;
} }
.no-em { .no-em {
font-style: normal; font-style: normal;
} }
strong, strong,
.strong { .strong {
font-weight: bold; font-weight: bold;
} }
.no-strong { .no-strong {
font-weight: normal; font-weight: normal;
} }
small, small,
sub, sub,
sup { sup {
font-size: smaller; font-size: smaller;
} }
/* ----------------------------- */ /* ----------------------------- */
/* == hiding content */ /* == hiding content */
@ -203,23 +179,19 @@ sup {
overflow: hidden !important; overflow: hidden !important;
clip: rect(1px, 1px, 1px, 1px) !important; clip: rect(1px, 1px, 1px, 1px) !important;
} }
body > script { body > script {
display: none !important; display: none !important;
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.no-small-screen { .no-small-screen {
display: none; display: none;
} }
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
.no-large-screen { .no-large-screen {
display: none; display: none;
} }
} }
/* ----------------------------- */ /* ----------------------------- */
/* == browsers consistency */ /* == browsers consistency */
@ -243,7 +215,6 @@ h5:first-child,
h6:first-child { h6:first-child {
margin-top: 0; margin-top: 0;
} }
/* avoid margins on nested elements */ /* avoid margins on nested elements */
li p, li p,
@ -253,7 +224,6 @@ li ol {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
} }
/* max values */ /* max values */
img, img,
@ -267,13 +237,11 @@ input,
video { video {
max-width: 100%; max-width: 100%;
} }
/* margin-bottom on tables */ /* margin-bottom on tables */
table { table {
margin-bottom: 2em; margin-bottom: 2em;
} }
/* ----------------------------- */ /* ----------------------------- */
/* ==layout and modules */ /* ==layout and modules */
@ -287,7 +255,6 @@ table {
.mod { .mod {
overflow: hidden; overflow: hidden;
} }
/* blocks that needs to be placed under floats */ /* blocks that needs to be placed under floats */
.clear, .clear,
@ -295,7 +262,6 @@ table {
.row { .row {
clear: both; clear: both;
} }
/* blocks that must contain floats */ /* blocks that must contain floats */
.clearfix:after, .clearfix:after,
@ -304,7 +270,6 @@ table {
display: table; display: table;
clear: both; clear: both;
} }
/* table layout */ /* table layout */
.row { .row {
@ -312,20 +277,17 @@ table {
table-layout: fixed; table-layout: fixed;
width: 100%; width: 100%;
} }
.row > *, .row > *,
.col { .col {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: top;
} }
/* inline-block */ /* inline-block */
.inbl { .inbl {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
/* alignments (blocks and inline) */ /* alignments (blocks and inline) */
/* ------------------------------ */ /* ------------------------------ */
@ -336,320 +298,243 @@ table {
.start { .start {
float: left; float: left;
} }
img.left, img.left,
img.start { img.start {
margin-right: 1em; margin-right: 1em;
} }
/* right (or ending) elements */ /* right (or ending) elements */
.right, .right,
.end { .end {
float: right; float: right;
} }
img.right, img.right,
img.end { img.end {
margin-left: 1em; margin-left: 1em;
} }
img.left, img.left,
img.right, img.right,
img.start, img.start,
img.end { img.end {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.center { .center {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.txtleft { .txtleft {
text-align: left; text-align: left;
} }
.txtright { .txtright {
text-align: right; text-align: right;
} }
.txtcenter { .txtcenter {
text-align: center; text-align: center;
} }
.w10 { .w10 {
width: 10%; width: 10%;
} }
.w20 { .w20 {
width: 20%; width: 20%;
} }
.w25 { .w25 {
width: 25%; width: 25%;
} }
.w30 { .w30 {
width: 30%; width: 30%;
} }
.w33 { .w33 {
width: 33.3333%; width: 33.3333%;
} }
.w40 { .w40 {
width: 40%; width: 40%;
} }
.w50 { .w50 {
width: 50%; width: 50%;
} }
.w60 { .w60 {
width: 60%; width: 60%;
} }
.w66 { .w66 {
width: 66.6666%; width: 66.6666%;
} }
.w70 { .w70 {
width: 70%; width: 70%;
} }
.w75 { .w75 {
width: 75%; width: 75%;
} }
.w80 { .w80 {
width: 80%; width: 80%;
} }
.w90 { .w90 {
width: 90%; width: 90%;
} }
.w100 { .w100 {
width: 100%; width: 100%;
} }
.w50p { .w50p {
width: 50px; width: 50px;
} }
.w100p { .w100p {
width: 100px; width: 100px;
} }
.w150p { .w150p {
width: 150px; width: 150px;
} }
.w200p { .w200p {
width: 200px; width: 200px;
} }
.w300p { .w300p {
width: 300px; width: 300px;
} }
.w400p { .w400p {
width: 400px; width: 400px;
} }
.w500p { .w500p {
width: 500px; width: 500px;
} }
.w600p { .w600p {
width: 600px; width: 600px;
} }
.w700p { .w700p {
width: 700px; width: 700px;
} }
.w800p { .w800p {
width: 800px; width: 800px;
} }
.w960p { .w960p {
width: 960px; width: 960px;
} }
.mw960p { .mw960p {
max-width: 960px; max-width: 960px;
} }
.w1140p { .w1140p {
width: 1140px; width: 1140px;
} }
.mw1140p { .mw1140p {
max-width: 1140px; max-width: 1140px;
} }
.wauto { .wauto {
width: auto; width: auto;
} }
.man { .man {
margin: 0; margin: 0;
} }
.pan { .pan {
padding: 0; padding: 0;
} }
.mas { .mas {
margin: 1em; margin: 1em;
} }
.mam { .mam {
margin: 2em; margin: 2em;
} }
.mal { .mal {
margin: 4em; margin: 4em;
} }
.pas { .pas {
padding: 1em; padding: 1em;
} }
.pam { .pam {
padding: 2em; padding: 2em;
} }
.pal { .pal {
padding: 4em; padding: 4em;
} }
.mtn { .mtn {
margin-top: 0; margin-top: 0;
} }
.mts { .mts {
margin-top: 1em; margin-top: 1em;
} }
.mtm { .mtm {
margin-top: 2em; margin-top: 2em;
} }
.mtl { .mtl {
margin-top: 4em; margin-top: 4em;
} }
.mrn { .mrn {
margin-right: 0; margin-right: 0;
} }
.mrs { .mrs {
margin-right: 1em; margin-right: 1em;
} }
.mrm { .mrm {
margin-right: 2em; margin-right: 2em;
} }
.mrl { .mrl {
margin-right: 4em; margin-right: 4em;
} }
.mbn { .mbn {
margin-bottom: 0; margin-bottom: 0;
} }
.mbs { .mbs {
margin-bottom: 1em; margin-bottom: 1em;
} }
.mbm { .mbm {
margin-bottom: 2em; margin-bottom: 2em;
} }
.mbl { .mbl {
margin-bottom: 4em; margin-bottom: 4em;
} }
.mln { .mln {
margin-left: 0; margin-left: 0;
} }
.mls { .mls {
margin-left: 1em; margin-left: 1em;
} }
.mlm { .mlm {
margin-left: 2em; margin-left: 2em;
} }
.mll { .mll {
margin-left: 4em; margin-left: 4em;
} }
.ptn { .ptn {
padding-top: 0; padding-top: 0;
} }
.pts { .pts {
padding-top: 1em; padding-top: 1em;
} }
.ptm { .ptm {
padding-top: 2em; padding-top: 2em;
} }
.ptl { .ptl {
padding-top: 4em; padding-top: 4em;
} }
.prn { .prn {
padding-right: 0; padding-right: 0;
} }
.prs { .prs {
padding-right: 1em; padding-right: 1em;
} }
.prm { .prm {
padding-right: 2em; padding-right: 2em;
} }
.prl { .prl {
padding-right: 4em; padding-right: 4em;
} }
.pbn { .pbn {
padding-bottom: 0; padding-bottom: 0;
} }
.pbs { .pbs {
padding-bottom: 1em; padding-bottom: 1em;
} }
.pbm { .pbm {
padding-bottom: 2em; padding-bottom: 2em;
} }
.pbl { .pbl {
padding-bottom: 4em; padding-bottom: 4em;
} }
.pln { .pln {
padding-left: 0; padding-left: 0;
} }
.pls { .pls {
padding-left: 1em; padding-left: 1em;
} }
.plm { .plm {
padding-left: 2em; padding-left: 2em;
} }
.pll { .pll {
padding-left: 4em; padding-left: 4em;
} }

59
css/02-grids.css
View file

@ -15,107 +15,84 @@
} }
/* global styles for direct child ex. .grid3 */ /* global styles for direct child ex. .grid3 */
/* 1- gutter value */
.grid > * { .grid > * {
display: block; display: block;
padding: 0; padding: 0;
/* gutter value */
margin-left: -20px; margin-left: -20px;
/* 1 */
text-align: left; text-align: left;
} }
/* global styles for each "cell" */ /* global styles for each "cell" */
/* 1- gutter value */
.grid > * > * { .grid > * > * {
display: inline-block; display: inline-block;
/* gutter value */
padding-left: 20px; padding-left: 20px;
/* 1 */
margin-left: 0; margin-left: 0;
vertical-align: top; vertical-align: top;
} }
/* whitespace fixing for modern browsers including IE9+ */ /* whitespace fixing for modern browsers including IE9+ */
/* 1- fallback for IE9+ */
/* 2- fallback for Opera Mini */
:root .grid { :root .grid {
font-size: 0; font-size: 0;
text-justify: distribute-all-lines; /* 1 */ /* fallback for IE9+ */
text-justify: distribute-all-lines;
} }
:root .grid > * > * { :root .grid > * > * {
/* fallback for Opera Mini */
font-size: 14px; font-size: 14px;
/* 2 */
font-size: 1.4rem; font-size: 1.4rem;
} }
/* Opera hack */ /* Opera hack */
.opera:-o-prefocus, .opera:-o-prefocus,
.grid > * { .grid > * {
word-spacing: -0.43em; word-spacing: -0.43em;
} }
.grid2 > * { .grid2 > * {
width: 50%; width: 50%;
} }
.grid3 > * { .grid3 > * {
width: 33.333%; width: 33.333%;
} }
.grid4 > * { .grid4 > * {
width: 25%; width: 25%;
} }
.grid5 > * { .grid5 > * {
width: 20%; width: 20%;
} }
.grid6 > * { .grid6 > * {
width: 16.667%; width: 16.667%;
} }
.grid8 > * { .grid8 > * {
width: 12.5%; width: 12.5%;
} }
.grid10 > * { .grid10 > * {
width: 10%; width: 10%;
} }
.grid12 > * { .grid12 > * {
width: 8.333%; width: 8.333%;
} }
/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */ /* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
.grid2-1 > *:first-child, .grid2-1 > *:first-child,
.grid1-2 > * + * { .grid1-2 > * + * {
width: 66.666%; width: 66.666%;
} }
.grid1-2 > *:first-child, .grid1-2 > *:first-child,
.grid2-1 > * + * { .grid2-1 > * + * {
width: 33.333%; width: 33.333%;
} }
.grid1-3 > *:first-child, .grid1-3 > *:first-child,
.grid3-1 > * + * { .grid3-1 > * + * {
width: 25%; width: 25%;
} }
.grid3-1 > *:first-child, .grid3-1 > *:first-child,
.grid1-3 > * + * { .grid1-3 > * + * {
width: 75%; width: 75%;
} }
/* Responsiv-o-matic */ /* Responsiv-o-matic */
@media (max-width: 1024px) { @media (max-width: 1024px) {
.grid5 > *, .grid5 > *,
.grid6 > *, .grid6 > *,
@ -125,7 +102,6 @@
width: 33.333%; width: 33.333%;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.grid3 > *, .grid3 > *,
.grid4 > *, .grid4 > *,
@ -137,13 +113,11 @@
width: 50%; width: 50%;
} }
} }
@media (max-width: 320px) { @media (max-width: 320px) {
.grid > * > * { .grid > * > * {
width: 100% !important; width: 100% !important;
} }
} }
/* ---------------------------------- */ /* ---------------------------------- */
/* ==autogrids */ /* ==autogrids */
@ -159,72 +133,57 @@
[class*="autogrid"] { [class*="autogrid"] {
text-align: justify; text-align: justify;
} }
[class*="autogrid"]:after { [class*="autogrid"]:after {
content: ""; content: "";
display: inline-block; display: inline-block;
width: 100%; width: 100%;
} }
[class*="autogrid"] > * { [class*="autogrid"] > * {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
text-align: left; text-align: left;
} }
/* whitespace fixing for modern browsers including IE9+ */ /* whitespace fixing for modern browsers including IE9+ */
/* 1- fallback for IE9+ */
/* 2- fallback for Opera Mini */
:root[class*="autogrid"] { :root[class*="autogrid"] {
font-size: 0; font-size: 0;
text-justify: distribute-all-lines; /* 1 */ /* fallback for IE9+ */
text-justify: distribute-all-lines;
} }
:root[class*="autogrid"] > * { :root[class*="autogrid"] > * {
/* fallback for Opera Mini */
font-size: 14px; font-size: 14px;
/* 2 */
font-size: 1.4rem; font-size: 1.4rem;
} }
/* Opera hack */ /* Opera hack */
[class*="autogrid"]:-o-prefocus { [class*="autogrid"]:-o-prefocus {
word-spacing: -0.43em; word-spacing: -0.43em;
} }
.autogrid2 > * { .autogrid2 > * {
width: 49%; width: 49%;
} }
.autogrid3 > * { .autogrid3 > * {
width: 32%; width: 32%;
} }
.autogrid4 > * { .autogrid4 > * {
width: 23.6%; width: 23.6%;
} }
.autogrid5 > * { .autogrid5 > * {
width: 19%; width: 19%;
} }
.autogrid6 > * { .autogrid6 > * {
width: 15%; width: 15%;
} }
.autogrid8 > * { .autogrid8 > * {
width: 10.8%; width: 10.8%;
} }
.autogrid10 > * { .autogrid10 > * {
width: 9%; width: 9%;
} }
.autogrid12 > * { .autogrid12 > * {
width: 6.4%; width: 6.4%;
} }
@media (max-width: 1024px) { @media (max-width: 1024px) {
.autogrid5 > *, .autogrid5 > *,
.autogrid6 > *, .autogrid6 > *,
@ -234,7 +193,6 @@
width: 32%; width: 32%;
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
.autogrid5 > *, .autogrid5 > *,
.autogrid6 > *, .autogrid6 > *,
@ -244,7 +202,6 @@
width: 49%; width: 49%;
} }
} }
@media (max-width: 320px) { @media (max-width: 320px) {
[class*="autogrid"] > * { [class*="autogrid"] > * {
width: 100%; width: 100%;

4
css/06-rwd.css
View file

@ -5,11 +5,11 @@
/* ----------------------------- */ /* ----------------------------- */
@media (min-width: 480px) { @media (min-width: 480px) {
/* here go rules for big resources and big screens like: background-images, font-faces, etc. */ /* rules for big resources and big screens like: background-images, font-faces, etc. */
} }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
/* Style adjustments for retina devices */ /* style adjustments for high density devices */
} }
/* ---------------------------------- */ /* ---------------------------------- */

354
css/knacss.css
View file

File diff suppressed because it is too large Load diff

21
less/01-base.less
View file

@ -1,6 +1,6 @@
@import "00-config"; @import "00-config";
/*! /*!
* www.KNACSS.com V3.0.2 (2014-05-07) @author: Raphael Goetter, Alsacreations * www.KNACSS.com V3.0.3 (2014-05-019) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */
@ -49,19 +49,29 @@ svg:not(:root) {
/* == typography */ /* == typography */
/* ----------------------------- */ /* ----------------------------- */
/* base font-size corresponds to "10px" and is adapted to rem unit */
html { html {
/* set base font-size to equiv "10px", which is adapted to rem unit */
font-size: 62.5%; font-size: 62.5%;
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
/* thanks to @guardian, @victorbritopro and @eQRoeil */
font-size: calc(1em * 0.625);
/* disallow text zooming on orientation change (non standard property) */
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
text-size-adjust: 100%;
} }
body { body {
/* set body font-size in em (1.4em equiv "14px") */
font-size: unit((@base-font-size / 10), em);
background-color: @base-background; background-color: @base-background;
color: @base-color; color: @base-color;
font-family: @font-stack-common; font-family: @font-stack-common;
font-size: unit((@base-font-size / 10), em);
line-height: @line-height; line-height: @line-height;
} }
@ -140,7 +150,8 @@ code,
pre, pre,
samp, samp,
kbd { kbd {
white-space: pre-line; /* IE fix */ /* IE fix */
white-space: pre-line;
white-space: pre-wrap; white-space: pre-wrap;
font-family: @font-stack-monospace; font-family: @font-stack-monospace;
line-height: normal; line-height: normal;

25
less/02-grids.less
View file

@ -13,32 +13,33 @@
} }
/* global styles for direct child ex. .grid3 */ /* global styles for direct child ex. .grid3 */
/* 1- gutter value */
.grid > * { .grid > * {
display: block; display: block;
padding: 0; padding: 0;
margin-left: -@gutter; /* 1 */ /* gutter value */
margin-left: -@gutter;
text-align: left; text-align: left;
} }
/* global styles for each "cell" */ /* global styles for each "cell" */
/* 1- gutter value */
.grid > * > * { .grid > * > * {
display: inline-block; display: inline-block;
padding-left: @gutter; /* 1 */ /* gutter value */
padding-left: @gutter;
margin-left: 0; margin-left: 0;
vertical-align: top; vertical-align: top;
} }
/* whitespace fixing for modern browsers including IE9+ */ /* whitespace fixing for modern browsers including IE9+ */
/* 1- fallback for IE9+ */
/* 2- fallback for Opera Mini */
:root .grid { :root .grid {
font-size: 0; font-size: 0;
text-justify: distribute-all-lines; /* 1 */ /* fallback for IE9+ */
text-justify: distribute-all-lines;
} }
:root .grid > * > * { :root .grid > * > * {
font-size: @base-font-size; /* 2 */ /* fallback for Opera Mini */
font-size: @base-font-size;
font-size: unit((@base-font-size / 10), rem); font-size: unit((@base-font-size / 10), rem);
} }
@ -153,15 +154,15 @@
} }
/* whitespace fixing for modern browsers including IE9+ */ /* whitespace fixing for modern browsers including IE9+ */
/* 1- fallback for IE9+ */
/* 2- fallback for Opera Mini */
:root [class*="autogrid"] { :root [class*="autogrid"] {
font-size: 0; font-size: 0;
text-justify: distribute-all-lines; /* 1 */ /* fallback for IE9+ */
text-justify: distribute-all-lines;
} }
:root [class*="autogrid"] > * { :root [class*="autogrid"] > * {
font-size: @base-font-size; /* 2 */ /* fallback for Opera Mini */
font-size: @base-font-size;
font-size: unit((@base-font-size / 10), rem); font-size: unit((@base-font-size / 10), rem);
} }

3
less/04-forms.less
View file

@ -4,8 +4,7 @@
/* ----------------------------- */ /* ----------------------------- */
/* thanks to HTML5boilerplate, /* thanks to HTML5boilerplate,
* github.com/nathansmith/formalize * github.com/nathansmith/formalize and www.sitepen.com
* and www.sitepen.com
*/ */
/* buttons */ /* buttons */

4
less/06-rwd.less
View file

@ -4,11 +4,11 @@
/* ----------------------------- */ /* ----------------------------- */
@media (min-width: @small-screen) { @media (min-width: @small-screen) {
/* here go rules for big resources and big screens like: background-images, font-faces, etc. */ /* rules for big resources and big screens like: background-images, font-faces, etc. */
} }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
/* Style adjustments for retina devices */ /* style adjustments for high density devices */
} }
/* ---------------------------------- */ /* ---------------------------------- */

20
sass/01-base.scss
View file

@ -1,6 +1,6 @@
@import "00-config"; @import "00-config";
/*! /*!
* www.KNACSS.com V3.0.2 (2014-05-07) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel) * www.KNACSS.com V3.0.3 (2014-05-19) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel)
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */
@ -49,19 +49,28 @@ svg:not(:root) {
/* == typography */ /* == typography */
/* ----------------------------- */ /* ----------------------------- */
/* base font-size corresponds to "10px" and is adapted to rem unit */
html { html {
/* set base font-size to equiv "10px", which is adapted to rem unit */
font-size: 62.5%; font-size: 62.5%;
/* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
/* thanks to @guardian, @victorbritopro and @eQRoeil */
font-size: calc(1em * 0.625);
/* disallow text zooming on orientation change (non standard property) */
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
text-size-adjust: 100%;
} }
body { body {
/* set body font-size in em (1.4em equiv "14px") */
font-size: ($base-font-size / 10px) + em;
background-color: $base-background; background-color: $base-background;
color: $base-color; color: $base-color;
font-family: $font-stack-common; font-family: $font-stack-common;
font-size: ($base-font-size / 10px) + em;
line-height: $line-height; line-height: $line-height;
} }
@ -134,7 +143,8 @@ code,
pre, pre,
samp, samp,
kbd { kbd {
white-space: pre-line; /* IE fix */ /* IE fix */
white-space: pre-line;
white-space: pre-wrap; white-space: pre-wrap;
font-family: $font-stack-monospace; font-family: $font-stack-monospace;
line-height: normal; line-height: normal;

24
sass/02-grids.scss
View file

@ -13,33 +13,33 @@
} }
/* global styles for direct child ex. .grid3 */ /* global styles for direct child ex. .grid3 */
/* 1- gutter value */
.grid > * { .grid > * {
display: block; display: block;
padding: 0; padding: 0;
margin-left: -$gutter; /* 1 */ /* gutter value */
margin-left: -$gutter;
text-align: left; text-align: left;
} }
/* global styles for each "cell" */ /* global styles for each "cell" */
/* 1- gutter value */
.grid > * > * { .grid > * > * {
display: inline-block; display: inline-block;
padding-left: $gutter; /* 1 */ /* gutter value */
padding-left: $gutter;
margin-left: 0; margin-left: 0;
vertical-align: top; vertical-align: top;
} }
/* whitespace fixing for modern browsers including IE9+ */ /* whitespace fixing for modern browsers including IE9+ */
/* 1- fallback for IE9+ */
/* 2- fallback for Opera Mini */
:root .grid { :root .grid {
font-size: 0; font-size: 0;
text-justify: distribute-all-lines; /* 1 */ /* fallback for IE9+ */
text-justify: distribute-all-lines;
} }
:root .grid > * > * { :root .grid > * > * {
font-size: $base-font-size; /* 2 */ /* fallback for Opera Mini */
font-size: $base-font-size;
font-size: ($base-font-size / 10px) + rem; font-size: ($base-font-size / 10px) + rem;
} }
@ -154,15 +154,15 @@
} }
/* whitespace fixing for modern browsers including IE9+ */ /* whitespace fixing for modern browsers including IE9+ */
/* 1- fallback for IE9+ */
/* 2- fallback for Opera Mini */
:root [class*="autogrid"] { :root [class*="autogrid"] {
font-size: 0; font-size: 0;
text-justify: distribute-all-lines; /* 1 */ /* fallback for IE9+ */
text-justify: distribute-all-lines;
} }
:root [class*="autogrid"] > * { :root [class*="autogrid"] > * {
font-size: $base-font-size; /* 2 */ /* fallback for Opera Mini */
font-size: $base-font-size;
font-size: ($base-font-size / 10px) + rem; font-size: ($base-font-size / 10px) + rem;
} }

3
sass/04-forms.scss
View file

@ -4,8 +4,7 @@
/* ----------------------------- */ /* ----------------------------- */
/* thanks to HTML5boilerplate, /* thanks to HTML5boilerplate,
* github.com/nathansmith/formalize * github.com/nathansmith/formalize and www.sitepen.com
* and www.sitepen.com
*/ */
/* buttons */ /* buttons */

4
sass/06-rwd.scss
View file

@ -4,11 +4,11 @@
/* ----------------------------- */ /* ----------------------------- */
@media (min-width: $small-screen) { @media (min-width: $small-screen) {
/* here go rules for big resources and big screens like: background-images, font-faces, etc. */ /* rules for big resources and big screens like: background-images, font-faces, etc. */
} }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
/* Style adjustments for retina devices */ /* style adjustments for high density devices */
} }
/* ---------------------------------- */ /* ---------------------------------- */