Breakpoints changed (.tiny becomes larger... thanks to iPhone 6 :))
This commit is contained in:
parent
7235eaa54a
commit
71f341f3e0
6 changed files with 24 additions and 24 deletions
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "KNACSS",
|
"name": "KNACSS",
|
||||||
"version": "3.0.8",
|
"version": "3.0.9",
|
||||||
"homepage": "http://www.knacss.com/",
|
"homepage": "http://www.knacss.com/",
|
||||||
"authors": [
|
"authors": [
|
||||||
"Raphaël GOETTER, Alsacreations"
|
"Raphaël GOETTER, Alsacreations"
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -38,12 +38,12 @@
|
||||||
@ultra-large-value : 160px; // ultra large value for margins / paddings
|
@ultra-large-value : 160px; // ultra large value for margins / paddings
|
||||||
|
|
||||||
// breakpoints (choose unit you prefer)
|
// breakpoints (choose unit you prefer)
|
||||||
@tiny-screen : 320px; // tiny screens media query
|
@tiny-screen : 480px; // tiny screens media query (less than 480px)
|
||||||
@small-screen : 480px; // small screens media query
|
@small-screen : 768px; // screens between 481px and 768px
|
||||||
@medium-screen : 768px; // medium screens media query
|
@medium-screen : 1024px; // screens between 769px and 1024px
|
||||||
@large-screen : 1024px; // large screens media query
|
@large-screen : 1280px; // screens between 1025px and 1280px
|
||||||
@extra-large-screen : 1280px; // extra large screens media query
|
@extra-large-screen : 1600px; // screens between 1281px and 1600px
|
||||||
@ultra-large-screen : 1600px; // ultra large screens media query
|
@ultra-large-screen : 1920px; // ultra large screens
|
||||||
|
|
||||||
// misc (choose unit you prefer)
|
// misc (choose unit you prefer)
|
||||||
@gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
@gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
/* ==desktop and HD devices */
|
/* ==desktop and HD devices */
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
|
|
||||||
@media (min-width: @medium-screen) {
|
@media (min-width: (@medium-screen + 1)) {
|
||||||
/* rules for big resources and big screens like: background-images, font-faces, etc. */
|
/* rules for big resources and big screens like: background-images, font-faces, etc. */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -14,7 +14,7 @@
|
||||||
/* ==Responsive large */
|
/* ==Responsive large */
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
|
|
||||||
@media (min-width: @large-screen) {
|
@media (min-width: (@medium-screen + 1)) {
|
||||||
|
|
||||||
/* layouts for large screens */
|
/* layouts for large screens */
|
||||||
.large-hidden {
|
.large-hidden {
|
||||||
|
@ -104,7 +104,7 @@
|
||||||
/* ==Responsive medium */
|
/* ==Responsive medium */
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
|
|
||||||
@media (min-width: @medium-screen) and (max-width: (@large-screen - 1)) {
|
@media (min-width: (@small-screen + 1)) and (max-width: @medium-screen) {
|
||||||
|
|
||||||
/* layouts for medium screens */
|
/* layouts for medium screens */
|
||||||
.medium-hidden {
|
.medium-hidden {
|
||||||
|
@ -176,7 +176,7 @@
|
||||||
/* ==Responsive small */
|
/* ==Responsive small */
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
|
|
||||||
@media (max-width: @small-screen) and (max-width: (@medium-screen - 1)) {
|
@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
|
||||||
|
|
||||||
/* quick small resolution reset */
|
/* quick small resolution reset */
|
||||||
.mod,
|
.mod,
|
||||||
|
@ -295,7 +295,7 @@
|
||||||
/* ==Responsive tiny */
|
/* ==Responsive tiny */
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
|
|
||||||
@media (max-width: @tiny-screen) and (max-width: (@small-screen - 1)) {
|
@media (max-width: @tiny-screen) {
|
||||||
|
|
||||||
.w300p,
|
.w300p,
|
||||||
.w400p,
|
.w400p,
|
||||||
|
|
|
@ -38,12 +38,12 @@ $extra-large-value : 80px; // extra large value for margins / paddings
|
||||||
$ultra-large-value : 160px; // ultra large value for margins / paddings
|
$ultra-large-value : 160px; // ultra large value for margins / paddings
|
||||||
|
|
||||||
// breakpoints (choose unit you prefer)
|
// breakpoints (choose unit you prefer)
|
||||||
$tiny-screen : 320px; // tiny screens media query
|
$tiny-screen : 480px; // tiny screens media query (less than 480px)
|
||||||
$small-screen : 480px; // small screens media query
|
$small-screen : 768px; // screens between 481px and 768px
|
||||||
$medium-screen : 768px; // medium screens media query
|
$medium-screen : 1024px; // screens between 769px and 1024px
|
||||||
$large-screen : 1024px; // large screens media query
|
$large-screen : 1280px; // screens between 1025px and 1280px
|
||||||
$extra-large-screen : 1280px; // extra large screens media query
|
$extra-large-screen : 1600px; // screens between 1281px and 1600px
|
||||||
$ultra-large-screen : 1600px; // ultra large screens media query
|
$ultra-large-screen : 1920px; // ultra large screens
|
||||||
|
|
||||||
// misc (choose unit you prefer)
|
// misc (choose unit you prefer)
|
||||||
$gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
$gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
/* ==desktop and HD devices */
|
/* ==desktop and HD devices */
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
|
|
||||||
@media (min-width: $medium-screen) {
|
@media (min-width: ($medium-screen + 1)) {
|
||||||
/* rules for big resources and big screens like: background-images, font-faces, etc. */
|
/* rules for big resources and big screens like: background-images, font-faces, etc. */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -14,7 +14,7 @@
|
||||||
/* ==Responsive large */
|
/* ==Responsive large */
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
|
|
||||||
@media (min-width: $large-screen) {
|
@media (min-width: ($medium-screen + 1)) {
|
||||||
|
|
||||||
/* layouts for large screens */
|
/* layouts for large screens */
|
||||||
.large-hidden {
|
.large-hidden {
|
||||||
|
@ -104,7 +104,7 @@
|
||||||
/* ==Responsive medium */
|
/* ==Responsive medium */
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
|
|
||||||
@media (min-width: $medium-screen) and (max-width: ($large-screen - 1)) {
|
@media (min-width: ($small-screen + 1)) and (max-width: $medium-screen) {
|
||||||
|
|
||||||
/* layouts for medium screens */
|
/* layouts for medium screens */
|
||||||
.medium-hidden {
|
.medium-hidden {
|
||||||
|
@ -176,7 +176,7 @@
|
||||||
/* ==Responsive small */
|
/* ==Responsive small */
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
|
|
||||||
@media (max-width: $small-screen) and (max-width: ($medium-screen - 1)) {
|
@media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
|
||||||
|
|
||||||
/* quick small resolution reset */
|
/* quick small resolution reset */
|
||||||
.mod,
|
.mod,
|
||||||
|
@ -295,7 +295,7 @@
|
||||||
/* ==Responsive tiny */
|
/* ==Responsive tiny */
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
|
|
||||||
@media (max-width: $tiny-screen) and (max-width: ($small-screen - 1)) {
|
@media (max-width: $tiny-screen) {
|
||||||
|
|
||||||
.w300p,
|
.w300p,
|
||||||
.w400p,
|
.w400p,
|
||||||
|
|
Loading…
Reference in a new issue