74cc6f27ba
Petit ménage répétition inutile Fix font-size iOS version LESS Grilles et typo Changer la licence de KNACSS Conserver le commentaire de présentation de licence Correction grid reponsive classes manquantes version LESS (largeurs de blocs)
428 lines
No EOL
7.6 KiB
Text
428 lines
No EOL
7.6 KiB
Text
|
|
/* ----------------------------- */
|
|
/* ==reset */
|
|
/* ----------------------------- */
|
|
|
|
/* base font-size corresponds to 10px and is adapted to rem unit */
|
|
html {
|
|
font-size: 62.5%;
|
|
}
|
|
body {
|
|
background-color: #fff;
|
|
color: #000;
|
|
font-family: @fontstack1;
|
|
font-size: unit((@basefont / 10), em);
|
|
line-height: @lh; // adapt to your design
|
|
}
|
|
|
|
/* font-sizing for content */
|
|
/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
|
|
p,
|
|
ul,
|
|
ol,
|
|
dl,
|
|
blockquote,
|
|
pre,
|
|
td,
|
|
th,
|
|
label,
|
|
textarea,
|
|
caption,
|
|
details,
|
|
figure,
|
|
hgroup {
|
|
margin-top: .75em;
|
|
margin-bottom: 0;
|
|
line-height: @lh;
|
|
}
|
|
h1, .h1-like {
|
|
.flow(32px); // equiv 32px
|
|
}
|
|
h2, .h2-like {
|
|
.flow(28px); // equiv 28px
|
|
}
|
|
h3, .h3-like {
|
|
.flow(24px); // equiv 24px
|
|
}
|
|
h4, .h4-like {
|
|
.flow(20px); // equiv 20px
|
|
}
|
|
h5, .h5-like {
|
|
.flow(18px); // equiv 18px
|
|
}
|
|
h6, .h6-like {
|
|
.flow(16px); // equiv 16px
|
|
}
|
|
|
|
/* alternate font-sizing */
|
|
.smaller {
|
|
.rem (10px); /* equiv 10px */
|
|
}
|
|
.small {
|
|
.rem (12px); /* equiv 12px */
|
|
}
|
|
.big {
|
|
.rem (16px); /* equiv 16px */
|
|
}
|
|
.bigger {
|
|
.rem (18px); /* equiv 18px */
|
|
}
|
|
.biggest {
|
|
.rem (20px); /* equiv 20px */
|
|
}
|
|
|
|
/* soft reset */
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
ul,
|
|
ol {
|
|
padding-left: 2em;
|
|
}
|
|
ul.unstyled {
|
|
list-style: none;
|
|
}
|
|
code,
|
|
pre,
|
|
samp,
|
|
kbd {
|
|
white-space: pre-wrap;
|
|
font-family: @fontstack2;
|
|
line-height: 1em;
|
|
}
|
|
code, kbd, mark {
|
|
border-radius: 2px;
|
|
}
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
kbd {
|
|
padding: 0 2px;
|
|
border: 1px solid #999;
|
|
}
|
|
code {
|
|
padding: 2px 4px;
|
|
background: rgba(0,0,0,.04);
|
|
color: #b11;
|
|
}
|
|
mark {
|
|
padding:2px 4px;
|
|
background: #ff0;
|
|
}
|
|
table { margin-bottom: 1.5em; }
|
|
|
|
/* avoid top margins on first content element */
|
|
p, ul, ol, dl,
|
|
blockquote, pre,
|
|
h1, h2, h3, h4, h5, h6 {
|
|
&:first-child {
|
|
margin-top: 0;
|
|
}
|
|
}
|
|
|
|
/* avoid margins on nested elements */
|
|
li p,
|
|
li ul,
|
|
li ol {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* max values */
|
|
img, table, td, blockquote, code, pre, textarea, input, video {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* pictures */
|
|
img {
|
|
vertical-align: middle;
|
|
}
|
|
/* Google Gmap3 bug fix on images */
|
|
:not(.gm-style) img {
|
|
heigth: auto !important;
|
|
}
|
|
.ie678 .gm-style img {
|
|
height: 100%; /* IE678 hack */
|
|
}
|
|
.gm-style img,
|
|
.gmnoscreen img,
|
|
.gmnoprint img {
|
|
max-width: none !important;
|
|
}
|
|
|
|
a img { border: 0; }
|
|
|
|
/* scripts */
|
|
body > script {display: none !important;}
|
|
|
|
/* skip-links */
|
|
.skip-links {
|
|
position: absolute;
|
|
|
|
a {
|
|
position: absolute;
|
|
left: -7000px;
|
|
padding: 0.5em;
|
|
background: black;
|
|
color: white;
|
|
text-decoration: none;
|
|
|
|
&:focus {
|
|
position: static;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ----------------------------- */
|
|
/* ==layout and modules */
|
|
/* ----------------------------- */
|
|
|
|
/* switching box model for all elements */
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* float layout */
|
|
/* module, gains superpower "BFC" Block Formating Context */
|
|
.mod {
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* blocks that needs to be placed under floats */
|
|
.clear,
|
|
.line,
|
|
.row {
|
|
clear: both;
|
|
}
|
|
|
|
/* blocks that must contain floats */
|
|
.clearfix:after,
|
|
.line:after,
|
|
.mod:after {
|
|
content: "";
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
/* table layout */
|
|
.row {
|
|
display: table;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
}
|
|
.row > *,
|
|
.col {
|
|
display: table-cell;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* inline-block */
|
|
.inbl {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
|
|
|
|
/* alignments (blocks and inline) */
|
|
/* ------------------------------ */
|
|
|
|
/* left elements */
|
|
.left {
|
|
float: left;
|
|
}
|
|
img.left {
|
|
margin-right: 1em;
|
|
}
|
|
|
|
/* right elements */
|
|
.right {
|
|
float: right;
|
|
}
|
|
img.right {
|
|
margin-left: 1em;
|
|
}
|
|
|
|
img.left, img.right {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.center { margin-left: auto; margin-right: auto; }
|
|
.txtleft { text-align: left; }
|
|
.txtright { text-align: right; }
|
|
.txtcenter { text-align: center; }
|
|
|
|
|
|
/* blocks widths (percentage and pixels) */
|
|
.w10 { width: 10%; }
|
|
.w20 { width: 20%; }
|
|
.w25 { width: 25%; }
|
|
.w30 { width: 30%; }
|
|
.w33 { width: 33.3333%; }
|
|
.w40 { width: 40%; }
|
|
.w50 { width: 50%; }
|
|
.w60 { width: 60%; }
|
|
.w66 { width: 66.6666%; }
|
|
.w70 { width: 70%; }
|
|
.w75 { width: 75%; }
|
|
.w80 { width: 80%; }
|
|
.w90 { width: 90%; }
|
|
.w100 { width: 100%; }
|
|
|
|
.w50p { width: 50px; }
|
|
.w100p { width: 100px; }
|
|
.w150p { width: 150px; }
|
|
.w200p { width: 200px; }
|
|
.w300p { width: 300px; }
|
|
.w400p { width: 400px; }
|
|
.w500p { width: 500px; }
|
|
.w600p { width: 600px; }
|
|
.w700p { width: 700px; }
|
|
.w800p { width: 800px; }
|
|
.w960p { width: 960px; }
|
|
.mw960p { max-width: 960px; }
|
|
.w1140p { width: 1140px; }
|
|
.mw1140p { max-width: 1140px; }
|
|
|
|
/* spacing helpers
|
|
p,m = padding,margin
|
|
a,t,r,b,l = all,top,right,bottom,left
|
|
s,m,l,n = small(10px),medium(20px),large(30px),none(0)
|
|
source https://github.com/stubbornella/oocss/blob/master/core/spacing/space.css
|
|
*/
|
|
.m-reset, .ma0 { margin: 0; }
|
|
.p-reset, .pa0 { padding: 0; }
|
|
.ma1, .mas { margin: @smallvalue; }
|
|
.ma2, .mam { margin: @mediumvalue; }
|
|
.ma3, .mal { margin: @largevalue; }
|
|
.pa1, .pas { padding: @smallvalue; }
|
|
.pa2, .pam { padding: @mediumvalue; }
|
|
.pa3, .pal { padding: @largevalue; }
|
|
|
|
.mt0, .mtn { margin-top: 0; }
|
|
.mt1, .mts { margin-top: @smallvalue; }
|
|
.mt2, .mtm { margin-top: @mediumvalue; }
|
|
.mt3, .mtl { margin-top: @largevalue; }
|
|
.mr0, .mrn { margin-right: 0; }
|
|
.mr1, .mrs { margin-right: @smallvalue; }
|
|
.mr2, .mrm { margin-right: @mediumvalue; }
|
|
.mr3, .mrl { margin-right: @largevalue; }
|
|
.mb0, .mbn { margin-bottom: 0; }
|
|
.mb1, .mbs { margin-bottom: @smallvalue; }
|
|
.mb2, .mbm { margin-bottom: @mediumvalue; }
|
|
.mb3, .mbl { margin-bottom: @largevalue; }
|
|
.ml0, .mln { margin-left: 0; }
|
|
.ml1, .mls { margin-left: @smallvalue; }
|
|
.ml2, .mlm { margin-left: @mediumvalue; }
|
|
.ml3, .mll { margin-left: @largevalue; }
|
|
|
|
.pt0, .ptn { padding-top: 0; }
|
|
.pt1, .pts { padding-top: @smallvalue; }
|
|
.pt2, .ptm { padding-top: @mediumvalue; }
|
|
.pt3, .ptl { padding-top: @largevalue; }
|
|
.pr0, .prn { padding-right: 0; }
|
|
.pr1, .prs { padding-right: @smallvalue; }
|
|
.pr2, .prm { padding-right: @mediumvalue; }
|
|
.pr3, .prl { padding-right: @largevalue; }
|
|
.pb0, .pbn { padding-bottom: 0; }
|
|
.pb1, .pbs { padding-bottom: @smallvalue; }
|
|
.pb2, .pbm { padding-bottom: @mediumvalue; }
|
|
.pb3, .pbl { padding-bottom: @largevalue; }
|
|
.pl0, .pln { padding-left: 0; }
|
|
.pl1, .pls { padding-left: @smallvalue; }
|
|
.pl2, .plm { padding-left: @mediumvalue; }
|
|
.pl3, .pll { padding-left: @largevalue; }
|
|
|
|
/* hiding content */
|
|
.visually-hidden {
|
|
position: absolute;
|
|
left: -7000px;
|
|
overflow: hidden;
|
|
}
|
|
[dir=rtl] .visually-hidden {
|
|
left: auto;
|
|
right: -7000px;
|
|
}
|
|
|
|
/* hidden on desktop */
|
|
.desktop-hidden { display: none; }
|
|
/* hidden on mobile */
|
|
.mobile-hidden { display: block; }
|
|
|
|
|
|
/* ----------------------------- */
|
|
/* ==iefix */
|
|
/* ----------------------------- */
|
|
|
|
/* haslayout for IE6/IE7 */
|
|
.ie67 .clearfix,
|
|
.ie67 .line,
|
|
.ie67 .mod,
|
|
.ie67 .row,
|
|
.ie67 .col {
|
|
zoom: 1;
|
|
}
|
|
|
|
/* inline-block and table-cell for IE6/IE7 */
|
|
/* warning: .col needs width on IE6/IE7 */
|
|
.ie67 .btn,
|
|
.ie67 .col,
|
|
.ie67 .inbl {
|
|
display: inline;
|
|
zoom: 1;
|
|
}
|
|
.ie8 img {
|
|
width: auto; /* @bugfix for IE8 */
|
|
}
|
|
|
|
/* Active box-sizing for IE6/IE7 */
|
|
/* @source https://github.com/Schepp/box-sizing-polyfill */
|
|
/*
|
|
.ie67 * {
|
|
behavior: url(/js/boxsizing.htc);
|
|
}
|
|
*/
|
|
|
|
/* ----------------------------- */
|
|
/* ==print */
|
|
/* ----------------------------- */
|
|
|
|
/* quick print reset */
|
|
@media print {
|
|
p,
|
|
blockquote {
|
|
orphans: 2;
|
|
widows: 2;
|
|
}
|
|
blockquote,
|
|
ul,
|
|
ol {
|
|
page-break-inside: avoid;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
caption {
|
|
page-break-after: avoid;
|
|
}
|
|
}
|
|
|
|
/* debug helper */
|
|
.knacss-debug {
|
|
background: pink;
|
|
outline: 3px solid maroon;
|
|
}
|
|
|
|
/* orientation iOS font-size fix */
|
|
@media (orientation: landscape) and (max-device-width: @smallscreen) {
|
|
html,
|
|
body {
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
} |