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

modify media queries

Browse source
This commit is contained in:
Raphael Goetter 2015-03-07 14:53:44 +01:00
parent 8a52e30506
commit 088e68cb4f
5 changed files with 160 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
css/knacss-unminified.css
View file

@ -1209,18 +1209,6 @@ s,m,l,n = small, medium, large, none
/* ==Responsive small */ /* ==Responsive small */
/* ---------------------------------- */ /* ---------------------------------- */
@media (min-width: 481px) and (max-width: 768px) { @media (min-width: 481px) and (max-width: 768px) {
/* 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,
@ -1312,6 +1300,18 @@ s,m,l,n = small, medium, large, none
/* ==Responsive tiny */ /* ==Responsive tiny */
/* ---------------------------------- */ /* ---------------------------------- */
@media (max-width: 480px) { @media (max-width: 480px) {
/* 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 {

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

18
doc/02a-layout-alignements.md
View file

@ -40,7 +40,23 @@ HTML :
### Centrer verticalement ### Centrer verticalement
HTML : ![centrer verticalement](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/02-layout.png)
Version table-cell (HTML) :
```html
<section class="col">
<div class="w50 center">centré horizontalement et verticalement</div>
</section>
```
Version table-cell (CSS) :
```css
section {
vertical-align: middle;
}
```
Version flexbox (HTML):
```html ```html
<section class="flexbox-v"> <section class="flexbox-v">
<div class="center w50">centré horizontalement et verticalement</div> <div class="center w50">centré horizontalement et verticalement</div>

134
less/_07-responsive.less
View file

@ -20,27 +20,27 @@
.large-hidden { .large-hidden {
display: none !important; display: none !important;
} }
.large-visible { .large-visible {
display: block !important; display: block !important;
} }
.large-no-float { .large-no-float {
float: none; float: none;
} }
.large-inbl { .large-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
vertical-align: top; vertical-align: top;
} }
.large-row { .large-row {
display: table; display: table;
table-layout: fixed; table-layout: fixed;
width: 100% !important; width: 100% !important;
} }
.large-col { .large-col {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: top;
@ -50,23 +50,23 @@
.large-w25 { .large-w25 {
width: 25% !important; width: 25% !important;
} }
.large-w33 { .large-w33 {
width: 33.3333% !important; width: 33.3333% !important;
} }
.large-w50 { .large-w50 {
width: 50% !important; width: 50% !important;
} }
.large-w66 { .large-w66 {
width: 66.6666% !important; width: 66.6666% !important;
} }
.large-w75 { .large-w75 {
width: 75% !important; width: 75% !important;
} }
.large-w100, .large-w100,
.large-wauto { .large-wauto {
display: block !important; display: block !important;
@ -94,27 +94,27 @@
.medium-hidden { .medium-hidden {
display: none !important; display: none !important;
} }
.medium-visible { .medium-visible {
display: block !important; display: block !important;
} }
.medium-no-float { .medium-no-float {
float: none; float: none;
} }
.medium-inbl { .medium-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
vertical-align: top; vertical-align: top;
} }
.medium-row { .medium-row {
display: table; display: table;
table-layout: fixed; table-layout: fixed;
width: 100% !important; width: 100% !important;
} }
.medium-col { .medium-col {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: top;
@ -124,23 +124,23 @@
.medium-w25 { .medium-w25 {
width: 25% !important; width: 25% !important;
} }
.medium-w33 { .medium-w33 {
width: 33.3333% !important; width: 33.3333% !important;
} }
.medium-w50 { .medium-w50 {
width: 50% !important; width: 50% !important;
} }
.medium-w66 { .medium-w66 {
width: 66.6666% !important; width: 66.6666% !important;
} }
.medium-w75 { .medium-w75 {
width: 75% !important; width: 75% !important;
} }
.medium-w100, .medium-w100,
.medium-wauto { .medium-wauto {
display: block !important; display: block !important;
@ -164,19 +164,6 @@
/* ---------------------------------- */ /* ---------------------------------- */
@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) { @media (min-width: (@tiny-screen + 1)) and (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,
@ -192,27 +179,27 @@
.small-hidden { .small-hidden {
display: none !important; display: none !important;
} }
.small-visible { .small-visible {
display: block !important; display: block !important;
} }
.small-no-float { .small-no-float {
float: none; float: none;
} }
.small-inbl { .small-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
vertical-align: top; vertical-align: top;
} }
.small-row { .small-row {
display: table !important; display: table !important;
table-layout: fixed !important; table-layout: fixed !important;
width: 100% !important; width: 100% !important;
} }
.small-col { .small-col {
display: table-cell !important; display: table-cell !important;
vertical-align: top !important; vertical-align: top !important;
@ -222,23 +209,23 @@
.small-w25 { .small-w25 {
width: 25% !important; width: 25% !important;
} }
.small-w33 { .small-w33 {
width: 33.3333% !important; width: 33.3333% !important;
} }
.small-w50 { .small-w50 {
width: 50% !important; width: 50% !important;
} }
.small-w66 { .small-w66 {
width: 66.6666% !important; width: 66.6666% !important;
} }
.small-w75 { .small-w75 {
width: 75% !important; width: 75% !important;
} }
.small-w100, .small-w100,
.small-wauto { .small-wauto {
display: block !important; display: block !important;
@ -249,18 +236,18 @@
margin-right: 0 !important; margin-right: 0 !important;
border: 0; border: 0;
} }
/* margins for small screens */ /* margins for small screens */
.small-man, .small-man,
.small-ma0 { .small-ma0 {
margin: 0 !important; margin: 0 !important;
} }
.small-pan, .small-pan,
.small-pa0 { .small-pa0 {
padding: 0 !important; padding: 0 !important;
} }
/* grid rwd for small screens */ /* grid rwd for small screens */
.grid3 > *, .grid3 > *,
.grid4 > *, .grid4 > *,
@ -271,7 +258,7 @@
.grid12 > * { .grid12 > * {
width: 50%; width: 50%;
} }
/* autogrid rwd for small screens */ /* autogrid rwd for small screens */
.autogrid5 > *, .autogrid5 > *,
.autogrid6 > *, .autogrid6 > *,
@ -287,14 +274,27 @@
/* ---------------------------------- */ /* ---------------------------------- */
@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 {
width: auto; width: auto;
float: none; float: none;
} }
.row { .row {
display: block !important; display: block !important;
width: 100% !important; width: 100% !important;
@ -304,39 +304,39 @@
.tiny-hidden { .tiny-hidden {
display: none !important; display: none !important;
} }
.tiny-visible { .tiny-visible {
display: block !important; display: block !important;
} }
.tiny-no-float { .tiny-no-float {
float: none; float: none;
} }
.tiny-inbl { .tiny-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
vertical-align: top; vertical-align: top;
} }
.tiny-row { .tiny-row {
display: table !important; display: table !important;
table-layout: fixed !important; table-layout: fixed !important;
width: 100% !important; width: 100% !important;
} }
.tiny-col { .tiny-col {
display: table-cell !important; display: table-cell !important;
vertical-align: top !important; vertical-align: top !important;
} }
th, th,
td { td {
display: block !important; display: block !important;
width: auto !important; width: auto !important;
text-align: left !important; text-align: left !important;
} }
thead { thead {
display: none; display: none;
} }
@ -345,23 +345,23 @@
.tiny-w25 { .tiny-w25 {
width: 25% !important; width: 25% !important;
} }
.tiny-w33 { .tiny-w33 {
width: 33.3333% !important; width: 33.3333% !important;
} }
.tiny-w50 { .tiny-w50 {
width: 50% !important; width: 50% !important;
} }
.tiny-w66 { .tiny-w66 {
width: 66.6666% !important; width: 66.6666% !important;
} }
.tiny-w75 { .tiny-w75 {
width: 75% !important; width: 75% !important;
} }
.tiny-w100, .tiny-w100,
.tiny-wauto { .tiny-wauto {
display: block !important; display: block !important;
@ -372,23 +372,23 @@
margin-right: 0 !important; margin-right: 0 !important;
border: 0; border: 0;
} }
/* margins for tiny screens */ /* margins for tiny screens */
.tiny-man, .tiny-man,
.tiny-ma0 { .tiny-ma0 {
margin: 0 !important; margin: 0 !important;
} }
.tiny-pan, .tiny-pan,
.tiny-pa0 { .tiny-pa0 {
padding: 0 !important; padding: 0 !important;
} }
/* grid rwd for tiny screens */ /* grid rwd for tiny screens */
.grid > * > * { .grid > * > * {
width: 100% !important; width: 100% !important;
} }
/* autogrid rwd for tiny screens */ /* autogrid rwd for tiny screens */
[class*="autogrid"] > * { [class*="autogrid"] > * {
width: 100% !important; width: 100% !important;

126
sass/_07-responsive.scss
View file

@ -20,15 +20,15 @@
.large-hidden { .large-hidden {
display: none !important; display: none !important;
} }
.large-visible { .large-visible {
display: block !important; display: block !important;
} }
.large-no-float { .large-no-float {
float: none; float: none;
} }
.large-inbl { .large-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
@ -48,23 +48,23 @@
.large-w25 { .large-w25 {
width: 25% !important; width: 25% !important;
} }
.large-w33 { .large-w33 {
width: 33.3333% !important; width: 33.3333% !important;
} }
.large-w50 { .large-w50 {
width: 50% !important; width: 50% !important;
} }
.large-w66 { .large-w66 {
width: 66.6666% !important; width: 66.6666% !important;
} }
.large-w75 { .large-w75 {
width: 75% !important; width: 75% !important;
} }
.large-w100, .large-w100,
.large-wauto { .large-wauto {
display: block !important; display: block !important;
@ -93,27 +93,27 @@
.medium-hidden { .medium-hidden {
display: none !important; display: none !important;
} }
.medium-visible { .medium-visible {
display: block !important; display: block !important;
} }
.medium-no-float { .medium-no-float {
float: none; float: none;
} }
.medium-inbl { .medium-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
vertical-align: top; vertical-align: top;
} }
.medium-row { .medium-row {
display: table; display: table;
table-layout: fixed; table-layout: fixed;
width: 100% !important; width: 100% !important;
} }
.medium-col { .medium-col {
display: table-cell; display: table-cell;
vertical-align: top; vertical-align: top;
@ -123,23 +123,23 @@
.medium-w25 { .medium-w25 {
width: 25% !important; width: 25% !important;
} }
.medium-w33 { .medium-w33 {
width: 33.3333% !important; width: 33.3333% !important;
} }
.medium-w50 { .medium-w50 {
width: 50% !important; width: 50% !important;
} }
.medium-w66 { .medium-w66 {
width: 66.6666% !important; width: 66.6666% !important;
} }
.medium-w75 { .medium-w75 {
width: 75% !important; width: 75% !important;
} }
.medium-w100, .medium-w100,
.medium-wauto { .medium-wauto {
display: block !important; display: block !important;
@ -163,19 +163,6 @@
/* ---------------------------------- */ /* ---------------------------------- */
@media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) { @media (min-width: ($tiny-screen + 1)) and (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,
@ -191,27 +178,27 @@
.small-hidden { .small-hidden {
display: none !important; display: none !important;
} }
.small-visible { .small-visible {
display: block !important; display: block !important;
} }
.small-no-float { .small-no-float {
float: none; float: none;
} }
.small-inbl { .small-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
vertical-align: top; vertical-align: top;
} }
.small-row { .small-row {
display: table !important; display: table !important;
table-layout: fixed !important; table-layout: fixed !important;
width: 100% !important; width: 100% !important;
} }
.small-col { .small-col {
display: table-cell !important; display: table-cell !important;
vertical-align: top !important; vertical-align: top !important;
@ -221,23 +208,23 @@
.small-w25 { .small-w25 {
width: 25% !important; width: 25% !important;
} }
.small-w33 { .small-w33 {
width: 33.3333% !important; width: 33.3333% !important;
} }
.small-w50 { .small-w50 {
width: 50% !important; width: 50% !important;
} }
.small-w66 { .small-w66 {
width: 66.6666% !important; width: 66.6666% !important;
} }
.small-w75 { .small-w75 {
width: 75% !important; width: 75% !important;
} }
.small-w100, .small-w100,
.small-wauto { .small-wauto {
display: block !important; display: block !important;
@ -248,18 +235,18 @@
margin-right: 0 !important; margin-right: 0 !important;
border: 0; border: 0;
} }
/* margins for small screens */ /* margins for small screens */
.small-man, .small-man,
.small-ma0 { .small-ma0 {
margin: 0 !important; margin: 0 !important;
} }
.small-pan, .small-pan,
.small-pa0 { .small-pa0 {
padding: 0 !important; padding: 0 !important;
} }
/* grid rwd for small screens */ /* grid rwd for small screens */
.grid3 > *, .grid3 > *,
.grid4 > *, .grid4 > *,
@ -270,7 +257,7 @@
.grid12 > * { .grid12 > * {
width: 50%; width: 50%;
} }
/* autogrid rwd for small screens */ /* autogrid rwd for small screens */
.autogrid5 > *, .autogrid5 > *,
.autogrid6 > *, .autogrid6 > *,
@ -286,14 +273,27 @@
/* ---------------------------------- */ /* ---------------------------------- */
@media (max-width: $tiny-screen) { @media (max-width: $tiny-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;
}
.w300p, .w300p,
.w400p, .w400p,
.w500p { .w500p {
width: auto; width: auto;
float: none; float: none;
} }
.row { .row {
display: block !important; display: block !important;
width: 100% !important; width: 100% !important;
@ -303,39 +303,39 @@
.tiny-hidden { .tiny-hidden {
display: none !important; display: none !important;
} }
.tiny-visible { .tiny-visible {
display: block !important; display: block !important;
} }
.tiny-no-float { .tiny-no-float {
float: none; float: none;
} }
.tiny-inbl { .tiny-inbl {
display: inline-block; display: inline-block;
float: none; float: none;
vertical-align: top; vertical-align: top;
} }
.tiny-row { .tiny-row {
display: table !important; display: table !important;
table-layout: fixed !important; table-layout: fixed !important;
width: 100% !important; width: 100% !important;
} }
.tiny-col { .tiny-col {
display: table-cell !important; display: table-cell !important;
vertical-align: top !important; vertical-align: top !important;
} }
th, th,
td { td {
display: block !important; display: block !important;
width: auto !important; width: auto !important;
text-align: left !important; text-align: left !important;
} }
thead { thead {
display: none; display: none;
} }
@ -344,23 +344,23 @@
.tiny-w25 { .tiny-w25 {
width: 25% !important; width: 25% !important;
} }
.tiny-w33 { .tiny-w33 {
width: 33.3333% !important; width: 33.3333% !important;
} }
.tiny-w50 { .tiny-w50 {
width: 50% !important; width: 50% !important;
} }
.tiny-w66 { .tiny-w66 {
width: 66.6666% !important; width: 66.6666% !important;
} }
.tiny-w75 { .tiny-w75 {
width: 75% !important; width: 75% !important;
} }
.tiny-w100, .tiny-w100,
.tiny-wauto { .tiny-wauto {
display: block !important; display: block !important;
@ -371,23 +371,23 @@
margin-right: 0 !important; margin-right: 0 !important;
border: 0; border: 0;
} }
/* margins for tiny screens */ /* margins for tiny screens */
.tiny-man, .tiny-man,
.tiny-ma0 { .tiny-ma0 {
margin: 0 !important; margin: 0 !important;
} }
.tiny-pan, .tiny-pan,
.tiny-pa0 { .tiny-pa0 {
padding: 0 !important; padding: 0 !important;
} }
/* grid rwd for tiny screens */ /* grid rwd for tiny screens */
.grid > * > * { .grid > * > * {
width: 100% !important; width: 100% !important;
} }
/* autogrid rwd for tiny screens */ /* autogrid rwd for tiny screens */
[class*="autogrid"] > * { [class*="autogrid"] > * {
width: 100% !important; width: 100% !important;