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

adjusted version for box-sizing

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

69
less/_01-base.less
View file

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

87
sass/_01-base.scss
View file

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