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>

26
less/_07-responsive.less
View file

@ -165,19 +165,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,
.w700p, .w700p,
@ -288,6 +275,19 @@
@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 {

26
sass/_07-responsive.scss
View file

@ -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,
.w700p, .w700p,
@ -287,6 +274,19 @@
@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 {