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

Breakpoints changed (.tiny becomes larger... thanks to iPhone 6 :))

Browse source
This commit is contained in:
raphaelgoettter 2014-09-12 09:36:09 +02:00
parent 7235eaa54a
commit 71f341f3e0
6 changed files with 24 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
bower.json
View file

@ -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"

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

12
less/_00-config.less
View file

@ -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

10
less/_06-rwd.less
View file

@ -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,

12
sass/_00-config.scss
View file

@ -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

10
sass/_06-rwd.scss
View file

@ -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,