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

Added latest changes

Browse source
This commit is contained in:
Hugo Giraudel 2013-05-27 16:52:12 +02:00
parent 24b190e5ef
commit 0003a28cce
2 changed files with 48 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
sass/knacss.scss
View file

@ -50,10 +50,10 @@
@if $breakpoint == "large" { @if $breakpoint == "large" {
@media (min-width: 1280px) { @content; } @media (min-width: 1280px) { @content; }
} }
@if $breakpoint == "medium" { @if $breakpoint == "small" {
@media (max-width: 768px) { @content; } @media (max-width: 768px) { @content; }
} }
@if $breakpoint == "small" { @if $breakpoint == "tiny" {
@media (max-width: 640px) { @content; } @media (max-width: 640px) { @content; }
} }
} }
@ -209,6 +209,18 @@ mark {
background: #ff0; background: #ff0;
} }
sup,
sub {
vertical-align: 0;
position: relative;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
table { table {
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
@ -243,16 +255,6 @@ textarea, input, video {
max-width: 100%; max-width: 100%;
} }
/**
* You shall not pass
*/
div, textarea,
table, td, th,
code, pre, samp {
word-wrap: break-word;
@include hyphens(auto);
}
/** /**
* Pictures * Pictures
*/ */

59
sass/rwd.scss
View file

@ -2,10 +2,8 @@
/* ==desktop and retina medias */ /* ==desktop and retina medias */
/* ----------------------------- */ /* ----------------------------- */
@include r(medium) { @media (min-width: 641px) {
/* Here go rules for big resources and big screens /* here go rules for big resources and big screens like: background-images, font-faces, etc. */
* like: background-images, font-faces, etc.
*/
} }
@media @media
@ -20,7 +18,7 @@ only screen and ( min-resolution: 2dppx) {
/* ---------------------------------- */ /* ---------------------------------- */
/* ==Responsive large / medium / tiny */ /* ==Responsive large / small / tiny */
/* ---------------------------------- */ /* ---------------------------------- */
@include r(large) { @include r(large) {
@ -69,7 +67,7 @@ only screen and ( min-resolution: 2dppx) {
.large-man { margin: 0 !important; } .large-man { margin: 0 !important; }
} }
@include r(medium) { @include r(small) {
/* quick tablet reset */ /* quick tablet reset */
.w60, .w60,
@ -84,39 +82,49 @@ only screen and ( min-resolution: 2dppx) {
.w800p, .w800p,
.w960p, .w960p,
.mw960p, .mw960p,
.medium-wauto { width: auto; } .small-wauto { width: auto; }
/* layouts for medium (m) screens */ /**
.medium-hidden, * You shall not pass
*/
div, textarea,
table, td, th,
code, pre, samp {
word-wrap: break-word;
@include hyphens(auto);
}
/* layouts for small (s) screens */
.small-hidden,
.tablet-hidden { display: none !important; } .tablet-hidden { display: none !important; }
.medium-visible { display: block !important; } .small-visible { display: block !important; }
.medium-no-float {float: none; } .small-no-float { float: none; }
.medium-inbl { .small-inbl {
@include inline-block(top); @include inline-block(top);
float: none; float: none;
} }
.medium-row { .small-row {
display: table !important; display: table !important;
table-layout: fixed !important; table-layout: fixed !important;
width: 100% !important; width: 100% !important;
} }
.medium-col { .small-col {
display: table-cell !important; display: table-cell !important;
vertical-align: top !important; vertical-align: top !important;
} }
/* widths for medium (m) screens */ /* widths for small (s) screens */
.medium-w25 { width: 25% !important; } .small-w25 { width: 25% !important; }
.medium-w33 { width: 33.3333% !important; } .small-w33 { width: 33.3333% !important; }
.medium-w50 { width: 50% !important; } .small-w50 { width: 50% !important; }
.medium-w66 { width: 66.6666% !important; } .small-w66 { width: 66.6666% !important; }
.medium-w75 { width: 75% !important; } .small-w75 { width: 75% !important; }
.medium-w100 { .small-w100 {
display: block !important; display: block !important;
float: none !important; float: none !important;
clear: none !important; clear: none !important;
@ -125,9 +133,10 @@ only screen and ( min-resolution: 2dppx) {
margin-right: 0 !important; margin-right: 0 !important;
border: 0; border: 0;
} }
/* margins for medium (m) screens */
.medium-ma0, /* margins for small (s) screens */
.medium-man { margin: 0 !important; } .small-ma0,
.small-man { margin: 0 !important; }
/* Responsive grids */ /* Responsive grids */
.grid4 > * {width: 49% !important; } .grid4 > * {width: 49% !important; }
@ -136,7 +145,7 @@ only screen and ( min-resolution: 2dppx) {
.grid6 > :first-child + * + * + * {margin-left: 0 !important;} .grid6 > :first-child + * + * + * {margin-left: 0 !important;}
} }
@include r(small) { @include r(tiny) {
/* Quick smartphone reset */ /* Quick smartphone reset */
.mod, .mod,