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",
"version": "3.0.8",
"version": "3.0.9",
"homepage": "http://www.knacss.com/",
"authors": [
"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
// breakpoints (choose unit you prefer)
@tiny-screen : 320px; // tiny screens media query
@small-screen : 480px; // small screens media query
@medium-screen : 768px; // medium screens media query
@large-screen : 1024px; // large screens media query
@extra-large-screen : 1280px; // extra large screens media query
@ultra-large-screen : 1600px; // ultra large screens media query
@tiny-screen : 480px; // tiny screens media query (less than 480px)
@small-screen : 768px; // screens between 481px and 768px
@medium-screen : 1024px; // screens between 769px and 1024px
@large-screen : 1280px; // screens between 1025px and 1280px
@extra-large-screen : 1600px; // screens between 1281px and 1600px
@ultra-large-screen : 1920px; // ultra large screens
// misc (choose unit you prefer)
@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 */
/* ----------------------------- */
@media (min-width: @medium-screen) {
@media (min-width: (@medium-screen + 1)) {
/* rules for big resources and big screens like: background-images, font-faces, etc. */
}
@ -14,7 +14,7 @@
/* ==Responsive large */
/* ---------------------------------- */
@media (min-width: @large-screen) {
@media (min-width: (@medium-screen + 1)) {
/* layouts for large screens */
.large-hidden {
@ -104,7 +104,7 @@
/* ==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 */
.medium-hidden {
@ -176,7 +176,7 @@
/* ==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 */
.mod,
@ -295,7 +295,7 @@
/* ==Responsive tiny */
/* ---------------------------------- */
@media (max-width: @tiny-screen) and (max-width: (@small-screen - 1)) {
@media (max-width: @tiny-screen) {
.w300p,
.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
// breakpoints (choose unit you prefer)
$tiny-screen : 320px; // tiny screens media query
$small-screen : 480px; // small screens media query
$medium-screen : 768px; // medium screens media query
$large-screen : 1024px; // large screens media query
$extra-large-screen : 1280px; // extra large screens media query
$ultra-large-screen : 1600px; // ultra large screens media query
$tiny-screen : 480px; // tiny screens media query (less than 480px)
$small-screen : 768px; // screens between 481px and 768px
$medium-screen : 1024px; // screens between 769px and 1024px
$large-screen : 1280px; // screens between 1025px and 1280px
$extra-large-screen : 1600px; // screens between 1281px and 1600px
$ultra-large-screen : 1920px; // ultra large screens
// misc (choose unit you prefer)
$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 */
/* ----------------------------- */
@media (min-width: $medium-screen) {
@media (min-width: ($medium-screen + 1)) {
/* rules for big resources and big screens like: background-images, font-faces, etc. */
}
@ -14,7 +14,7 @@
/* ==Responsive large */
/* ---------------------------------- */
@media (min-width: $large-screen) {
@media (min-width: ($medium-screen + 1)) {
/* layouts for large screens */
.large-hidden {
@ -104,7 +104,7 @@
/* ==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 */
.medium-hidden {
@ -176,7 +176,7 @@
/* ==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 */
.mod,
@ -295,7 +295,7 @@
/* ==Responsive tiny */
/* ---------------------------------- */
@media (max-width: $tiny-screen) and (max-width: ($small-screen - 1)) {
@media (max-width: $tiny-screen) {
.w300p,
.w400p,