helpers mobile-first

This commit is contained in:
Raphael Goetter 2016-05-24 16:45:47 +02:00
parent ac72df52e8
commit bb552d078f
8 changed files with 64 additions and 87 deletions

View file

@ -1,6 +1,6 @@
{ {
"name": "KNACSS", "name": "KNACSS",
"version": "5.0.0", "version": "5.0.1",
"homepage": "http://www.knacss.com/", "homepage": "http://www.knacss.com/",
"authors": [ "authors": [
"Raphaël GOETTER, Alsacreations" "Raphaël GOETTER, Alsacreations"

View file

@ -1,3 +1,6 @@
# changelog v5.0.1 (24 mai 2016)
- les helpers de largeurs deviennent mobile-first et ne s'activent que sur écran d'une certaine taille. Ex. `.w700p {width: 700px;}` devient `@include media('>640px') {.w700p {width: 700px;}}`. Ainsi il n'est plus nécessaire de les écraser dans la feuille de style responsive.
# changelog v5.0.0 (23 mai 2016) # changelog v5.0.0 (23 mai 2016)
- suppression du support IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge) - suppression du support IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
- suppression du support LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge pour des raisons de maintenabilité) - suppression du support LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge pour des raisons de maintenabilité)

View file

@ -1,6 +1,6 @@
@charset "UTF-8"; @charset "UTF-8";
/*! /*!
* www.KNACSS.com V5.0.0 (23 mai 2016) @author: Raphael Goetter, Alsacreations * www.KNACSS.com V5.0.1 (24 mai 2016) @author: Alsacreations, Raphael Goetter
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */
/* ----------------------------- */ /* ----------------------------- */
@ -1268,32 +1268,29 @@ ul.unstyled {
.w300p { .w300p {
width: 300px; } width: 300px; }
@media (min-width: 400px) {
.w400p { .w400p {
width: 400px; } width: 400px; }
.w500p { .w500p {
width: 500px; } width: 500px; }
.w600p { .w600p {
width: 600px; } width: 600px; } }
@media (min-width: 700px) {
.w700p { .w700p {
width: 700px; } width: 700px; }
.w800p { .w800p {
width: 800px; } width: 800px; } }
@media (min-width: 960px) {
.w960p { .w960p {
width: 960px; } width: 960px; }
.mw960p { .mw960p {
max-width: 960px; } max-width: 960px; }
.w1140p { .w1140p {
width: 1140px; } width: 1140px; }
.mw1140p { .mw1140p {
max-width: 1140px; } max-width: 1140px; } }
.wauto { .wauto {
width: auto; } width: auto; }
@ -1543,14 +1540,6 @@ ul.unstyled {
/* small screens */ /* small screens */
/* ------------- */ /* ------------- */
@media (min-width: 640px) and (max-width: 959px) { @media (min-width: 640px) and (max-width: 959px) {
/* quick reset in small resolution and less */
.w600p,
.w700p,
.w800p,
.w960p,
.mw960p {
width: auto;
float: none; }
/* layouts for small screens */ /* layouts for small screens */
.small-hidden { .small-hidden {
display: none !important; } display: none !important; }
@ -1617,11 +1606,6 @@ ul.unstyled {
-webkit-flex-direction: column; -webkit-flex-direction: column;
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: column; } flex-direction: column; }
.w300p,
.w400p,
.w500p {
width: auto;
float: none; }
.row { .row {
display: block !important; display: block !important;
width: 100% !important; } width: 100% !important; }

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,6 @@
{ {
"name": "knacss", "name": "knacss",
"version": "5.0.0", "version": "5.0.1",
"homepage": "http://www.knacss.com/", "homepage": "http://www.knacss.com/",
"bugs": "https://github.com/alsacreations/KNACSS/issues", "bugs": "https://github.com/alsacreations/KNACSS/issues",
"author": [ "author": [

View file

@ -116,6 +116,7 @@ ul.unstyled {
width: 300px; width: 300px;
} }
@include media('>=400px') {
.#{$kna-namespace}w400p { .#{$kna-namespace}w400p {
width: 400px; width: 400px;
} }
@ -127,6 +128,9 @@ ul.unstyled {
.#{$kna-namespace}w600p { .#{$kna-namespace}w600p {
width: 600px; width: 600px;
} }
}
@include media('>=700px') {
.#{$kna-namespace}w700p { .#{$kna-namespace}w700p {
width: 700px; width: 700px;
@ -135,7 +139,9 @@ ul.unstyled {
.#{$kna-namespace}w800p { .#{$kna-namespace}w800p {
width: 800px; width: 800px;
} }
}
@include media('>=960px') {
.#{$kna-namespace}w960p { .#{$kna-namespace}w960p {
width: 960px; width: 960px;
} }
@ -151,6 +157,7 @@ ul.unstyled {
.#{$kna-namespace}mw1140p { .#{$kna-namespace}mw1140p {
max-width: 1140px; max-width: 1140px;
} }
}
.#{$kna-namespace}wauto { .#{$kna-namespace}wauto {
width: auto; width: auto;

View file

@ -153,16 +153,6 @@
@include media('>=small-screen', '<medium-screen') { @include media('>=small-screen', '<medium-screen') {
/* quick reset in small resolution and less */
.#{$kna-namespace}w600p,
.#{$kna-namespace}w700p,
.#{$kna-namespace}w800p,
.#{$kna-namespace}w960p,
.#{$kna-namespace}mw960p {
width: auto;
float: none;
}
/* layouts for small screens */ /* layouts for small screens */
.#{$kna-namespace}small-hidden { .#{$kna-namespace}small-hidden {
display: none !important; display: none !important;
@ -260,13 +250,6 @@
flex-direction: column; flex-direction: column;
} }
.#{$kna-namespace}w300p,
.#{$kna-namespace}w400p,
.#{$kna-namespace}w500p {
width: auto;
float: none;
}
.#{$kna-namespace}row { .#{$kna-namespace}row {
display: block !important; display: block !important;
width: 100% !important; width: 100% !important;

View file

@ -1,5 +1,5 @@
/*! /*!
* www.KNACSS.com V5.0.0 (23 mai 2016) @author: Raphael Goetter, Alsacreations * www.KNACSS.com V5.0.1 (24 mai 2016) @author: Alsacreations, Raphael Goetter
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */