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

3.06 grids and autogrids RWD fixes

Browse source
This commit is contained in:
raphaelgoettter 2014-08-19 13:19:37 +02:00
parent 521e568e23
commit 37d96bcd78
8 changed files with 128 additions and 137 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.5", "version": "3.0.6",
"homepage": "http://www.knacss.com/", "homepage": "http://www.knacss.com/",
"authors": [ "authors": [
"Raphaël GOETTER, Alsacreations" "Raphaël GOETTER, Alsacreations"

4
css/knacss.css
View file

File diff suppressed because one or more lines are too long

2
less/_01-base.less
View file

@ -1,5 +1,5 @@
/*! /*!
* www.KNACSS.com V3.0.5 (2014-07-10) @author: Raphael Goetter, Alsacreations * www.KNACSS.com V3.0.6 (2014-08-19) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */

53
less/_02-grids.less
View file

@ -100,33 +100,6 @@
width: 75%; width: 75%;
} }
/* Responsiv-o-matic */
@media (max-width: @large-screen) {
.grid5 > *,
.grid6 > *,
.grid8 > *,
.grid10 > *,
.grid12 > * {
width: 33.333%;
}
}
@media (max-width: @small-screen) {
.grid3 > *,
.grid4 > *,
.grid5 > *,
.grid6 > *,
.grid8 > *,
.grid10 > *,
.grid12 > * {
width: 50%;
}
}
@media (max-width: @tiny-screen) {
.grid > * > * {
width: 100% !important;
}
}
/* ---------------------------------- */ /* ---------------------------------- */
/* ==autogrids */ /* ==autogrids */
/* .. to automatically justify blocs */ /* .. to automatically justify blocs */
@ -200,29 +173,3 @@
.autogrid12 > * { .autogrid12 > * {
width: 6.4%; width: 6.4%;
} }
@media (max-width: @large-screen) {
.autogrid5 > *,
.autogrid6 > *,
.autogrid8 > *,
.autogrid10 > *,
.autogrid12 > * {
width: 32%;
}
}
@media (max-width: @small-screen) {
.autogrid5 > *,
.autogrid6 > *,
.autogrid8 > *,
.autogrid10 > *,
.autogrid12 > * {
width: 49%;
}
}
@media (max-width: @tiny-screen) {
[class*="autogrid"] > * {
width: 100%;
}
}

75
less/_06-rwd.less
View file

