KNACSS/doc/07-responsive.md

199 lines
4.7 KiB
Markdown
Raw Normal View History

2015-03-09 16:05:06 +01:00
# Responsive Webdesign
## Points de rupture
Par défaut, KNACSS tient compte des valeurs de points de rupture suivants :
Ajout de classes helpers // spacings (choose unit you prefer) @tiny-value : .5rem; // tiny value for margins / paddings @tiny-plus-value : .7rem; // tiny+ value for margins / paddings @small-value : 1rem; // small value for margins / paddings @small-plus-value : 1.5rem; // small+ value for margins / paddings @medium-value : 2rem; // medium value for margins / paddings @medium-plus-value : 3rem; // medium+ value for margins / paddings @large-value : 4rem; // large value for margins / paddings @large-plus-value : 6rem; // large value for margins / paddings @extra-large-value : 8rem; // extra large value for margins / paddings @extra-large-plus-value : 12rem; // extra large value for margins / paddings @ultra-large-value : 16rem; // ultra large value for margins / paddings @ultra-large-plus-value : 20rem; // ultra large value for margins / paddings // breakpoints (choose unit you prefer) @tiny-screen : 320px; // tiny screens media query (less-equal than 320px) @tiny-plus-screen : 480px; // screens between 321px and 480px @small-screen : 640px; // screens between 481px and 640px @small-plus-screen : 768px; // screens between 641px and 768px @medium-screen : 960px; // screens between 769px and 960px @medium-plus-screen : 1024px; // screens between 961px and 1024px @large-screen : 1280px; // screens between 1025px and 1280px @large-plus-screen : 1440px; // screens between 1281px and 1440px @extra-large-screen : 1600px; // screens between 1441px and 1600px @ultra-large-screen : 1920px; // ultra large screens
2015-07-08 15:19:43 +02:00
```
// breakpoints (choose unit you prefer)
2017-02-07 11:59:17 +01:00
$tiny: 543px !default; // or 'em' if you prefer, of course
$small: 767px !default;
$medium: 991px !default;
$large: 1199px !default;
$extra-large: 1439px !default;
Ajout de classes helpers // spacings (choose unit you prefer) @tiny-value : .5rem; // tiny value for margins / paddings @tiny-plus-value : .7rem; // tiny+ value for margins / paddings @small-value : 1rem; // small value for margins / paddings @small-plus-value : 1.5rem; // small+ value for margins / paddings @medium-value : 2rem; // medium value for margins / paddings @medium-plus-value : 3rem; // medium+ value for margins / paddings @large-value : 4rem; // large value for margins / paddings @large-plus-value : 6rem; // large value for margins / paddings @extra-large-value : 8rem; // extra large value for margins / paddings @extra-large-plus-value : 12rem; // extra large value for margins / paddings @ultra-large-value : 16rem; // ultra large value for margins / paddings @ultra-large-plus-value : 20rem; // ultra large value for margins / paddings // breakpoints (choose unit you prefer) @tiny-screen : 320px; // tiny screens media query (less-equal than 320px) @tiny-plus-screen : 480px; // screens between 321px and 480px @small-screen : 640px; // screens between 481px and 640px @small-plus-screen : 768px; // screens between 641px and 768px @medium-screen : 960px; // screens between 769px and 960px @medium-plus-screen : 1024px; // screens between 961px and 1024px @large-screen : 1280px; // screens between 1025px and 1280px @large-plus-screen : 1440px; // screens between 1281px and 1440px @extra-large-screen : 1600px; // screens between 1441px and 1600px @ultra-large-screen : 1920px; // ultra large screens
2015-07-08 15:19:43 +02:00
```
2015-03-09 16:05:06 +01:00
_Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._
2016-09-21 11:52:46 +02:00
## Convention d'écriture
### Choix des valeurs de breakpoints
1. Choisir principalement des valeurs de breakpoints selon votre design, pas par rapport à des devices (se servir des variables de breakpoints fournies si l'on ne peut pas se baser sur son design)
2. En plus de vos propres valeurs, il est possible d'employer :
- les variables fournies (`$tiny`, `$small`, `$medium`, `$large`),
2017-02-07 11:59:17 +01:00
- mais aussi des alias qui représentent des intervalles et que l'on utilise sous forme de mixins (voi plus bas)
2016-09-21 11:52:46 +02:00
3. Éviter de multiplier les valeurs. Un maximum de 5 ou 6 breakpoints devrait suffire dans la grande majorité des projets
2017-02-07 12:01:31 +01:00
4. **Pour éviter les intervalles qui se chevauchent, ou des Media Queries trop variés, adopter la convention suivante pour définir les intervalles :
`(max-width: $BP) and (min-width: ($BP + 1))`**
2016-09-21 11:52:46 +02:00
Exemple :
Non, pas bien :
```
2017-02-07 11:59:17 +01:00
@media (min-width: 767px) {...}
@media (max-width: 768px) {...}
2016-09-21 11:52:46 +02:00
```
Oui, bien :
```
2017-02-07 11:59:17 +01:00
@media (min-width: 768px) {...}
@media (max-width: 767px) {...}
2016-09-21 11:52:46 +02:00
@media (max-width: $small-screen) {...}
@media (min-width: $small-screen + 1) and (max-width: $large-screen) {...}
```
## Mixins "Alias"
2017-02-07 11:59:17 +01:00
En addition aux variables, des mixins de breakpoints "utilitaires" (des "alias" des valeurs précédentes) liées aux tailles de devices (forcément indicatifs, mais simples à retenir) sont prévues.
Les mixins sont activés à l'aide de l'instruction `respond-to()`. Exemple d'usage :
2016-09-21 11:52:46 +02:00
2017-02-07 11:59:17 +01:00
```
// styles
.when-tablet-up {
@include respond-to("small-up") {
background: green;
color: #fff;
}
}
.is-hidden-mobile {
@include respond-to("tiny") {
display: none;
}
}
```
2016-09-21 11:52:46 +02:00
```
// Additionnal "utility" breakpoints aliases
2017-02-07 11:59:17 +01:00
// ex. @include respond-to("medium-up") {...}
2016-09-21 11:52:46 +02:00
@function breakpoint($bp) {
2017-02-07 11:59:17 +01:00
@if $bp == 'tiny' {
2016-09-21 11:52:46 +02:00
@return '(max-width: #{$tiny})';
}
2017-02-07 11:59:17 +01:00
@else if $bp == 'small' {
@return '(max-width: #{$small})';
2016-09-21 11:52:46 +02:00
}
2017-02-07 11:59:17 +01:00
@else if $bp == 'medium' {
@return '(max-width: #{$medium})';
2016-09-21 11:52:46 +02:00
}
2017-02-07 11:59:17 +01:00
@else if $bp == 'large' {
@return '(max-width: #{$large})';
2016-09-21 11:52:46 +02:00
}
2017-02-07 11:59:17 +01:00
@else if $bp == 'extra-large' {
@return '(max-width: #{$extra-large})';
2016-09-21 11:52:46 +02:00
}
2017-02-07 11:59:17 +01:00
@else if $bp == 'tiny-up' {
2016-09-21 11:52:46 +02:00
@return '(min-width: #{$tiny + 1})';
}
2017-02-07 11:59:17 +01:00
@else if $bp == 'small-up' {
2016-09-21 11:52:46 +02:00
@return '(min-width: #{$small + 1})';
}
2017-02-07 11:59:17 +01:00
@else if $bp == 'medium-up' {
@return '(min-width: #{$medium + 1})';
}
@else if $bp == 'large-up' {
@return '(min-width: #{$large + 1})';
}
@else if $bp == 'extra-large-up' {
@return '(min-width: #{$extra-large + 1})';
}
2016-09-21 11:52:46 +02:00
@else if $bp == 'retina' {
@return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)';
}
}
@mixin respond-to($value) {
$string: breakpoint($value);
@media screen and #{$string} {
@content;
}
}
```
Voir le CodePen : http://codepen.io/raphaelgoetter/pen/EyRwAp/?editors=1100
2015-03-09 16:05:06 +01:00
## Préfixes de classe
Pour les points de rupture "large", "medium", "small" et "tiny", des préfixes de classes ont été introduits dans KNACSS :
- `.large-*` : préfixe KNACSS destiné aux styles sur écrans larges
- `.medium-*` : préfixe KNACSS destiné aux styles sur écrans medium
- `.small-*` : préfixe KNACSS destiné aux styles sur écrans small
- `.tiny-*` : préfixe KNACSS destiné aux styles sur écrans tiny
### Exemple : le point de rupture "tiny"
Voici quelques-unes des classes dédiées aux écrans de très petite taille… Le mot-clé `!important` est nécessaire pour être certain que les styles écrasent bien les styles appliqués par défaut.
Masquage / visibilité :
```css
.tiny-hidden {
display: none !important;
}
.tiny-visible {
display: block !important;
}
```
Modèles d'affichage :
```css
.tiny-no-float {
float: none;
}
.tiny-inbl {
display: inline-block;
float: none;
vertical-align: top;
}
```
Largeurs :
```css
.tiny-w25 {
width: 25% !important;
}
.tiny-w33 {
width: 33.3333% !important;
}
.tiny-w50 {
width: 50% !important;
}
.tiny-w66 {
width: 66.6666% !important;
}
.tiny-w75 {
width: 75% !important;
}
.tiny-w100,
.tiny-wauto {
display: block !important;
float: none !important;
clear: none !important;
width: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
border: 0;
}
```
Marges :
```css
.tiny-man,
2016-09-21 11:52:46 +02:00
.tiny-ma0 {
2015-03-09 16:05:06 +01:00
margin: 0 !important;
}
.tiny-pan,
.tiny-pa0 {
padding: 0 !important;
}
```