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

adjusted version for box-sizing

This commit is contained in:
yoann delpierre 2014-10-22 16:49:33 +02:00
parent 1b9e0bf9f5
commit b7105ba960
3 changed files with 86 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/knacss-unminified.css
View File

@ -6,11 +6,14 @@
/* == soft reset */ /* == soft reset */
/* ----------------------------- */ /* ----------------------------- */
/* switching box model for all elements */ /* switching box model for all elements */
* { html {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
*, *:before, *:after {
box-sizing: inherit;
}
/* soft reset */ /* soft reset */
html, html,
body { body {
@ -909,7 +912,7 @@ input[type='submit']::-moz-focus-inner {
font-size: 1.6em; font-size: 1.6em;
top: -0.05em; top: -0.05em;
} }
/* flexbox layout /* flexbox layout
Tutorial: http://knacss.com/demos/tutoriel.html#flex */ Tutorial: http://knacss.com/demos/tutoriel.html#flex */
.flex { .flex {
display: -webkit-box; display: -webkit-box;

69
less/_01-base.less
View File

@ -8,9 +8,12 @@
/* ----------------------------- */ /* ----------------------------- */
/* switching box model for all elements */ /* switching box model for all elements */
* { html {
box-sizing: border-box; box-sizing: border-box;
} }
*, *:before, *:after {
box-sizing: inherit;
}
/* soft reset */ /* soft reset */
html, html,
@ -56,27 +59,27 @@ svg:not(:root) {
html { html {
/* set base font-size to equiv "10px", which is adapted to rem unit */ /* 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 */ /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
/* thanks to @guardian, @victorbritopro and @eQRoeil */ /* thanks to @guardian, @victorbritopro and @eQRoeil */
font-size: calc(1em * 0.625); font-size: calc(1em * 0.625);
/* disallow text zooming on orientation change (non standard property) */ /* 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%;
} }
body { body {
/* set body font-size in em (1.4em equiv "14px") */ /* set body font-size in em (1.4em equiv "14px") */
font-size: unit((@base-font-size / 10), em); 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;
line-height: @line-height; line-height: @line-height;
} }
@ -100,7 +103,7 @@ th,
label, label,
textarea, textarea,
caption, caption,
details, details,
figure { figure {
margin-top: 0.75em; margin-top: 0.75em;
margin-bottom: 0; margin-bottom: 0;
@ -160,12 +163,12 @@ h6,
.em(@base-font-size + 6); .em(@base-font-size + 6);
} }
code, code,
pre, pre,
samp, samp,
kbd { kbd {
/* IE fix */ /* IE fix */
white-space: pre-line; 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;
@ -197,10 +200,10 @@ sup {
/* ----------------------------- */ /* ----------------------------- */
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */ /* hidden but not for an assistive technology like a screen reader, Yahoo! method */
.visually-hidden { .visually-hidden {
position: absolute !important; position: absolute !important;
border: 0 !important; border: 0 !important;
height: 1px !important; height: 1px !important;
width: 1px !important; width: 1px !important;
padding: 0 !important; padding: 0 !important;
overflow: hidden !important; overflow: hidden !important;
@ -229,17 +232,17 @@ body > script {
/* avoid top margins on first content element */ /* avoid top margins on first content element */
p, p,
.p-like, .p-like,
ul, ul,
ol, ol,
dl, dl,
blockquote, blockquote,
pre, pre,
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
@ -256,14 +259,14 @@ li ol {
} }
/* max values */ /* max values */
img, img,
table, table,
td, td,
blockquote, blockquote,
code, code,
pre, pre,
textarea, textarea,
input, input,
video { video {
max-width: 100%; max-width: 100%;
} }
@ -279,7 +282,7 @@ table {
/* float layout */ /* float layout */
/* module, gains superpower "BFC" Block Formating Context */ /* module, gains superpower "BFC" Block Formating Context */
.mod { .mod {
overflow: hidden; overflow: hidden;
} }
@ -345,15 +348,15 @@ img.end {
margin-left: @small-value; margin-left: @small-value;
} }
img.left, img.left,
img.right, img.right,
img.start, img.start,
img.end { img.end {
margin-bottom: @tiny-value; margin-bottom: @tiny-value;
} }
.center { .center {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }

87
sass/_01-base.scss
View File

@ -8,9 +8,12 @@
/* ----------------------------- */ /* ----------------------------- */
/* switching box model for all elements */ /* switching box model for all elements */
* { html {
box-sizing: border-box; box-sizing: border-box;
} }
*, *:before, *:after {
box-sizing: inherit;
}
/* soft reset */ /* soft reset */
html, html,
@ -55,24 +58,24 @@ svg:not(:root) {
/* ----------------------------- */ /* ----------------------------- */
html { html {
/* set base font-size to equiv "10px", which is adapted to rem unit */ /* 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 */ /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
/* thanks to @guardian, @victorbritopro and @eQRoeil */ /* thanks to @guardian, @victorbritopro and @eQRoeil */
font-size: calc(1em * 0.625); font-size: calc(1em * 0.625);
/* disallow text zooming on orientation change (non standard property) */ /* 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%;
} }
body { body {
/* set body font-size in em (1.4em equiv "14px") */ /* set body font-size in em (1.4em equiv "14px") */
font-size: ($base-font-size / 10px) + em; 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;
@ -99,7 +102,7 @@ th,
label, label,
textarea, textarea,
caption, caption,
details, details,
figure { figure {
margin-top: 0.75em; margin-top: 0.75em;
margin-bottom: 0; margin-bottom: 0;
@ -153,7 +156,7 @@ h6, .h6-like {
@include em($base-font-size / 1px + 6); @include em($base-font-size / 1px + 6);
} }
code, code,
pre, pre,
samp, samp,
kbd { kbd {
@ -190,10 +193,10 @@ sup {
/* ----------------------------- */ /* ----------------------------- */
/* hidden but not for assistance tools, Yahoo! method */ /* hidden but not for assistance tools, Yahoo! method */
.visually-hidden { .visually-hidden {
position: absolute !important; position: absolute !important;
border: 0 !important; border: 0 !important;
height: 1px !important; height: 1px !important;
width: 1px !important; width: 1px !important;
padding: 0 !important; padding: 0 !important;
overflow: hidden !important; overflow: hidden !important;
@ -221,18 +224,18 @@ body > script {
/* ----------------------------- */ /* ----------------------------- */
/* avoid top margins on first content element */ /* avoid top margins on first content element */
p, p,
.p-like, .p-like,
ul, ul,
ol, ol,
dl, dl,
blockquote, blockquote,
pre, pre,
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
@ -249,21 +252,21 @@ li ol {
} }
/* max values */ /* max values */
img, img,
table, table,
td, td,
blockquote, blockquote,
code, code,
pre, pre,
textarea, textarea,
input, input,
video { video {
max-width: 100%; max-width: 100%;
} }
/* margin-bottom on tables */ /* margin-bottom on tables */
table { table {
margin-bottom: $medium-value; margin-bottom: $medium-value;
} }
@ -273,7 +276,7 @@ table {
/* float layout */ /* float layout */
/* module, gains superpower "BFC" Block Formating Context */ /* module, gains superpower "BFC" Block Formating Context */
.mod { .mod {
overflow: hidden; overflow: hidden;
} }
@ -340,26 +343,26 @@ img.end {
margin-left: $small-value; margin-left: $small-value;
} }
img.left, img.left,
img.right, img.right,
img.start, img.start,
img.end { img.end {
margin-bottom: $tiny-value; margin-bottom: $tiny-value;
} }
.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;
} }