@ -80,10 +80,41 @@
.large-man { .large-man {
margin: 0 !important; margin: 0 !important;
} }
/* grid rwd for large screens */
.grid5 > *,
.grid6 > *,
.grid8 > *,
.grid10 > *,
.grid12 > * {
width: 33.333%;
}
/* autogrid rwd for large screens */
.autogrid5 > *,
.autogrid6 > *,
.autogrid8 > *,
.autogrid10 > *,
.autogrid12 > * {
width: 32%;
}
} }
@media (max-width: @small-screen) { @media (max-width: @small-screen) {
/* quick small resolution reset */
.mod,
.col,
fieldset {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0;
}
/* quick reset in small resolution and less */ /* quick reset in small resolution and less */
.w600p, .w600p,
.w700p, .w700p,
@ -162,23 +193,30 @@
.small-pan { .small-pan {
padding: 0 !important; padding: 0 !important;
} }
/* grid rwd for small screens */
.grid3 > *,
.grid4 > *,
.grid5 > *,
.grid6 > *,
.grid8 > *,
.grid10 > *,
.grid12 > * {
width: 50%;
}
/* autogrid rwd for small screens */
.autogrid5 > *,
.autogrid6 > *,
.autogrid8 > *,
.autogrid10 > *,
.autogrid12 > * {
width: 49% !important;
}
} }
@media (max-width: @tiny-screen) { @media (max-width: @tiny-screen) {
/* quick tiny resolution reset */
.mod,
.col,
fieldset {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0;
}
.w300p, .w300p,
.w400p, .w400p,
.w500p { .w500p {
@ -272,4 +310,15 @@
.tiny-pan { .tiny-pan {
padding: 0 !important; padding: 0 !important;
} }
/* grid rwd for tiny screens */
.grid > * > * {
width: 100% !important;
}
/* autogrid rwd for tiny screens */
[class*="autogrid"] > * {
width: 100% !important;
}
} }

2
sass/_01-base.scss
View file

@ -1,5 +1,5 @@
/*! /*!
* www.KNACSS.com V3.0.5 (2014-07-10) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel) * www.KNACSS.com V3.0.6 (2014-08-19) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel)
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */

53
sass/_02-grids.scss
View file

@ -100,33 +100,6 @@
width: 75%; width: 75%;
} }
/* Responsiv-o-matic */
@media (max-width: $large-screen) {
.grid5 > *,
.grid6 > *,
.grid8 > *,
.grid10 > *,
.grid12 > * {
width: 33.333%;
}
}
@media (max-width: $small-screen) {
.grid3 > *,
.grid4 > *,
.grid5 > *,
.grid6 > *,
.grid8 > *,
.grid10 > *,
.grid12 > * {
width: 50%;
}
}
@media (max-width: $tiny-screen) {
.grid > * > * {
width: 100% !important;
}
}
/* ---------------------------------- */ /* ---------------------------------- */
/* ==autogrids */ /* ==autogrids */
/* .. to automatically justify blocs */ /* .. to automatically justify blocs */
@ -200,29 +173,3 @@
.autogrid12 > * { .autogrid12 > * {
width: 6.4%; width: 6.4%;
} }
@media (max-width: $large-screen) {
.autogrid5 > *,
.autogrid6 > *,
.autogrid8 > *,
.autogrid10 > *,
.autogrid12 > * {
width: 32%;
}
}
@media (max-width: $small-screen) {
.autogrid5 > *,
.autogrid6 > *,
.autogrid8 > *,
.autogrid10 > *,
.autogrid12 > * {
width: 49%;
}
}
@media (max-width: $tiny-screen) {
[class*="autogrid"] > * {
width: 100%;
}
}

74
sass/_06-rwd.scss
View file

@ -80,10 +80,41 @@
.large-man { .large-man {
margin: 0 !important; margin: 0 !important;
} }
/* grid rwd for large screens */
.grid5 > *,
.grid6 > *,
.grid8 > *,
.grid10 > *,
.grid12 > * {
width: 33.333%;
}
/* autogrid rwd for large screens */
.autogrid5 > *,
.autogrid6 > *,
.autogrid8 > *,
.autogrid10 > *,
.autogrid12 > * {
width: 32%;
}
} }
@media (max-width: $small-screen) { @media (max-width: $small-screen) {
/* quick small resolution reset */
.mod,
.col,
fieldset {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0;
}
/* quick reset in small resolution and less */ /* quick reset in small resolution and less */
.w600p, .w600p,
.w700p, .w700p,
@ -162,23 +193,30 @@
.small-pan { .small-pan {
padding: 0 !important; padding: 0 !important;
} }
/* grid rwd for small screens */
.grid3 > *,
.grid4 > *,
.grid5 > *,
.grid6 > *,
.grid8 > *,
.grid10 > *,
.grid12 > * {
width: 50%;
}
/* autogrid rwd for small screens */
.autogrid5 > *,
.autogrid6 > *,
.autogrid8 > *,
.autogrid10 > *,
.autogrid12 > * {
width: 49% !important;
}
} }
@media (max-width: $tiny-screen) { @media (max-width: $tiny-screen) {
/* quick tiny resolution reset */
.mod,
.col,
fieldset {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0;
}
.w300p, .w300p,
.w400p, .w400p,
.w500p { .w500p {
@ -270,4 +308,14 @@
.tiny-pan { .tiny-pan {
padding: 0 !important; padding: 0 !important;
} }
/* grid rwd for tiny screens */
.grid > * > * {
width: 100% !important;
}
/* autogrid rwd for tiny screens */
[class*="autogrid"] > * {
width: 100% !important;
}
} }