helpers mobile-first
This commit is contained in:
parent
ac72df52e8
commit
bb552d078f
8 changed files with 64 additions and 87 deletions
|
@ -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"
|
||||||
|
|
|
@ -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é)
|
||||||
|
|
|
@ -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
|
@ -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": [
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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/
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue