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

retouches finales

Browse source
This commit is contained in:
Raphael Goetter 2014-05-03 14:38:58 +02:00
parent 28a6ad32f1
commit 38be7212d0
12 changed files with 1115 additions and 835 deletions
Download patch file Download diff file Expand all files Collapse all files

314
css/01-base.css
View file

@ -1,52 +1,70 @@
/*!
* www.KNACSS.com V2.9.4 (2014-04) @author: Raphael Goetter, Alsacreations
* www.KNACSS.com V3.0.0 (2014-05) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/
*/
/* ----------------------------- */
/* == soft reset */
/* ----------------------------- */
/* switching box model for all elements */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* soft reset */
html,
body {
margin: 0;
padding: 0;
}
ul,
ol {
padding-left: 2em;
}
ul.unstyled {
list-style: none;
}
img {
height: auto;
vertical-align: middle;
border: 0;
}
audio,
canvas,
video {
display: inline-block;
}
svg:not(:root) {
overflow: hidden;
}
figure {
margin: 0;
}
/* ----------------------------- */
/* == typography */
/* ----------------------------- */
/* base font-size corresponds to 10px and is adapted to rem unit */
/* base font-size corresponds to "10px" and is adapted to rem unit */
html {
font-size: 62.5%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
background-color: #ffffff;
color: #000000;
@ -54,9 +72,11 @@ body {
font-size: 1.4em;
line-height: 1.5;
}
/* font-sizing for content */
/* preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */
p,
.p-like,
ul,
ol,
dl,
@ -70,68 +90,63 @@ caption,
details,
figure,
hgroup {
margin-top: .75em;
margin-bottom: 0;
line-height: 1.5;
}
h1,
.h1-like {
margin-top: 0.65625em;
margin-bottom: 0;
font-size: 3.2rem;
line-height: 1.3125;
}
h2,
.h2-like {
margin-top: 0.75em;
margin-bottom: 0;
font-size: 2.8rem;
line-height: 1.5;
}
h1,
.h1-like {
font-size: 3.2rem;
}
h2,
.h2-like {
font-size: 2.8rem;
}
h3,
.h3-like {
margin-top: 0.875em;
margin-bottom: 0;
font-size: 2.4rem;
line-height: 1.75;
}
h4,
.h4-like {
margin-top: 1.05em;
margin-bottom: 0;
font-size: 2rem;
line-height: 1.05;
}
h5,
.h5-like {
margin-top: 1.16666667em;
margin-bottom: 0;
font-size: 1.8rem;
line-height: 1.16666667;
}
h6,
.h6-like {
margin-top: 1.3125em;
margin-bottom: 0;
font-size: 1.6rem;
line-height: 1.3125;
}
/* alternate font-sizing */
.smaller {
font-size: 0.71428571em;
font-size: 0.71em;
}
.small {
font-size: 0.85714286em;
font-size: 0.86em;
}
.big {
font-size: 1.14285714em;
font-size: 1.14em;
}
.bigger {
font-size: 1.28571429em;
font-size: 1.29em;
}
.biggest {
font-size: 1.42857143em;
font-size: 1.43em;
}
code,
pre,
samp,
@ -142,16 +157,42 @@ kbd {
font-family: Consolas, 'DejaVu Sans Mono', Courier, monospace;
line-height: normal;
}
em {
em,
.em,
address,
cite,
dfn,
i,
var {
font-style: italic;
}
strong {
.no-em {
font-style: normal;
}
strong,
.strong {
font-weight: bold;
}
.no-strong {
font-weight: normal;
}
small,
sub,
sup {
font-size: smaller;
}
/* ----------------------------- */
/* == hiding content */
/* ----------------------------- */
/* hiding content */
.visually-hidden {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
@ -159,11 +200,39 @@ strong {
height: 1px;
width: 1px;
}
body > script {
display: none !important;
}
@media print {
.no-print {
display: none;
}
}
@media (max-width: 480px) {
.no-small-screen {
display: none;
}
}
@media (min-width: 1024px) {
.no-large-screen {
display: none;
}
}
/* ----------------------------- */
/* == browsers consistency */
/* ----------------------------- */
/* avoid top margins on first content element */
p:first-child,
.p-like:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
@ -177,14 +246,19 @@ h5:first-child,
h6:first-child {
margin-top: 0;
}
/* avoid margins on nested elements */
li p,
li .p-like,
li ul,
li ol {
margin-top: 0;
margin-bottom: 0;
}
/* max values */
img,
table,
td,
@ -196,345 +270,389 @@ input,
video {
max-width: 100%;
}
/* margin-bottom on tables */
table {
margin-bottom: 2em;
}
/* scripts */
body > script {
display: none !important;
}
/* ----------------------------- */
/* ==layout and modules */
/* ----------------------------- */
/* 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 {
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 (or starting) elements */
.left,
.start {
float: left;
}
img.left,
img.start {
margin-right: 1em;
}
/* right (or ending) elements */
.right,
.end {
float: right;
}
img.right,
img.end {
margin-left: 1em;
}
img.left,
img.right,
img.start,
img.end {
margin-bottom: 0.5em;
}
.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;
}
.wauto {
width: auto;
}
/* spacing helpers
p,m = padding,margin
a,t,r,b,l = all,top,right,bottom,left
s,m,l,n = small, medium, large, none
*/
.m-reset,
.ma0 {
.man {
margin: 0;
}
.p-reset,
.pa0 {
.pan {
padding: 0;
}
.ma1,
.mas {
margin: 1em;
}
.ma2,
.mam {
margin: 2em;
}
.ma3,
.mal {
margin: 4em;
}
.pa1,
.pas {
padding: 1em;
}
.pa2,
.pam {
padding: 2em;
}
.pa3,
.pal {
padding: 4em;
}
.mt0,
.mtn {
margin-top: 0;
}
.mt1,
.mts {
margin-top: 1em;
}
.mt2,
.mtm {
margin-top: 2em;
}
.mt3,
.mtl {
margin-top: 4em;
}
.mr0,
.mrn {
margin-right: 0;
}
.mr1,
.mrs {
margin-right: 1em;
}
.mr2,
.mrm {
margin-right: 2em;
}
.mr3,
.mrl {
margin-right: 4em;
}
.mb0,
.mbn {
margin-bottom: 0;
}
.mb1,
.mbs {
margin-bottom: 1em;
}
.mb2,
.mbm {
margin-bottom: 2em;
}
.mb3,
.mbl {
margin-bottom: 4em;
}
.ml0,
.mln {
margin-left: 0;
}
.ml1,
.mls {
margin-left: 1em;
}
.ml2,
.mlm {
margin-left: 2em;
}
.ml3,
.mll {
margin-left: 4em;
}
.pt0,
.ptn {
padding-top: 0;
}
.pt1,
.pts {
padding-top: 1em;
}
.pt2,
.ptm {
padding-top: 2em;
}
.pt3,
.ptl {
padding-top: 4em;
}
.pr0,
.prn {
padding-right: 0;
}
.pr1,
.prs {
padding-right: 1em;
}
.pr2,
.prm {
padding-right: 2em;
}
.pr3,
.prl {
padding-right: 4em;
}
.pb0,
.pbn {
padding-bottom: 0;
}
.pb1,
.pbs {
padding-bottom: 1em;
}
.pb2,
.pbm {
padding-bottom: 2em;
}
.pb3,
.pbl {
padding-bottom: 4em;
}
.pl0,
.pln {
padding-left: 0;
}
.pl1,
.pls {
padding-left: 1em;
}
.pl2,
.plm {
padding-left: 2em;
}
.pl3,
.pll {
padding-left: 4em;
}
/* debug helper */
.knacss-debug {
background: pink;
outline: 3px solid maroon;
}
}