Merge branch 'v6'
This commit is contained in:
Raphael Goetter
commit
0170daae6e
35 changed files with 1515 additions and 2453 deletions
25
README.md
25
README.md
|
|
@ -28,12 +28,12 @@ KNACSS n'est constitué que d'un seul fichier CSS (minifié ou non selon vos go
|
||||||
Si vous ne comptez pas décortiquer le fichier CSS, il est préférable d'opter pour la version minifiée, plus légère.
|
Si vous ne comptez pas décortiquer le fichier CSS, il est préférable d'opter pour la version minifiée, plus légère.
|
||||||
Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feuille de style, bien entendu :
|
Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feuille de style, bien entendu :
|
||||||
|
|
||||||
```
|
```HTML
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Vive les knack!</title>
|
<title>Vive les knacks!</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||||
<link rel="stylesheet" href="css/knacss.css">
|
<link rel="stylesheet" href="css/knacss.css">
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
|
@ -48,8 +48,8 @@ Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feui
|
||||||
|
|
||||||
KNACSS est conçu et pensé pour être adapté au préprocesseur Sass. Nos fichiers de travail sont donc par défaut plutôt des `.scss` et non des `.css`.
|
KNACSS est conçu et pensé pour être adapté au préprocesseur Sass. Nos fichiers de travail sont donc par défaut plutôt des `.scss` et non des `.css`.
|
||||||
|
|
||||||
Si, comme nous, vous intégrez à l'aide de préprocesseurs, KNACSS va vous faciliter la vie dès le début du projet puisqu'un [fichier de configuration](https://github.com/raphaelgoetter/KNACSS/blob/master/sass/_config-variables.scss) contenant toutes les variables du projet est intégré.
|
Si, comme nous, vous intégrez à l'aide de préprocesseurs, KNACSS va vous faciliter la vie dès le début du projet puisqu'un [dossier de configuration](https://github.com/alsacreations/KNACSS/tree/v6/sass/_config) contenant toutes les variables du projet, les breakpoints et les mixins est intégré.
|
||||||
Libre à vous de le modifier selon les contraintes de votre projet.
|
Libre à vous de modifier ces fichiers selon les contraintes de votre projet.
|
||||||
|
|
||||||
La version Sass, à compiler par vos soins, sera bien évidemment plus malléable grâce à l'apport de variables et fonctions.
|
La version Sass, à compiler par vos soins, sera bien évidemment plus malléable grâce à l'apport de variables et fonctions.
|
||||||
Vous pouvez également inclure ou non les fichiers partiels qui vous intéressent (tableaux, formulaires, grilles, WordPress, classes utilitaires, etc.).
|
Vous pouvez également inclure ou non les fichiers partiels qui vous intéressent (tableaux, formulaires, grilles, WordPress, classes utilitaires, etc.).
|
||||||
|
|
@ -71,7 +71,7 @@ Que vous ayez opté pour la version CSS simple ou la version Sass, il est viveme
|
||||||
Sachez qu'un [**Pense-bête en PDF**](http://knacss.com/KNACSS-cheatsheet.pdf) et un [**Guide de styles**](http://codepen.io/raphaelgoetter/full/LNwOjz/) sont également disponibles pour vous souvenir des classes utiles de KNACSS.
|
Sachez qu'un [**Pense-bête en PDF**](http://knacss.com/KNACSS-cheatsheet.pdf) et un [**Guide de styles**](http://codepen.io/raphaelgoetter/full/LNwOjz/) sont également disponibles pour vous souvenir des classes utiles de KNACSS.
|
||||||
|
|
||||||
Dans le cas d'un usage via Sass, vos deux fichiers de travail principaux seront :
|
Dans le cas d'un usage via Sass, vos deux fichiers de travail principaux seront :
|
||||||
- le fichier `sass/_config-variables.scss` contenant toutes les variables du projet à définir une fois pour toute au départ
|
- le fichier `sass/_config/_variables.scss` contenant toutes les variables du projet à définir une fois pour toute au départ
|
||||||
- le fichier `sass/knacss.scss` qui importe tous les autres fichiers que vous risquez d'employer dans votre projet.
|
- le fichier `sass/knacss.scss` qui importe tous les autres fichiers que vous risquez d'employer dans votre projet.
|
||||||
|
|
||||||
En phase d'intégration, il vous suffit de compiler le fichier `sass/knacss.scss` pour obtenir votre fichier CSS final.
|
En phase d'intégration, il vous suffit de compiler le fichier `sass/knacss.scss` pour obtenir votre fichier CSS final.
|
||||||
|
|
@ -80,17 +80,24 @@ En phase d'intégration, il vous suffit de compiler le fichier `sass/knacss.scss
|
||||||
|
|
||||||
### Préfixes navigateurs
|
### Préfixes navigateurs
|
||||||
|
|
||||||
Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, ...) pour être certain que les propriétés CSS fonctionneront partout.
|
Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, …) pour être certain que les propriétés CSS fonctionneront partout.
|
||||||
|
|
||||||
Au sein de la version classique CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier** (Autoprefixer réglé à "last 2 versions").
|
Au sein de la version classique CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier** (Autoprefixer réglé à "last 2 versions").
|
||||||
|
|
||||||
**Par contre, dans la version Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
|
**Par contre, dans la version Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou à l'excellent outil qu'est [autoprefixer](https://github.com/postcss/autoprefixer).
|
||||||
|
|
||||||
### Mise à jour depuis une version précédente de KNACSS ?
|
### Mise à jour depuis une version précédente de KNACSS ?
|
||||||
|
|
||||||
La version `5.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes `4.*.*`.
|
La version `6.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes `5.*.*`.
|
||||||
|
|
||||||
Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 5 de KNACSS :
|
Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 6 de KNACSS :
|
||||||
|
|
||||||
|
#### Modifications majeures depuis la `5.*.*`
|
||||||
|
|
||||||
|
- le grille de mise en forme a été entièrement modifiée. Détails de modifications: https://github.com/alsacreations/KNACSS/issues/207
|
||||||
|
- les positionnements tabulaires. `.row`, `.col` et `.line`, devenus inutiles et confusants depuis Flexbox, ont été supprimés
|
||||||
|
- de nouvelles valeurs de breakpoints ont été définies. Détails: https://github.com/alsacreations/KNACSS/issues/210
|
||||||
|
- suppression de l'outils *include-media* (crée des bugs d'encodage, nécessite un temps d'apprentissage, et n'apporte pas grand chose au final)
|
||||||
|
|
||||||
#### Modifications majeures depuis la `4.*.*`
|
#### Modifications majeures depuis la `4.*.*`
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "KNACSS",
|
"name": "KNACSS",
|
||||||
"version": "5.0.1",
|
"version": "6.0.0",
|
||||||
"homepage": "http://www.knacss.com/",
|
"homepage": "http://www.knacss.com/",
|
||||||
"authors": [
|
"authors": [
|
||||||
"Raphaël GOETTER, Alsacreations"
|
"Raphaël GOETTER, Alsacreations"
|
||||||
|
|
|
||||||
11
changelog.md
11
changelog.md
|
|
@ -1,3 +1,14 @@
|
||||||
|
# changelog v6.0.0 (21 septembre 2016)
|
||||||
|
- refonte intégrale de la grille de mise en forme (adoption de grillade.knacss.com)
|
||||||
|
- suppression de include-media (crée des bugs d'encodage, nécessite un temps d'apprentissage, et n'apporte pas grand chose au final).
|
||||||
|
- refonte des valeurs des Breakpoints et des classes responsive.
|
||||||
|
- modularisation des fichiers et dossiers, classés par fonctions (config, vendor, library, objects, utility)
|
||||||
|
- ajout des objects courants : media et autogrid
|
||||||
|
- suppression des positionnements tabulaires. `.row`, `.col` et `.line` n'ont plus lieu d'être depuis Flexbox, peuvent entrer en conflit avec d'autres frameworks et ne font que parasiter KNACSS
|
||||||
|
- amélioration du fichier Gulpfile.js
|
||||||
|
- corrections de bugs divers
|
||||||
|
- mise à jour de la doc
|
||||||
|
|
||||||
# changelog v5.0.1 (24 mai 2016)
|
# 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.
|
- 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.
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
1100
css/grillade.scss
1100
css/grillade.scss
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -28,12 +28,12 @@ KNACSS n'est constitué que d'un seul fichier CSS (minifié ou non selon vos go
|
||||||
Si vous ne comptez pas décortiquer le fichier CSS, il est préférable d'opter pour la version minifiée, plus légère.
|
Si vous ne comptez pas décortiquer le fichier CSS, il est préférable d'opter pour la version minifiée, plus légère.
|
||||||
Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feuille de style, bien entendu :
|
Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feuille de style, bien entendu :
|
||||||
|
|
||||||
```
|
```HTML
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="fr">
|
<html lang="fr">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<title>Vive les knack!</title>
|
<title>Vive les knacks!</title>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||||
<link rel="stylesheet" href="css/knacss.css">
|
<link rel="stylesheet" href="css/knacss.css">
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
|
@ -48,8 +48,8 @@ Il vous suffit ensuite de l'insérer à votre page HTML, avant votre propre feui
|
||||||
|
|
||||||
KNACSS est conçu et pensé pour être adapté au préprocesseur Sass. Nos fichiers de travail sont donc par défaut plutôt des `.scss` et non des `.css`.
|
KNACSS est conçu et pensé pour être adapté au préprocesseur Sass. Nos fichiers de travail sont donc par défaut plutôt des `.scss` et non des `.css`.
|
||||||
|
|
||||||
Si, comme nous, vous intégrez à l'aide de préprocesseurs, KNACSS va vous faciliter la vie dès le début du projet puisqu'un [fichier de configuration](https://github.com/raphaelgoetter/KNACSS/blob/master/sass/_config-variables.scss) contenant toutes les variables du projet est intégré.
|
Si, comme nous, vous intégrez à l'aide de préprocesseurs, KNACSS va vous faciliter la vie dès le début du projet puisqu'un [dossier de configuration](https://github.com/alsacreations/KNACSS/tree/v6/sass/_config) contenant toutes les variables du projet, les breakpoints et les mixins est intégré.
|
||||||
Libre à vous de le modifier selon les contraintes de votre projet.
|
Libre à vous de modifier ces fichiers selon les contraintes de votre projet.
|
||||||
|
|
||||||
La version Sass, à compiler par vos soins, sera bien évidemment plus malléable grâce à l'apport de variables et fonctions.
|
La version Sass, à compiler par vos soins, sera bien évidemment plus malléable grâce à l'apport de variables et fonctions.
|
||||||
Vous pouvez également inclure ou non les fichiers partiels qui vous intéressent (tableaux, formulaires, grilles, WordPress, classes utilitaires, etc.).
|
Vous pouvez également inclure ou non les fichiers partiels qui vous intéressent (tableaux, formulaires, grilles, WordPress, classes utilitaires, etc.).
|
||||||
|
|
@ -71,7 +71,7 @@ Que vous ayez opté pour la version CSS simple ou la version Sass, il est viveme
|
||||||
Sachez qu'un [**Pense-bête en PDF**](http://knacss.com/KNACSS-cheatsheet.pdf) et un [**Guide de styles**](http://codepen.io/raphaelgoetter/full/LNwOjz/) sont également disponibles pour vous souvenir des classes utiles de KNACSS.
|
Sachez qu'un [**Pense-bête en PDF**](http://knacss.com/KNACSS-cheatsheet.pdf) et un [**Guide de styles**](http://codepen.io/raphaelgoetter/full/LNwOjz/) sont également disponibles pour vous souvenir des classes utiles de KNACSS.
|
||||||
|
|
||||||
Dans le cas d'un usage via Sass, vos deux fichiers de travail principaux seront :
|
Dans le cas d'un usage via Sass, vos deux fichiers de travail principaux seront :
|
||||||
- le fichier `sass/_config-variables.scss` contenant toutes les variables du projet à définir une fois pour toute au départ
|
- le fichier `sass/_config/_variables.scss` contenant toutes les variables du projet à définir une fois pour toute au départ
|
||||||
- le fichier `sass/knacss.scss` qui importe tous les autres fichiers que vous risquez d'employer dans votre projet.
|
- le fichier `sass/knacss.scss` qui importe tous les autres fichiers que vous risquez d'employer dans votre projet.
|
||||||
|
|
||||||
En phase d'intégration, il vous suffit de compiler le fichier `sass/knacss.scss` pour obtenir votre fichier CSS final.
|
En phase d'intégration, il vous suffit de compiler le fichier `sass/knacss.scss` pour obtenir votre fichier CSS final.
|
||||||
|
|
@ -80,17 +80,24 @@ En phase d'intégration, il vous suffit de compiler le fichier `sass/knacss.scss
|
||||||
|
|
||||||
### Préfixes navigateurs
|
### Préfixes navigateurs
|
||||||
|
|
||||||
Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, ...) pour être certain que les propriétés CSS fonctionneront partout.
|
Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, …) pour être certain que les propriétés CSS fonctionneront partout.
|
||||||
|
|
||||||
Au sein de la version classique CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier** (Autoprefixer réglé à "last 2 versions").
|
Au sein de la version classique CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier** (Autoprefixer réglé à "last 2 versions").
|
||||||
|
|
||||||
**Par contre, dans la version Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
|
**Par contre, dans la version Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou à l'excellent outil qu'est [autoprefixer](https://github.com/postcss/autoprefixer).
|
||||||
|
|
||||||
### Mise à jour depuis une version précédente de KNACSS ?
|
### Mise à jour depuis une version précédente de KNACSS ?
|
||||||
|
|
||||||
La version `5.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes `4.*.*`.
|
La version `6.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes `5.*.*`.
|
||||||
|
|
||||||
Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 5 de KNACSS :
|
Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 6 de KNACSS :
|
||||||
|
|
||||||
|
#### Modifications majeures depuis la `5.*.*`
|
||||||
|
|
||||||
|
- le grille de mise en forme a été entièrement modifiée. Détails de modifications: https://github.com/alsacreations/KNACSS/issues/207
|
||||||
|
- les positionnements tabulaires. `.row`, `.col` et `.line`, devenus inutiles et confusants depuis Flexbox, ont été supprimés
|
||||||
|
- de nouvelles valeurs de breakpoints ont été définies. Détails: https://github.com/alsacreations/KNACSS/issues/210
|
||||||
|
- suppression de l'outils *include-media* (crée des bugs d'encodage, nécessite un temps d'apprentissage, et n'apporte pas grand chose au final)
|
||||||
|
|
||||||
#### Modifications majeures depuis la `4.*.*`
|
#### Modifications majeures depuis la `4.*.*`
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ KNACSS a prévu des classes spécifiques pour mieux vous en sortir avec les flot
|
||||||
|
|
||||||
- **le super élément `.mod`**. Il a plein d'avantages: il contient les flottants (ils ne débordent pas) et il ne s'écoule pas autour d'un frère flottant (il s'affiche proprement à côté) et il crée un [contexte "BFC"](http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html)
|
- **le super élément `.mod`**. Il a plein d'avantages: il contient les flottants (ils ne débordent pas) et il ne s'écoule pas autour d'un frère flottant (il s'affiche proprement à côté) et il crée un [contexte "BFC"](http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html)
|
||||||
- `.clearfix`. Les éléments disposant de cette classe contiennent les flottants, tel les `.mod`
|
- `.clearfix`. Les éléments disposant de cette classe contiennent les flottants, tel les `.mod`
|
||||||
- les éléments `.clear`, `.line` et `.row` bénéficient d'un autre pouvoir : celui de toujours se pousser sous un flottant précédent. Il sont dédiés aux empilements verticaux des contenus.
|
- les éléments `.clear` bénéficient d'un autre pouvoir : celui de toujours se pousser sous un flottant précédent. Il sont dédiés aux empilements verticaux des contenus.
|
||||||
|
|
||||||
## Concrètement : je veux faire quoi ?
|
## Concrètement : je veux faire quoi ?
|
||||||
|
|
||||||
|
|
@ -42,21 +42,7 @@ HTML :
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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="flex-container-v">
|
<section class="flex-container-v">
|
||||||
<div class="center w50">centré horizontalement et verticalement</div>
|
<div class="center w50">centré horizontalement et verticalement</div>
|
||||||
|
|
|
||||||
|
|
@ -10,14 +10,13 @@ Les types de positionnements inclus nativement dans KNACSS sont les suivants :
|
||||||
|
|
||||||
- positionnement flottant
|
- positionnement flottant
|
||||||
- positionnement avec `display: inline-block`
|
- positionnement avec `display: inline-block`
|
||||||
- positionnement avec `display: table-cell`
|
|
||||||
- positionnement avec Flexbox
|
- positionnement avec Flexbox
|
||||||
|
|
||||||
Il n'y a pas de mystère : chaque type de positionnement est capable de répondre à différents types de contraintes. Il n'y a pas de meilleur choix qu'un autre.
|
Il n'y a pas de mystère : chaque type de positionnement est capable de répondre à différents types de contraintes. Il n'y a pas de meilleur choix qu'un autre.
|
||||||
|
|
||||||
Votre décision pourra être guidée par les indices suivants :
|
Votre décision pourra être guidée par les indices suivants :
|
||||||
- il est généralement plus profitable de ne pas opter pour des positionnement hors-flux (`float`, `position: absolute`)
|
- il est généralement plus profitable de ne pas opter pour des positionnement hors-flux (`float`, `position: absolute`)
|
||||||
- Flexbox est certainement le modèle le plus polyvalent et propre, mais n'est compatible qu'à partir de IE10+.
|
- Flexbox est certainement le modèle le plus polyvalent et propre, il est compatible qu'à partir de IE10+.
|
||||||
|
|
||||||
## Concrètement : je veux faire quoi ?
|
## Concrètement : je veux faire quoi ?
|
||||||
|
|
||||||
|
|
@ -55,20 +54,8 @@ HTML :
|
||||||
- **Avantage :** positionnement dans le flux, compatible dès IE8
|
- **Avantage :** positionnement dans le flux, compatible dès IE8
|
||||||
- **Inconvénient :** un espace "whitespace" apparaîtra entre les deux div et nécessitera de coller les balises ou de bidouiller en CSS pour être supprimé
|
- **Inconvénient :** un espace "whitespace" apparaîtra entre les deux div et nécessitera de coller les balises ou de bidouiller en CSS pour être supprimé
|
||||||
|
|
||||||
#### table-cell et table-cell
|
|
||||||
|
|
||||||
HTML :
|
#### Flexbox
|
||||||
```html
|
|
||||||
<div class="row">
|
|
||||||
<div class="col w400p">premier</div>
|
|
||||||
<div class="col w400p">deuxième</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
- **Avantage :** positionnement dans le flux, compatible dès IE8
|
|
||||||
- **Inconvénient :** Le positionnement tabulaire observe [des règles parfois complexes](http://www.alsacreations.com/tuto/lire/1522-le-modele-tabulaire-en-css.html) et surprenantes pour les non habitués.
|
|
||||||
|
|
||||||
#### flexbox
|
|
||||||
|
|
||||||
HTML :
|
HTML :
|
||||||
```html
|
```html
|
||||||
|
|
@ -97,19 +84,10 @@ HTML :
|
||||||
|
|
||||||
#### inline-block et inline-block
|
#### inline-block et inline-block
|
||||||
|
|
||||||
Pas possible [Résolu]
|
Pas possible
|
||||||
|
|
||||||
#### table-cell et table-cell
|
|
||||||
|
|
||||||
HTML :
|
#### Flexbox
|
||||||
```html
|
|
||||||
<div class="row">
|
|
||||||
<div class="col w400p">premier</div>
|
|
||||||
<div class="col">deuxième</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### flexbox
|
|
||||||
|
|
||||||
HTML :
|
HTML :
|
||||||
```html
|
```html
|
||||||
|
|
@ -127,25 +105,14 @@ Les choix offerts avec KNACSS :
|
||||||
|
|
||||||
#### flottant et flottant
|
#### flottant et flottant
|
||||||
|
|
||||||
Pas possible [Résolu]
|
Pas possible
|
||||||
|
|
||||||
#### inline-block et inline-block
|
#### inline-block et inline-block
|
||||||
|
|
||||||
Pas possible [Résolu]
|
Pas possible
|
||||||
|
|
||||||
#### table-cell et table-cell
|
|
||||||
|
|
||||||
Par défaut, les éléments constituant des "cellules de tableau", donc `table-cell` ont automatiquement la même hauteur entre frères. Il n'y a donc rien à faire si l'on opte pour ce positionnement : ça marche tout seul.
|
#### Flexbox
|
||||||
|
|
||||||
HTML :
|
|
||||||
```html
|
|
||||||
<div class="row">
|
|
||||||
<div class="col">premier</div>
|
|
||||||
<div class="col">deuxième</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### flexbox
|
|
||||||
|
|
||||||
Là aussi c'est automatique : les enfants d'un conteneur `flexbox` ont tous par défaut la même hauteur.
|
Là aussi c'est automatique : les enfants d'un conteneur `flexbox` ont tous par défaut la même hauteur.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,280 +1,25 @@
|
||||||
# Grilles de mise en page
|
# Grilles de mise en page
|
||||||
|
|
||||||
Une grille "KNACSS" a les caractéristiques globales suivantes :
|
"Grillade" est un système de grille simple et élaboré avec CSS3 Flexbox. Il est intégré par défaut dans le micro-framework KNACSS d'Alsacréations mais peut être utilisé de manière autonome sans nécessiter KNACSS ou d'autre dépendance.
|
||||||
|
|
||||||
- Les largeurs des colonnes sont fluides (définies en pourcentage du parent),
|
Grillade a les caractéristiques globales suivantes :
|
||||||
- Une gouttière sépare chaque colonne (la valeur de cette gouttière est modifiable dans le fichier `sass/knacss.scss`),
|
|
||||||
- Par défaut, une grille est "mobile-first" (une seule colonne sur petit écran, 2 colonnes sur écran "small") et il est très simple d'activer la fonctionnalité "Responsive",
|
|
||||||
- La technologie employée est [CSS3 Flexbox](http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html).
|
|
||||||
|
|
||||||
> Le système de grilles de KNACSS existe en version CSS autonome, nommée "Grillade", que vous pouvez [télécharger directement (4.2ko)](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.css) sans avoir à installer le reste du framework.
|
- Double système de grille :
|
||||||
|
- Mono-ligne : possibilité par défaut d'émuler [l'objet "autogrid"](http://codepen.io/raphaelgoetter/pen/KMgBJd?editors=1100) : `.grid` affiche sur une ligne autant d'enfants que nécessaires (et de taille identique)
|
||||||
|
- Multi-ligne : possibilité de passer en multi-lignes dès que l'on ajoute un suffixe numéroté (ex. `.grid-2`, `.grid-3` ... `.grid-12`)
|
||||||
|
- "Mobile-first" : par défaut une grille sera disposée sur une colonne, et ne s'active que lorsque l'écran dépasse le breakpoint `$tiny`
|
||||||
|
- Largeurs de colonnes fluides et égales par défaut, mais possibilité de définir individuellement la taille de chaque enfant si besoin (ex. `.one-half`, `.one-third`, `.one-quarter`, `.two-thirds`, etc.)
|
||||||
|
- Possibilité d'inverser toute la grille grâce au suffixe `--reverse`
|
||||||
|
- Possibilité de préciser le nombre de colonnes en taille d'écran "small" à l'aide du suffixe `-small-X` (X colonnes)
|
||||||
|
- Possibilité d'appliquer une gouttière entre les éléments
|
||||||
|
- Possibilité d'offsets (pull / push)
|
||||||
|
- Possibilité de réordonner les éléments (au début / à la fin)
|
||||||
|
- Possibilité de réaliser ses propres grilles multi-colonnes via un mixin Sass. ex. `.o-grid-perso { @include grid(4, 3rem); }`
|
||||||
|
|
||||||
Il existe deux types principaux de systèmes de grilles dans KNACSS :
|
Spécificités techniques :
|
||||||
|
|
||||||
- Les grilles à colonnes égales
|
- Grillade est basé sur CSS3 Flexbox, ce qui le rend incompatible avec les anciennes versions d'Internet Explorer (IE9 inclus) ainsi que certains anciens navigateurs (Android <4.4 par exemple)
|
||||||
- Les grilles à colonnes inégales
|
- Les préfixes CSS3 (`-webkit-`, `-moz-`, `-ms-`, …) sont pris en charge au sein de la version CSS de Grillade, mais pas dans sa version Sass. Il vous sera donc nécessaire de les ajouter, de préférence automatiquement grâce à l'excellent outil autoprefixer.
|
||||||
|
- Les valeurs par défaut des points de rupture responsive (Breakpoints) de Grillade sont : `$tiny = 544px` et `$small = 768px`, vous pouvez modifier ou ajouter des valeurs dans la version Sass.
|
||||||
|
|
||||||
Dans les deux cas, la technique associée depuis KNACSS v4 pour concevoir les grilles est **CSS3 Flexbox**, ce qui signifie que la compatibilité de **cette fonctionnalité sera réservée aux [navigateurs modernes](http://caniuse.com/#search=flexbox)** (IE10, Android 4.4+ et tous les autres).
|
**documentation complète, illustrée et détaillée sur le site http://grillade.knacss.com**
|
||||||
|
|
||||||
Quelques exemples pour vous échauffer :
|
|
||||||
- `<div class="grid-4">` : grille de 4 colonnes également réparties
|
|
||||||
- `<div class="grid-2-1">` : grille de répartition 2/3 - 1/3
|
|
||||||
- `<div class="grid-3-small-1">` : grille de 3 colonnes égales, puis 1 colonne sur écran "small"
|
|
||||||
- `<div class="grid-6-small-3">` : grille de 6 colonnes, puis 3 colonnes sur écran "small"
|
|
||||||
- *note* : sur écran très petit ("tiny"), il n'y aura systématiquement qu'une seule colonne.
|
|
||||||
|
|
||||||
Et maintenant passons aux explications !
|
|
||||||
|
|
||||||
## Précautions à prendre
|
|
||||||
|
|
||||||
Qui dit CSS3 dit précautions à prendre.
|
|
||||||
La bonne nouvelle est que Flexbox est plutôt bien reconnu par l'ensemble des navigateurs de la planète; la mauvaise est que certains anciens navigateurs (Android par exemple) ne reconnaissent que certaines versions précédentes des spécifications. Il est donc encore nécessaire d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, ...) pour être certain que vos grilles fonctionneront partout.
|
|
||||||
|
|
||||||
Au sein de la version CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier**.
|
|
||||||
|
|
||||||
**Par contre, dans la version Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
|
|
||||||
|
|
||||||
## Exemple concret
|
|
||||||
|
|
||||||
Pour vous faire une idée, et jouer avec les valeurs possibles, vous trouverez [un exemple "bac à sable"](http://codepen.io/raphaelgoetter/pen/BybOag?editors=110) sur CodePen.
|
|
||||||
|
|
||||||
**Exemple de grille de colonnes égales :**
|
|
||||||
|
|
||||||
HTML :
|
|
||||||
```html
|
|
||||||
<div class="grid-4"> <!-- parent div (ou autre) de 4 colonnes -->
|
|
||||||
<div>un div ou n'importe quoi d'autre</div>
|
|
||||||
<div>un 2è div ou n'importe quoi d'autre</div>
|
|
||||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
|
||||||
<div>etc.</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Résultat :
|
|
||||||
|
|
||||||
|
|
||||||
**Exemple de grille de colonnes inégales (3/4 - 1/4) :**
|
|
||||||
|
|
||||||
HTML :
|
|
||||||
```html
|
|
||||||
<div class="grid-3-1"> <!-- parent div (ou autre) de 3-1 colonnes -->
|
|
||||||
<div>un div ou n'importe quoi d'autre</div>
|
|
||||||
<div>un 2è div ou n'importe quoi d'autre</div>
|
|
||||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
|
||||||
<div>etc.</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Résultat :
|
|
||||||
|
|
||||||
|
|
||||||
## Mise en oeuvre
|
|
||||||
|
|
||||||
Il est très simple de construire une grille, il vous suffit :
|
|
||||||
|
|
||||||
- D'un **conteneur**
|
|
||||||
- D'autant **d'enfants** que vous souhaitez
|
|
||||||
|
|
||||||
Le **conteneur** sera l'élément HTML que vous voulez (`div`, `section`, `ul`, ...). Il vous suffit simplement de le munir d'une classe selon votre choix de grille :
|
|
||||||
|
|
||||||
- `.grid-2`, `.grid-3`, `.grid-4`, ... `.grid-12` pour les grilles de largeur égale
|
|
||||||
- `.grid-2-1`, `.grid-1-2`, `.grid-3-1`, `.grid-1-3`, `.grid-3-2`, `.grid-2-3`, `.grid-4-1`, `.grid-1-4` pour les grilles de largeurs inégales (`.grid-2-1` vaut pour "2/3 - 1/3" par exemple).
|
|
||||||
|
|
||||||
Par défaut, chaque colonne est séparée de sa voisine par une gouttière dont la largeur par défaut est `1em`. Pour modifier ce réglage, il sera nécessaire de passer par la version préprocesseur (LESS, Sass) de KNACSS (voir plus loin).
|
|
||||||
|
|
||||||
Les **enfants** directs d'un conteneur, quels qu'ils soient, se répartissent automatiquement au sein de la grille formée par leur conteneur. Par exemple, 6 enfants contenus dans un parent de classe `.grid-3` se répartiront en 3 colonnes de 2 lignes.
|
|
||||||
|
|
||||||
- Tester une [grille simple en ligne](http://codepen.io/raphaelgoetter/pen/GAenb?editors=110) (Codepen).
|
|
||||||
- Tester une [grille de largeur inégale en ligne](http://codepen.io/raphaelgoetter/pen/jmAkx?editors=110) (Codepen).
|
|
||||||
|
|
||||||
## Grilles responsive
|
|
||||||
|
|
||||||
Les grilles KNACSS sont mobile-first et "plus ou moins" responsive naturellement, dans la mesure où par défaut :
|
|
||||||
- elles s'affichent systématiquement sur une seule colonne sur un très petit écran ("tiny"),
|
|
||||||
- elles s'affichent en 2 colonnes sur un écran de taille réduite ("small"),
|
|
||||||
- elles occupent le nombre de colonnes définies dans la variable `$grid-number` sur un écran suffisamment large.
|
|
||||||
|
|
||||||
Vous pouvez définir le nombre de colonnes selon les tailles d'écran à l'aide du mot-clé : `-small-*`.
|
|
||||||
Ce mot-clé définit le nombre de colonnes lorsque le point de rupture se situe au-delà de la taille "tiny" et en-deçà de la taille "medium".
|
|
||||||
|
|
||||||
La grille ci-dessous s'affichera en 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran :
|
|
||||||
```html
|
|
||||||
<div class="grid-4-small-2">
|
|
||||||
<div>un div ou n'importe quoi d'autre</div>
|
|
||||||
<div>un 2è div ou n'importe quoi d'autre</div>
|
|
||||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
|
||||||
<div>etc.</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Offsets
|
|
||||||
|
|
||||||
Il vous est très facile de "pousser" un élément à droite ou à gauche de sa ligne dans la grille, et créer ainsi un espacement volontaire, ce que l'on appelle "offset".
|
|
||||||
|
|
||||||
Pour cela, appliquez simplement l'une ou l'autre de ces déclarations sur l'élément :
|
|
||||||
|
|
||||||
- la classe `.push` pour le pousser à droite sur sa ligne (applique un `margin-left: auto`)
|
|
||||||
- la classe `.pull` pour le pousser à gauche sur sa ligne (applique un `margin-right: auto`)
|
|
||||||
|
|
||||||
HTML :
|
|
||||||
```html
|
|
||||||
<div class="grid-4">
|
|
||||||
<div>un div ou n'importe quoi d'autre</div>
|
|
||||||
<div class="push">je suis poussé à droite</div>
|
|
||||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
|
||||||
<div>etc.</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Résultat :
|
|
||||||
|
|
||||||
|
|
||||||
## Mise en exergue
|
|
||||||
|
|
||||||
Il est possible de mettre un élément particulier en exergue, en **doublant sa taille** par rapport aux autres, tout en conservant un agencement parfait de la grille.
|
|
||||||
|
|
||||||
Pour ce faire, appliquez la classe `.grid-item-double` à cet élément.
|
|
||||||
|
|
||||||
HTML :
|
|
||||||
```html
|
|
||||||
<div class="grid-4">
|
|
||||||
<div>un div ou n'importe quoi d'autre</div>
|
|
||||||
<div class="grid-item-double">je suis deux fois plus large que mes frères</div>
|
|
||||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
|
||||||
<div>etc.</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Résultat :
|
|
||||||
|
|
||||||
|
|
||||||
## Pousser au début ou à la fin
|
|
||||||
|
|
||||||
Vous pouvez modifier l'ordre d'affichage des éléments au sein d'une grille à l'aide des classes :
|
|
||||||
|
|
||||||
- `.grid-item-first` (l'élément apparaîtra avant tous les autres)
|
|
||||||
- `.grid-item-last` (l'élément apparaîtra tout à la fin de la grille)
|
|
||||||
|
|
||||||
HTML :
|
|
||||||
```html
|
|
||||||
<div class="grid-4">
|
|
||||||
<div>un div ou n'importe quoi d'autre</div>
|
|
||||||
<div class="grid-item-first">je m'affiche avant tous mes frères</div>
|
|
||||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
|
||||||
<div>etc.</div>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Résultat :
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Grilles imbriquées
|
|
||||||
|
|
||||||
Il est parfaitement possible d'imbriquer une grille dans une grille (mais n'en abusez pas !). Par exemple :
|
|
||||||
|
|
||||||
HTML :
|
|
||||||
```html
|
|
||||||
<div class="grid-2-1">
|
|
||||||
<div>
|
|
||||||
<ul class="unstyled grid-3">
|
|
||||||
<li>1</li>
|
|
||||||
<li>2</li>
|
|
||||||
<li>3</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<aside>
|
|
||||||
2- lorem ipsum Hopla choucroute !
|
|
||||||
</aside>
|
|
||||||
</div>
|
|
||||||
```
|
|
||||||
|
|
||||||
Résultat :
|
|
||||||
|
|
||||||
|
|
||||||
## Plus loin avec les préprocesseurs
|
|
||||||
|
|
||||||
KNACSS est pensé pour être utilisé à l'aide de preprocesseurs tels que LESS ou Sass. Il existe par conséquent un fichier de variables de configuration et des mixins prévus pour étendre les possibilités des grilles notamment.
|
|
||||||
|
|
||||||
### Modifier les variables globales
|
|
||||||
|
|
||||||
Les variables de configuration des grilles se trouvent dans le fichier `sass/_config-variables.scss` :
|
|
||||||
|
|
||||||
```css
|
|
||||||
$grid-gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
|
||||||
$grid-number: 4 !default; // number of equal columns
|
|
||||||
$grid-left: 2 !default; // left side of uneven columns
|
|
||||||
$grid-right: 1 !default; // right side of uneven columns
|
|
||||||
```
|
|
||||||
|
|
||||||
Il vous suffit de modifier les valeurs de ces variables de config pour répercuter vos préférences sur l'ensemble du projet dès que vos fichiers Sass seront compilés en CSS.
|
|
||||||
|
|
||||||
### Générer des grilles personnalisées
|
|
||||||
|
|
||||||
Indépendamment des variables de configuration, rien de vous empêche de créer une grille personnalisée en incluant directement l'un des deux mixins possibles dans vos éléments :
|
|
||||||
|
|
||||||
- `.grid(n,g)` pour personnaliser une grille de colonnes **égales**. Les arguments sont "n" = nombre de colonnes et "g" = largeur de la grille
|
|
||||||
- `.uneven-grid(l,r)` pour personnaliser une grille de colonnes **inégales**. Les arguments sont "l" = pour le ratio de la colonne de gauche, "r" = pour le ratio de la colonne de droite
|
|
||||||
|
|
||||||
#### Grille de colonnes égales en Sass
|
|
||||||
|
|
||||||
**Objectif : je souhaite créer un mixin sur mon élément `.grid-container` afin que celui-ci crée une grille de 6 colonnes égales**
|
|
||||||
|
|
||||||
Sass (fichier de développement) :
|
|
||||||
```css
|
|
||||||
.grid-container {
|
|
||||||
@include grid(4, 12px)
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Important : il est nécessaire que le nom de votre classe globale contienne la chaîne `grid-` pour que le mixin fonctionne (ex. `grid-container`, `grid-box`, `grid-truc4`, etc.)**
|
|
||||||
|
|
||||||
CSS compilé (sans Autoprefixer) :
|
|
||||||
|
|
||||||
```css
|
|
||||||
.grid-container {
|
|
||||||
margin-left: -12px;
|
|
||||||
}
|
|
||||||
.grid-container > * {
|
|
||||||
width: calc(100% * 1 / 4 - 12px - .01px);
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
.grid-container > .grid-item-double {
|
|
||||||
width: calc(100% * 2 / 4 - 12px);
|
|
||||||
}
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Grille de colonnes inégales en LESS
|
|
||||||
|
|
||||||
**Objectif : je souhaite que mon élément `.grid-truc` crée une grille de 2 colonnes réparties en 2/3 et 1/3.**
|
|
||||||
|
|
||||||
LESS (fichier de développement) :
|
|
||||||
|
|
||||||
```css
|
|
||||||
.grid-truc {
|
|
||||||
@include uneven-grid(2, 1);
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
**Important : il est nécessaire que le nom de votre classe globale contienne la chaîne `grid-` pour que le mixin fonctionne (ex. `grid-container`, `grid-box`, `grid-truc4`, etc.)**
|
|
||||||
|
|
||||||
|
|
||||||
CSS compilé (sans Autoprefixer) :
|
|
||||||
|
|
||||||
```css
|
|
||||||
@media (min-width: 641px) {
|
|
||||||
.grid-truc :nth-child(odd) {
|
|
||||||
width: calc(66.66667% - 2rem);
|
|
||||||
}
|
|
||||||
.grid-truc :nth-child(even) {
|
|
||||||
width: calc(33.33333% - 2rem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
...
|
|
||||||
```
|
|
||||||
|
|
||||||
## Article associé
|
|
||||||
|
|
||||||
Si vous voulez comprendre dans le détail le fonctionnement des grilles Flexbox de KNACSS, je vous invite à suivre l'article d'Alsacréations ["Une grille responsive avec CSS3 Flexbox et LESS (ou Sass)"](http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html).
|
|
||||||
|
|
|
||||||
|
|
@ -6,20 +6,111 @@ Par défaut, KNACSS tient compte des valeurs de points de rupture suivants :
|
||||||
|
|
||||||
```
|
```
|
||||||
// breakpoints (choose unit you prefer)
|
// breakpoints (choose unit you prefer)
|
||||||
@tiny-screen : 320px; // tiny screens media query (less-equal than 320px)
|
$tiny: 544px !default; // or 'em' if you prefer, of course
|
||||||
@tiny-plus-screen : 480px; // screens between 321px and 480px
|
$small: 768px !default;
|
||||||
@small-screen : 640px; // screens between 481px and 640px
|
$medium: 1024px !default;
|
||||||
@small-plus-screen : 768px; // screens between 641px and 768px
|
$large: 1200px !default;
|
||||||
@medium-screen : 960px; // screens between 769px and 960px
|
$extra-large: 1440px !default;
|
||||||
@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
|
_Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._
|
||||||
@extra-large-screen : 1600px; // screens between 1441px and 1600px
|
|
||||||
@ultra-large-screen : 1920px; // ultra large screens
|
## 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`),
|
||||||
|
- mais aussi des alias qui représentent des intervalles et que l'on utilise sous forme de mixins: (`mobile`, `portrait`, `landscape`, `desktop`)
|
||||||
|
3. Éviter de multiplier les valeurs. Un maximum de 5 ou 6 breakpoints devrait suffire dans la grande majorité des projets
|
||||||
|
4. Pour éviter les intervalles qui se chevauchent, ou des Media Queries trop variés, adopter une convention pour définir la valeur d’un Breakpoint : `(max-width: $BP) and (min-width: ($BP + 1))`
|
||||||
|
|
||||||
|
Exemple :
|
||||||
|
|
||||||
|
Non, pas bien :
|
||||||
|
```
|
||||||
|
@media (min-width: 768px) {...}
|
||||||
|
@media (max-width: 767px) {...}
|
||||||
|
```
|
||||||
|
|
||||||
|
Oui, bien :
|
||||||
|
```
|
||||||
|
@media (min-width: 769px) {...}
|
||||||
|
@media (max-width: 768px) {...}
|
||||||
|
@media (max-width: $small-screen) {...}
|
||||||
|
@media (min-width: $small-screen + 1) and (max-width: $large-screen) {...}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Mixins "Alias"
|
||||||
|
|
||||||
|
En addition aux variables, des mixins de breakpoints "utilitaires" (des "alias" des valeurs précédentes) liées aux types de devices (forcément indicatifs, mais simples à retenir) sont prévues :
|
||||||
|
|
||||||
|
**NOTE : je commence à avoir du mal avec les « large, medium, small » : en pratique, je ne sais jamais à quoi ça correspond et je dois systématiquement aller vérifier dans le fichier de variables.
|
||||||
|
Au final, je me dis qu’un « mobile, tablet, desktop », même purement indicatif est bien plus parlant**
|
||||||
|
|
||||||
|
```
|
||||||
|
// Additionnal "utility" breakpoints aliases
|
||||||
|
@function breakpoint($bp) {
|
||||||
|
@if $bp == 'mobile' {
|
||||||
|
@return '(max-width: #{$tiny})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'portrait' {
|
||||||
|
@return '(min-width: #{$tiny + 1}) and (max-width: #{$small})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'landscape' {
|
||||||
|
@return '(min-width: #{$small + 1}) and (max-width: #{$medium})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'desktop' {
|
||||||
|
@return '(min-width: #{$medium + 1})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'portrait-down' {
|
||||||
|
@return '(max-width: #{$small})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'portrait-up' {
|
||||||
|
@return '(min-width: #{$tiny + 1})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'landscape-down' {
|
||||||
|
@return '(max-width: #{$medium})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'landscape-up' {
|
||||||
|
@return '(min-width: #{$small + 1})';
|
||||||
|
}
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
_Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._
|
Exemple d'usage :
|
||||||
|
|
||||||
|
```
|
||||||
|
// styles
|
||||||
|
.when-portrait-up {
|
||||||
|
@include respond-to("portrait-up") {
|
||||||
|
background: green;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.is-hidden-mobile {
|
||||||
|
@include respond-to("mobile") {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Voir le CodePen : http://codepen.io/raphaelgoetter/pen/EyRwAp/?editors=1100
|
||||||
|
|
||||||
|
Illustration :
|
||||||
|
|
||||||
|
|
||||||
## Préfixes de classe
|
## Préfixes de classe
|
||||||
|
|
||||||
|
|
@ -56,15 +147,6 @@ Modèles d'affichage :
|
||||||
float: none;
|
float: none;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
.tiny-row {
|
|
||||||
display: table !important;
|
|
||||||
table-layout: fixed !important;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
.tiny-col {
|
|
||||||
display: table-cell !important;
|
|
||||||
vertical-align: top !important;
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Largeurs :
|
Largeurs :
|
||||||
|
|
@ -101,7 +183,7 @@ Marges :
|
||||||
|
|
||||||
```css
|
```css
|
||||||
.tiny-man,
|
.tiny-man,
|
||||||
.tiny-ma0 {
|
.tiny-ma0 {
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
}
|
}
|
||||||
.tiny-pan,
|
.tiny-pan,
|
||||||
|
|
@ -109,18 +191,3 @@ Marges :
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Règles de styles particulières
|
|
||||||
|
|
||||||
```css
|
|
||||||
@media (min-width: 1025px) {
|
|
||||||
/* rules for big resources and big screens like: background-images, font-faces, etc. */
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
```css
|
|
||||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
|
|
||||||
/* style adjustments for high density devices */
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
|
||||||
|
|
@ -30,10 +30,11 @@ KNACSS propose des styles par défaut pour ces liens : masqués au départ, ils
|
||||||
|
|
||||||
## Césures
|
## Césures
|
||||||
|
|
||||||
KNACSS gère automatiquement les césures et les mots longs dès lors que le point de rupture "small" est atteint.
|
KNACSS gère automatiquement les césures et les mots longs dès lors que le point de rupture "$tiny" est atteint.
|
||||||
|
|
||||||
```css
|
```
|
||||||
@media (max-width: 768px) {
|
// hyphens on tiny screens
|
||||||
|
@media (max-width: $tiny) {
|
||||||
/* you shall not pass */
|
/* you shall not pass */
|
||||||
div,
|
div,
|
||||||
textarea,
|
textarea,
|
||||||
|
|
@ -44,28 +45,15 @@ KNACSS gère automatiquement les césures et les mots longs dès lors que le poi
|
||||||
pre,
|
pre,
|
||||||
samp {
|
samp {
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
-webkit-hyphens: auto;
|
hyphens: auto;
|
||||||
-moz-hyphens: auto;
|
}
|
||||||
-ms-hyphens: auto;
|
}
|
||||||
hyphens: auto;
|
|
||||||
|
// use .no-wrapping to disallow hyphens on tiny screens
|
||||||
|
@media (max-width: $tiny) {
|
||||||
|
.no-wrapping {
|
||||||
|
word-wrap: normal;
|
||||||
|
hyphens: manual;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Google maps
|
|
||||||
|
|
||||||
KNACSS règle les bugs d'affichage dans le cas spécifique des images google.
|
|
||||||
|
|
||||||
```css
|
|
||||||
.gm-style img {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
:not(.gm-style) img {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.gm-style img,
|
|
||||||
.gmnoscreen img,
|
|
||||||
.gmnoprint img {
|
|
||||||
max-width: none !important;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
|
||||||
|
|
@ -25,7 +25,7 @@ gulp.task('css', function () {
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task('grillade', function() {
|
gulp.task('grillade', function() {
|
||||||
return gulp.src(['./sass/_include-media/_include-media.scss','./sass/_config-variables.scss', './sass/_layout-grids.scss'])
|
return gulp.src(['./sass/_config/_breakpoints.scss', './sass/grids/_grillade.scss'])
|
||||||
.pipe(concat('grillade.scss'))
|
.pipe(concat('grillade.scss'))
|
||||||
.pipe(gulp.dest('./css/'))
|
.pipe(gulp.dest('./css/'))
|
||||||
.pipe(sass())
|
.pipe(sass())
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "knacss",
|
"name": "knacss",
|
||||||
"version": "5.0.1",
|
"version": "6.0.0",
|
||||||
"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": [
|
||||||
|
|
|
||||||
9
sass/_config/_breakpoints.scss
Normal file
9
sass/_config/_breakpoints.scss
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
// Responsive breakpoints variables
|
||||||
|
|
||||||
|
// Warning : you should use your own values, regardless of the devices
|
||||||
|
// Best practise : (max-width: $BP) and (min-width: ($BP + 1))
|
||||||
|
$tiny: 544px !default; // or 'em' if you prefer, of course
|
||||||
|
$small: 768px !default;
|
||||||
|
$medium: 1024px !default;
|
||||||
|
$large: 1200px !default;
|
||||||
|
$extra-large: 1440px !default;
|
||||||
38
sass/_config/_mixins.scss
Normal file
38
sass/_config/_mixins.scss
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
// Additionnal "utility" breakpoints aliases
|
||||||
|
// ex. @include respond-to("portrait-up") {...}
|
||||||
|
@function breakpoint($bp) {
|
||||||
|
@if $bp == 'mobile' {
|
||||||
|
@return '(max-width: #{$tiny})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'portrait' {
|
||||||
|
@return '(min-width: #{$tiny + 1}) and (max-width: #{$small})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'landscape' {
|
||||||
|
@return '(min-width: #{$small + 1}) and (max-width: #{$medium})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'desktop' {
|
||||||
|
@return '(min-width: #{$medium + 1})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'portrait-down' {
|
||||||
|
@return '(max-width: #{$small})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'portrait-up' {
|
||||||
|
@return '(min-width: #{$tiny + 1})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'landscape-down' {
|
||||||
|
@return '(max-width: #{$medium})';
|
||||||
|
}
|
||||||
|
@else if $bp == 'landscape-up' {
|
||||||
|
@return '(min-width: #{$small + 1})';
|
||||||
|
}
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -45,26 +45,5 @@ $extra-large-plus-value : 12rem !default; // extra large value for margins / pad
|
||||||
$ultra-large-value : 16rem !default; // ultra large value for margins / paddings
|
$ultra-large-value : 16rem !default; // ultra large value for margins / paddings
|
||||||
$ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings
|
$ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings
|
||||||
|
|
||||||
// breakpoints (overrides include-media.scss) (choose unit you prefer)
|
|
||||||
// doc : http://include-media.com/documentation/
|
|
||||||
$breakpoints: (
|
|
||||||
tiny-screen : 320px,
|
|
||||||
tiny-plus-screen : 480px,
|
|
||||||
small-screen : 640px,
|
|
||||||
small-plus-screen : 768px,
|
|
||||||
medium-screen : 960px,
|
|
||||||
medium-plus-screen: 1024px,
|
|
||||||
large-screen : 1280px,
|
|
||||||
large-plus-screen : 1440px,
|
|
||||||
extra-large-screen: 1600px,
|
|
||||||
ultra-large-screen: 1920px
|
|
||||||
);
|
|
||||||
|
|
||||||
// grids variables (choose unit you prefer)
|
|
||||||
$grid-gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
|
||||||
$grid-number: 4 !default; // number of equal columns
|
|
||||||
$grid-left: 2 !default; // left side of uneven columns
|
|
||||||
$grid-right: 1 !default; // right side of uneven columns
|
|
||||||
|
|
||||||
//kna-namespace (default : null)
|
//kna-namespace (default : null)
|
||||||
$kna-namespace: null !default;
|
$kna-namespace: null !default;
|
||||||
|
|
@ -1,568 +0,0 @@
|
||||||
@charset 'UTF-8';
|
|
||||||
|
|
||||||
// _ _ _ _ _
|
|
||||||
// (_) | | | | | (_)
|
|
||||||
// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _
|
|
||||||
// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` |
|
|
||||||
// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| |
|
|
||||||
// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_|
|
|
||||||
//
|
|
||||||
// Simple, elegant and maintainable media queries in Sass
|
|
||||||
// v1.4.3
|
|
||||||
//
|
|
||||||
// http://include-media.com
|
|
||||||
//
|
|
||||||
// Authors: Eduardo Boucas (@eduardoboucas)
|
|
||||||
// Hugo Giraudel (@hugogiraudel)
|
|
||||||
//
|
|
||||||
// This project is licensed under the terms of the MIT license
|
|
||||||
|
|
||||||
|
|
||||||
////
|
|
||||||
/// include-media library public configuration
|
|
||||||
/// @author Eduardo Boucas
|
|
||||||
/// @access public
|
|
||||||
////
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Creates a list of global breakpoints
|
|
||||||
///
|
|
||||||
/// @example scss - Creates a single breakpoint with the label `phone`
|
|
||||||
/// $breakpoints: ('phone': 320px);
|
|
||||||
///
|
|
||||||
$breakpoints: (
|
|
||||||
'phone': 320px,
|
|
||||||
'tablet': 768px,
|
|
||||||
'desktop': 1024px
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Creates a list of static expressions or media types
|
|
||||||
///
|
|
||||||
/// @example scss - Creates a single media type (screen)
|
|
||||||
/// $media-expressions: ('screen': 'screen');
|
|
||||||
///
|
|
||||||
/// @example scss - Creates a static expression with logical disjunction (OR operator)
|
|
||||||
/// $media-expressions: (
|
|
||||||
/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
|
|
||||||
/// );
|
|
||||||
///
|
|
||||||
$media-expressions: (
|
|
||||||
'screen': 'screen',
|
|
||||||
'print': 'print',
|
|
||||||
'handheld': 'handheld',
|
|
||||||
'landscape': '(orientation: landscape)',
|
|
||||||
'portrait': '(orientation: portrait)',
|
|
||||||
'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
|
|
||||||
'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi)'
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
|
|
||||||
///
|
|
||||||
/// @example scss - Interval for pixels is defined as `1` by default
|
|
||||||
/// @include media('>128px') {}
|
|
||||||
///
|
|
||||||
/// /* Generates: */
|
|
||||||
/// @media (min-width: 129px) {}
|
|
||||||
///
|
|
||||||
/// @example scss - Interval for ems is defined as `0.01` by default
|
|
||||||
/// @include media('>20em') {}
|
|
||||||
///
|
|
||||||
/// /* Generates: */
|
|
||||||
/// @media (min-width: 20.01em) {}
|
|
||||||
///
|
|
||||||
/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`
|
|
||||||
/// @include media('>2.0rem') {}
|
|
||||||
///
|
|
||||||
/// /* Generates: */
|
|
||||||
/// @media (min-width: 2.1rem) {}
|
|
||||||
///
|
|
||||||
$unit-intervals: (
|
|
||||||
'px': 1,
|
|
||||||
'em': 0.01,
|
|
||||||
'rem': 0.1
|
|
||||||
) !default;
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Defines whether support for media queries is available, useful for creating separate stylesheets
|
|
||||||
/// for browsers that don't support media queries.
|
|
||||||
///
|
|
||||||
/// @example scss - Disables support for media queries
|
|
||||||
/// $im-media-support: false;
|
|
||||||
/// @include media('>=tablet') {
|
|
||||||
/// .foo {
|
|
||||||
/// color: tomato;
|
|
||||||
/// }
|
|
||||||
/// }
|
|
||||||
///
|
|
||||||
/// /* Generates: */
|
|
||||||
/// .foo {
|
|
||||||
/// color: tomato;
|
|
||||||
/// }
|
|
||||||
///
|
|
||||||
$im-media-support: true !default;
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or
|
|
||||||
/// intercept the breakpoint will be displayed, any others will be ignored.
|
|
||||||
///
|
|
||||||
/// @example scss - This media query will show because it intercepts the static breakpoint
|
|
||||||
/// $im-media-support: false;
|
|
||||||
/// $im-no-media-breakpoint: 'desktop';
|
|
||||||
/// @include media('>=tablet') {
|
|
||||||
/// .foo {
|
|
||||||
/// color: tomato;
|
|
||||||
/// }
|
|
||||||
/// }
|
|
||||||
///
|
|
||||||
/// /* Generates: */
|
|
||||||
/// .foo {
|
|
||||||
/// color: tomato;
|
|
||||||
/// }
|
|
||||||
///
|
|
||||||
/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint
|
|
||||||
/// $im-media-support: false;
|
|
||||||
/// $im-no-media-breakpoint: 'tablet';
|
|
||||||
/// @include media('>=desktop') {
|
|
||||||
/// .foo {
|
|
||||||
/// color: tomato;
|
|
||||||
/// }
|
|
||||||
/// }
|
|
||||||
///
|
|
||||||
/// /* No output */
|
|
||||||
///
|
|
||||||
$im-no-media-breakpoint: 'desktop' !default;
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Selects which media expressions are allowed in an expression for it to be used when media queries
|
|
||||||
/// are not supported.
|
|
||||||
///
|
|
||||||
/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions
|
|
||||||
/// $im-media-support: false;
|
|
||||||
/// $im-no-media-breakpoint: 'desktop';
|
|
||||||
/// $im-no-media-expressions: ('screen');
|
|
||||||
/// @include media('>=tablet', 'screen') {
|
|
||||||
/// .foo {
|
|
||||||
/// color: tomato;
|
|
||||||
/// }
|
|
||||||
/// }
|
|
||||||
///
|
|
||||||
/// /* Generates: */
|
|
||||||
/// .foo {
|
|
||||||
/// color: tomato;
|
|
||||||
/// }
|
|
||||||
///
|
|
||||||
/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted
|
|
||||||
/// $im-media-support: false;
|
|
||||||
/// $im-no-media-breakpoint: 'desktop';
|
|
||||||
/// $im-no-media-expressions: ('screen');
|
|
||||||
/// @include media('>=tablet', 'retina2x') {
|
|
||||||
/// .foo {
|
|
||||||
/// color: tomato;
|
|
||||||
/// }
|
|
||||||
/// }
|
|
||||||
///
|
|
||||||
/// /* No output */
|
|
||||||
///
|
|
||||||
$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
|
|
||||||
|
|
||||||
////
|
|
||||||
/// Cross-engine logging engine
|
|
||||||
/// @author Hugo Giraudel
|
|
||||||
/// @access private
|
|
||||||
////
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Log a message either with `@error` if supported
|
|
||||||
/// else with `@warn`, using `feature-exists('at-error')`
|
|
||||||
/// to detect support.
|
|
||||||
///
|
|
||||||
/// @param {String} $message - Message to log
|
|
||||||
///
|
|
||||||
@function log($message) {
|
|
||||||
@if feature-exists('at-error') {
|
|
||||||
@error $message;
|
|
||||||
} @else {
|
|
||||||
@warn $message;
|
|
||||||
$_: noop();
|
|
||||||
}
|
|
||||||
|
|
||||||
@return $message;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Wrapper mixin for the log function so it can be used with a more friendly
|
|
||||||
/// API than `@if log('..') {}` or `$_: log('..')`. Basically, use the function
|
|
||||||
/// within functions because it is not possible to include a mixin in a function
|
|
||||||
/// and use the mixin everywhere else because it's much more elegant.
|
|
||||||
///
|
|
||||||
/// @param {String} $message - Message to log
|
|
||||||
///
|
|
||||||
@mixin log($message) {
|
|
||||||
@if log($message) {}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Function with no `@return` called next to `@warn` in Sass 3.3
|
|
||||||
/// to trigger a compiling error and stop the process.
|
|
||||||
///
|
|
||||||
@function noop() {}
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Determines whether a list of conditions is intercepted by the static breakpoint.
|
|
||||||
///
|
|
||||||
/// @param {Arglist} $conditions - Media query conditions
|
|
||||||
///
|
|
||||||
/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint
|
|
||||||
///
|
|
||||||
@function im-intercepts-static-breakpoint($conditions...) {
|
|
||||||
$no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint);
|
|
||||||
|
|
||||||
@if not $no-media-breakpoint-value {
|
|
||||||
@if log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {}
|
|
||||||
}
|
|
||||||
|
|
||||||
@each $condition in $conditions {
|
|
||||||
@if not map-has-key($media-expressions, $condition) {
|
|
||||||
$operator: get-expression-operator($condition);
|
|
||||||
$prefix: get-expression-prefix($operator);
|
|
||||||
$value: get-expression-value($condition, $operator);
|
|
||||||
|
|
||||||
// scss-lint:disable SpaceAroundOperator
|
|
||||||
@if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or
|
|
||||||
($prefix == 'min' and $value > $no-media-breakpoint-value) {
|
|
||||||
@return false;
|
|
||||||
}
|
|
||||||
} @else if not index($im-no-media-expressions, $condition) {
|
|
||||||
@return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
////
|
|
||||||
/// Parsing engine
|
|
||||||
/// @author Hugo Giraudel
|
|
||||||
/// @access private
|
|
||||||
////
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Get operator of an expression
|
|
||||||
///
|
|
||||||
/// @param {String} $expression - Expression to extract operator from
|
|
||||||
///
|
|
||||||
/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`
|
|
||||||
///
|
|
||||||
@function get-expression-operator($expression) {
|
|
||||||
@each $operator in ('>=', '>', '<=', '<', '≥', '≤') {
|
|
||||||
@if str-index($expression, $operator) {
|
|
||||||
@return $operator;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// It is not possible to include a mixin inside a function, so we have to
|
|
||||||
// rely on the `log(..)` function rather than the `log(..)` mixin. Because
|
|
||||||
// functions cannot be called anywhere in Sass, we need to hack the call in
|
|
||||||
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
|
|
||||||
// Sass 3.3, change this line in `@if log(..) {}` instead.
|
|
||||||
$_: log('No operator found in `#{$expression}`.');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Get dimension of an expression, based on a found operator
|
|
||||||
///
|
|
||||||
/// @param {String} $expression - Expression to extract dimension from
|
|
||||||
/// @param {String} $operator - Operator from `$expression`
|
|
||||||
///
|
|
||||||
/// @return {String} - `width` or `height` (or potentially anything else)
|
|
||||||
///
|
|
||||||
@function get-expression-dimension($expression, $operator) {
|
|
||||||
$operator-index: str-index($expression, $operator);
|
|
||||||
$parsed-dimension: str-slice($expression, 0, $operator-index - 1);
|
|
||||||
$dimension: 'width';
|
|
||||||
|
|
||||||
@if str-length($parsed-dimension) > 0 {
|
|
||||||
$dimension: $parsed-dimension;
|
|
||||||
}
|
|
||||||
|
|
||||||
@return $dimension;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Get dimension prefix based on an operator
|
|
||||||
///
|
|
||||||
/// @param {String} $operator - Operator
|
|
||||||
///
|
|
||||||
/// @return {String} - `min` or `max`
|
|
||||||
///
|
|
||||||
@function get-expression-prefix($operator) {
|
|
||||||
@return if(index(('<', '<=', '≤'), $operator), 'max', 'min');
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Get value of an expression, based on a found operator
|
|
||||||
///
|
|
||||||
/// @param {String} $expression - Expression to extract value from
|
|
||||||
/// @param {String} $operator - Operator from `$expression`
|
|
||||||
///
|
|
||||||
/// @return {Number} - A numeric value
|
|
||||||
///
|
|
||||||
@function get-expression-value($expression, $operator) {
|
|
||||||
$operator-index: str-index($expression, $operator);
|
|
||||||
$value: str-slice($expression, $operator-index + str-length($operator));
|
|
||||||
|
|
||||||
@if map-has-key($breakpoints, $value) {
|
|
||||||
$value: map-get($breakpoints, $value);
|
|
||||||
} @else {
|
|
||||||
$value: to-number($value);
|
|
||||||
}
|
|
||||||
|
|
||||||
$interval: map-get($unit-intervals, unit($value));
|
|
||||||
|
|
||||||
@if not $interval {
|
|
||||||
// It is not possible to include a mixin inside a function, so we have to
|
|
||||||
// rely on the `log(..)` function rather than the `log(..)` mixin. Because
|
|
||||||
// functions cannot be called anywhere in Sass, we need to hack the call in
|
|
||||||
// a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
|
|
||||||
// Sass 3.3, change this line in `@if log(..) {}` instead.
|
|
||||||
$_: log('Unknown unit `#{unit($value)}`.');
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $operator == '>' {
|
|
||||||
$value: $value + $interval;
|
|
||||||
} @else if $operator == '<' {
|
|
||||||
$value: $value - $interval;
|
|
||||||
}
|
|
||||||
|
|
||||||
@return $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Parse an expression to return a valid media-query expression
|
|
||||||
///
|
|
||||||
/// @param {String} $expression - Expression to parse
|
|
||||||
///
|
|
||||||
/// @return {String} - Valid media query
|
|
||||||
///
|
|
||||||
@function parse-expression($expression) {
|
|
||||||
// If it is part of $media-expressions, it has no operator
|
|
||||||
// then there is no need to go any further, just return the value
|
|
||||||
@if map-has-key($media-expressions, $expression) {
|
|
||||||
@return map-get($media-expressions, $expression);
|
|
||||||
}
|
|
||||||
|
|
||||||
$operator: get-expression-operator($expression);
|
|
||||||
$dimension: get-expression-dimension($expression, $operator);
|
|
||||||
$prefix: get-expression-prefix($operator);
|
|
||||||
$value: get-expression-value($expression, $operator);
|
|
||||||
|
|
||||||
@return '(#{$prefix}-#{$dimension}: #{$value})';
|
|
||||||
}
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Slice `$list` between `$start` and `$end` indexes
|
|
||||||
///
|
|
||||||
/// @access private
|
|
||||||
///
|
|
||||||
/// @param {List} $list - List to slice
|
|
||||||
/// @param {Number} $start [1] - Start index
|
|
||||||
/// @param {Number} $end [length($list)] - End index
|
|
||||||
///
|
|
||||||
/// @return {List} Sliced list
|
|
||||||
///
|
|
||||||
@function slice($list, $start: 1, $end: length($list)) {
|
|
||||||
@if length($list) < 1 or $start > $end {
|
|
||||||
@return ();
|
|
||||||
}
|
|
||||||
|
|
||||||
$result: ();
|
|
||||||
|
|
||||||
@for $i from $start through $end {
|
|
||||||
$result: append($result, nth($list, $i));
|
|
||||||
}
|
|
||||||
|
|
||||||
@return $result;
|
|
||||||
}
|
|
||||||
|
|
||||||
////
|
|
||||||
/// String to number converter
|
|
||||||
/// @author Hugo Giraudel
|
|
||||||
/// @access private
|
|
||||||
////
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Casts a string into a number
|
|
||||||
///
|
|
||||||
/// @param {String | Number} $value - Value to be parsed
|
|
||||||
///
|
|
||||||
/// @return {Number}
|
|
||||||
///
|
|
||||||
@function to-number($value) {
|
|
||||||
@if type-of($value) == 'number' {
|
|
||||||
@return $value;
|
|
||||||
} @else if type-of($value) != 'string' {
|
|
||||||
$_: log('Value for `to-number` should be a number or a string.');
|
|
||||||
}
|
|
||||||
|
|
||||||
$first-character: str-slice($value, 1, 1);
|
|
||||||
$result: 0;
|
|
||||||
$digits: 0;
|
|
||||||
$minus: ($first-character == '-');
|
|
||||||
$numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
|
|
||||||
|
|
||||||
// Remove +/- sign if present at first character
|
|
||||||
@if ($first-character == '+' or $first-character == '-') {
|
|
||||||
$value: str-slice($value, 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
@for $i from 1 through str-length($value) {
|
|
||||||
$character: str-slice($value, $i, $i);
|
|
||||||
|
|
||||||
@if not (index(map-keys($numbers), $character) or $character == '.') {
|
|
||||||
@return to-length(if($minus, -$result, $result), str-slice($value, $i))
|
|
||||||
}
|
|
||||||
|
|
||||||
@if $character == '.' {
|
|
||||||
$digits: 1;
|
|
||||||
} @else if $digits == 0 {
|
|
||||||
$result: $result * 10 + map-get($numbers, $character);
|
|
||||||
} @else {
|
|
||||||
$digits: $digits * 10;
|
|
||||||
$result: $result + map-get($numbers, $character) / $digits;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@return if($minus, -$result, $result);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Add `$unit` to `$value`
|
|
||||||
///
|
|
||||||
/// @param {Number} $value - Value to add unit to
|
|
||||||
/// @param {String} $unit - String representation of the unit
|
|
||||||
///
|
|
||||||
/// @return {Number} - `$value` expressed in `$unit`
|
|
||||||
///
|
|
||||||
@function to-length($value, $unit) {
|
|
||||||
$units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
|
|
||||||
|
|
||||||
@if not index(map-keys($units), $unit) {
|
|
||||||
$_: log('Invalid unit `#{$unit}`.');
|
|
||||||
}
|
|
||||||
|
|
||||||
@return $value * map-get($units, $unit);
|
|
||||||
}
|
|
||||||
|
|
||||||
///
|
|
||||||
/// This mixin aims at redefining the configuration just for the scope of
|
|
||||||
/// the call. It is helpful when having a component needing an extended
|
|
||||||
/// configuration such as custom breakpoints (referred to as tweakpoints)
|
|
||||||
/// for instance.
|
|
||||||
///
|
|
||||||
/// @author Hugo Giraudel
|
|
||||||
///
|
|
||||||
/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`
|
|
||||||
/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`
|
|
||||||
///
|
|
||||||
/// @example scss - Extend the global breakpoints with a tweakpoint
|
|
||||||
/// @include media-context(('custom': 678px)) {
|
|
||||||
/// .foo {
|
|
||||||
/// @include media('>phone', '<=custom') {
|
|
||||||
/// // ...
|
|
||||||
/// }
|
|
||||||
/// }
|
|
||||||
/// }
|
|
||||||
///
|
|
||||||
/// @example scss - Extend the global media expressions with a custom one
|
|
||||||
/// @include media-context($tweak-media-expressions: ('all': 'all')) {
|
|
||||||
/// .foo {
|
|
||||||
/// @include media('all', '>phone') {
|
|
||||||
/// // ...
|
|
||||||
/// }
|
|
||||||
/// }
|
|
||||||
/// }
|
|
||||||
///
|
|
||||||
/// @example scss - Extend both configuration maps
|
|
||||||
/// @include media-context(('custom': 678px), ('all': 'all')) {
|
|
||||||
/// .foo {
|
|
||||||
/// @include media('all', '>phone', '<=custom') {
|
|
||||||
/// // ...
|
|
||||||
/// }
|
|
||||||
/// }
|
|
||||||
/// }
|
|
||||||
///
|
|
||||||
@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {
|
|
||||||
// Save global configuration
|
|
||||||
$global-breakpoints: $breakpoints;
|
|
||||||
$global-media-expressions: $media-expressions;
|
|
||||||
|
|
||||||
// Update global configuration
|
|
||||||
$breakpoints: map-merge($breakpoints, $tweakpoints) !global;
|
|
||||||
$media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global;
|
|
||||||
|
|
||||||
@content;
|
|
||||||
|
|
||||||
// Restore global configuration
|
|
||||||
$breakpoints: $global-breakpoints !global;
|
|
||||||
$media-expressions: $global-media-expressions !global;
|
|
||||||
}
|
|
||||||
|
|
||||||
////
|
|
||||||
/// include-media public exposed API
|
|
||||||
/// @author Eduardo Boucas
|
|
||||||
/// @access public
|
|
||||||
////
|
|
||||||
|
|
||||||
|
|
||||||
///
|
|
||||||
/// Generates a media query based on a list of conditions
|
|
||||||
///
|
|
||||||
/// @param {Arglist} $conditions - Media query conditions
|
|
||||||
///
|
|
||||||
/// @example scss - With a single set breakpoint
|
|
||||||
/// @include media('>phone') { }
|
|
||||||
///
|
|
||||||
/// @example scss - With two set breakpoints
|
|
||||||
/// @include media('>phone', '<=tablet') { }
|
|
||||||
///
|
|
||||||
/// @example scss - With custom values
|
|
||||||
/// @include media('>=358px', '<850px') { }
|
|
||||||
///
|
|
||||||
/// @example scss - With set breakpoints with custom values
|
|
||||||
/// @include media('>desktop', '<=1350px') { }
|
|
||||||
///
|
|
||||||
/// @example scss - With a static expression
|
|
||||||
/// @include media('retina2x') { }
|
|
||||||
///
|
|
||||||
/// @example scss - Mixing everything
|
|
||||||
/// @include media('>=350px', '<tablet', 'retina3x') { }
|
|
||||||
///
|
|
||||||
@mixin media($conditions...) {
|
|
||||||
// scss-lint:disable SpaceAroundOperator
|
|
||||||
@if ($im-media-support and length($conditions) == 0) or
|
|
||||||
(not $im-media-support and im-intercepts-static-breakpoint($conditions...)) {
|
|
||||||
@content;
|
|
||||||
} @else if ($im-media-support and length($conditions) > 0) {
|
|
||||||
@media #{unquote(parse-expression(nth($conditions, 1)))} {
|
|
||||||
// Recursive call
|
|
||||||
@include media(slice($conditions, 2)...) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,165 +0,0 @@
|
||||||
/* ---------------------------------- */
|
|
||||||
/* ==Grid Layout (grillade) */
|
|
||||||
/* ---------------------------------- */
|
|
||||||
|
|
||||||
// Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html
|
|
||||||
// Demo : http://codepen.io/raphaelgoetter/pen/ZYjwEB
|
|
||||||
|
|
||||||
// Usage in vanilla CSS:
|
|
||||||
// - <div class="grid-4"> for an equal fourth columns grid container
|
|
||||||
// - <div class="grid-2-1"> for an uneven columns grid container
|
|
||||||
|
|
||||||
// Usage with preprocessors : if you're using Sass, you can config grids variables :
|
|
||||||
// n = number of columns (default = 4) / g = gutter value (default = 1em)
|
|
||||||
// example : .grid-perso { @include grid(12, 10px); }
|
|
||||||
// ... or uneven grids :
|
|
||||||
// left = left ratio column (default = 2) / right = right ratio column (default = 1)
|
|
||||||
// example : .grid-perso { @include uneven-grid(2, 1, 10px); }
|
|
||||||
|
|
||||||
/* grid container */
|
|
||||||
[class*="#{$kna-namespace}grid-"] {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-left: -$grid-gutter;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* grid childs */
|
|
||||||
[class*="#{$kna-namespace}grid-"] > * {
|
|
||||||
box-sizing: border-box;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
width: calc(100% - #{$grid-gutter} - .01px);// @bugfix IE https://github.com/alsacreations/KNACSS/issues/133;
|
|
||||||
min-width: 0;
|
|
||||||
min-height: 0;
|
|
||||||
margin-left: $grid-gutter;
|
|
||||||
@include media('>tiny-screen', '<=small-screen') {
|
|
||||||
& {
|
|
||||||
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
|
||||||
}
|
|
||||||
&.grid-item-double {
|
|
||||||
width: calc(100% - #{$grid-gutter} - .01px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sass mixins for *equal* columns grid container
|
|
||||||
// example : .grid-perso { @include grid(12); }
|
|
||||||
@mixin grid($grid-number:$grid-number,$newgutter:$grid-gutter) {
|
|
||||||
@if $newgutter != $grid-gutter {
|
|
||||||
margin-left: -$newgutter;
|
|
||||||
}
|
|
||||||
& > * {
|
|
||||||
width: calc(100% * 1 / #{$grid-number} - #{$newgutter} - .01px);
|
|
||||||
@if $newgutter != $grid-gutter {
|
|
||||||
margin-left: $newgutter;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
& > .#{$kna-namespace}grid-item-double {
|
|
||||||
width: calc(100% * 2 / #{$grid-number} - #{$newgutter});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Examples : will be compiled in CSS
|
|
||||||
@include media('>small-screen') {
|
|
||||||
@for $i from 2 through 12 {
|
|
||||||
[class*="#{$kna-namespace}grid-#{$i}"] {
|
|
||||||
@include grid(#{$i});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive grid */
|
|
||||||
// example : .grid-4-small-2 will be 1 column (tiny) then 2 columns (small) then 4 columns
|
|
||||||
@include media('>tiny-screen', '<=small-screen') {
|
|
||||||
[class*="-small-4"] > * {
|
|
||||||
width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px);
|
|
||||||
}
|
|
||||||
[class*="-small-4"] > .grid-item-double {
|
|
||||||
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
|
||||||
}
|
|
||||||
[class*="-small-3"] > * {
|
|
||||||
width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px);
|
|
||||||
}
|
|
||||||
[class*="-small-3"] > .grid-item-double {
|
|
||||||
width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px);
|
|
||||||
}
|
|
||||||
[class*="-small-2"] > * {
|
|
||||||
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
|
||||||
}
|
|
||||||
[class*="-small-2"] > .grid-item-double {
|
|
||||||
width: calc(100% - #{$grid-gutter} - .01px);
|
|
||||||
}
|
|
||||||
[class*="-small-1"] > * {
|
|
||||||
width: calc(100% - #{$grid-gutter} - .01px);
|
|
||||||
}
|
|
||||||
[class*="-small-1"] > .grid-item-double {
|
|
||||||
width: calc(100% - #{$grid-gutter} - .01px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Sass mixins for *unequal* columns grid container
|
|
||||||
// example : .grid-perso { @include uneven-grid(2, 1); }
|
|
||||||
@mixin uneven-grid($grid-left:$grid-left, $grid-right:$grid-right, $newgutter:$grid-gutter) {
|
|
||||||
@if $newgutter != $grid-gutter {
|
|
||||||
margin-left: -$newgutter;
|
|
||||||
}
|
|
||||||
> * {
|
|
||||||
@if $newgutter != $grid-gutter {
|
|
||||||
margin-left: $newgutter;
|
|
||||||
width: calc(100% - #{$newgutter});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@include media('>small-screen') {
|
|
||||||
& > :nth-child(odd) {
|
|
||||||
$size: ($grid-left / ($grid-left + $grid-right)) * 100%;
|
|
||||||
width: calc(#{$size} - #{$newgutter});
|
|
||||||
}
|
|
||||||
& > :nth-child(even) {
|
|
||||||
$size: ($grid-right / ($grid-left + $grid-right)) * 100%;
|
|
||||||
width: calc(#{$size} - #{$newgutter});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Examples : will be compiled in CSS
|
|
||||||
|
|
||||||
.#{$kna-namespace}grid-2-1 {
|
|
||||||
@include uneven-grid(2,1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$kna-namespace}grid-1-2 {
|
|
||||||
@include uneven-grid(1,2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$kna-namespace}grid-3-1 {
|
|
||||||
@include uneven-grid(3,1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$kna-namespace}grid-1-3 {
|
|
||||||
@include uneven-grid(1,3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$kna-namespace}grid-3-2 {
|
|
||||||
@include uneven-grid(3,2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$kna-namespace}grid-2-3 {
|
|
||||||
@include uneven-grid(2,3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$kna-namespace}grid-4-1 {
|
|
||||||
@include uneven-grid(4,1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$kna-namespace}grid-1-4 {
|
|
||||||
@include uneven-grid(1,4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$kna-namespace}pull {
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
.#{$kna-namespace}push {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
339
sass/grids/_grillade.scss
Normal file
339
sass/grids/_grillade.scss
Normal file
|
|
@ -0,0 +1,339 @@
|
||||||
|
/* ---------------------------------- */
|
||||||
|
/* ==Grillade : Simple Grid System */
|
||||||
|
/* ---------------------------------- */
|
||||||
|
/* Doc : http://grillade.knacss.com */
|
||||||
|
|
||||||
|
// Grids variables
|
||||||
|
$grid-gutter: 1rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||||
|
$grid-gutter-l: $grid-gutter * 2;
|
||||||
|
$grid-gutter-xl: $grid-gutter * 4;
|
||||||
|
|
||||||
|
/* Grids common rules (for mono- and multi-lines grid) */
|
||||||
|
@media (min-width: ($tiny + 1)) {
|
||||||
|
[class*=" grid"],
|
||||||
|
[class^="grid"] {
|
||||||
|
& > * {
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-width: 0; /* avoid min-width: auto */
|
||||||
|
min-height: 0; /* avoid min-height: auto */
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter {
|
||||||
|
margin-right: -$grid-gutter / 2;
|
||||||
|
margin-left: -$grid-gutter / 2;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin-right: $grid-gutter / 2;
|
||||||
|
margin-left: $grid-gutter / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-l {
|
||||||
|
margin-right: -$grid-gutter-l / 2;
|
||||||
|
margin-left: -$grid-gutter-l / 2;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin-right: $grid-gutter-l / 2;
|
||||||
|
margin-left: $grid-gutter-l / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-xl {
|
||||||
|
margin-right: -$grid-gutter-xl / 2;
|
||||||
|
margin-left: -$grid-gutter-xl / 2;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin-right: $grid-gutter-xl / 2;
|
||||||
|
margin-left: $grid-gutter-xl / 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Mono-line grid system (.grid) */
|
||||||
|
.grid {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
flex: 1 1 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Multi-line grid system (.grid-X) */
|
||||||
|
[class*=" grid-"],
|
||||||
|
[class^="grid-"] {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% - .01px); /* @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; */
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter > * {
|
||||||
|
width: calc(100% - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-l > * {
|
||||||
|
width: calc(100% - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-xl > * {
|
||||||
|
width: calc(100% - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Grid offsets */
|
||||||
|
.push {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pull {
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
/* Grid order */
|
||||||
|
.grid-item-first {
|
||||||
|
order: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-item-last {
|
||||||
|
order: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="--reverse"] {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
// Sass mixin for Multi-line grid system
|
||||||
|
// example : .grid-perso { @include grid(12, 3rem); }
|
||||||
|
@mixin grid($grid-number:4, $new-gutter:$grid-gutter) {
|
||||||
|
& > * {
|
||||||
|
width: calc(100% * 1 / #{$grid-number} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter > * {
|
||||||
|
width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-l > * {
|
||||||
|
width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-xl > * {
|
||||||
|
width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
@if ($new-gutter != 0) {
|
||||||
|
@if ($new-gutter != $grid-gutter){
|
||||||
|
margin-right: -$new-gutter / 2;
|
||||||
|
margin-left: -$new-gutter / 2;
|
||||||
|
|
||||||
|
& > * {
|
||||||
|
margin-right: $new-gutter / 2;
|
||||||
|
margin-left: $new-gutter / 2;
|
||||||
|
width: calc(100% * 1 / #{$grid-number} - #{$new-gutter} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Constructing grids : will be compiled in CSS
|
||||||
|
@media (min-width: ($tiny + 1)) {
|
||||||
|
@for $i from 2 through 12{
|
||||||
|
[class*="grid-#{$i}"] {
|
||||||
|
@include grid(#{$i},0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Sizing individual children */
|
||||||
|
@media (min-width: ($tiny + 1)) {
|
||||||
|
.full {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% - .01px);
|
||||||
|
|
||||||
|
.has-gutter & {
|
||||||
|
width: calc(100% - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-l & {
|
||||||
|
width: calc(100% - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-xl & {
|
||||||
|
width: calc(100% - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.one-half {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(50% - .01px);
|
||||||
|
|
||||||
|
.has-gutter & {
|
||||||
|
width: calc(50% - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-l & {
|
||||||
|
width: calc(50% - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-xl & {
|
||||||
|
width: calc(50% - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.one-third {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 3 - .01px);
|
||||||
|
|
||||||
|
.has-gutter & {
|
||||||
|
width: calc(100% / 3 - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-l & {
|
||||||
|
width: calc(100% / 3 - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-xl & {
|
||||||
|
width: calc(100% / 3 - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.one-quarter {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 4 - .01px);
|
||||||
|
|
||||||
|
.has-gutter & {
|
||||||
|
width: calc(100% / 4 - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-l & {
|
||||||
|
width: calc(100% / 4 - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-xl & {
|
||||||
|
width: calc(100% / 4 - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.one-fifth {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 5 - .01px);
|
||||||
|
|
||||||
|
.has-gutter & {
|
||||||
|
width: calc(100% / 5 - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-l & {
|
||||||
|
width: calc(100% / 5 - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-xl & {
|
||||||
|
width: calc(100% / 5 - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.two-thirds {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 3 * 2 - .01px);
|
||||||
|
|
||||||
|
.has-gutter & {
|
||||||
|
width: calc(100% / 3 * 2 - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-l & {
|
||||||
|
width: calc(100% / 3 * 2 - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-xl & {
|
||||||
|
width: calc(100% / 3 * 2 - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.three-quarters {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: calc(100% / 4 * 3 - .01px);
|
||||||
|
|
||||||
|
.has-gutter & {
|
||||||
|
width: calc(100% / 4 * 3 - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-l & {
|
||||||
|
width: calc(100% / 4 * 3 - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-gutter-xl & {
|
||||||
|
width: calc(100% / 4 * 3 - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Responsive Small Breakpoint */
|
||||||
|
// -small-X suffix means "X columns on small screen"
|
||||||
|
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until small) then 4 columns
|
||||||
|
@media (min-width: ($tiny + 1)) and (max-width: $small) {
|
||||||
|
[class*="-small-4"] {
|
||||||
|
& > * {
|
||||||
|
width: calc(100% / 4 - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter > * {
|
||||||
|
width: calc(100% / 4 - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-l > * {
|
||||||
|
width: calc(100% / 4 - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-xl > * {
|
||||||
|
width: calc(100% / 4 - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-small-3"] {
|
||||||
|
& > * {
|
||||||
|
width: calc(100% / 3 - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter > * {
|
||||||
|
width: calc(100% / 3 - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-l > * {
|
||||||
|
width: calc(100% / 3 - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-xl > * {
|
||||||
|
width: calc(100% / 3 - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-small-2"] {
|
||||||
|
& > * {
|
||||||
|
width: calc(100% / 2 - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter > * {
|
||||||
|
width: calc(100% / 2 - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-l > * {
|
||||||
|
width: calc(100% / 2 - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-xl > * {
|
||||||
|
width: calc(100% / 2 - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[class*="-small-1"] {
|
||||||
|
& > * {
|
||||||
|
width: calc(100% - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter > * {
|
||||||
|
width: calc(100% - #{$grid-gutter} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-l > * {
|
||||||
|
width: calc(100% - #{$grid-gutter-l} - .01px);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.has-gutter-xl > * {
|
||||||
|
width: calc(100% - #{$grid-gutter-xl} - .01px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
/*!
|
/*!
|
||||||
* www.KNACSS.com V5.0.1 (24 mai 2016) @author: Alsacreations, Raphael Goetter
|
* www.KNACSS.com V6.0.0 (27 septembre 2016) @author: Alsacreations, Raphael Goetter
|
||||||
* Licence WTFPL http://www.wtfpl.net/
|
* Licence WTFPL http://www.wtfpl.net/
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
@ -12,43 +12,49 @@
|
||||||
/* 3- Print (print quick reset) */
|
/* 3- Print (print quick reset) */
|
||||||
/* 4- Stylings (minor stylings) */
|
/* 4- Stylings (minor stylings) */
|
||||||
/* 5- Misc (skip links, hyphens) */
|
/* 5- Misc (skip links, hyphens) */
|
||||||
/* (6- WordPress reset (disabled by default)) */
|
/* 6- Tables (data tables consistency) */
|
||||||
/* 7- Global Layout (alignment, modules, positionning) */
|
/* 7- Forms (forms consistency) */
|
||||||
/* 8- Grid Layout (grillade) */
|
/* 8- Media object */
|
||||||
/* 9- Tables (data tables consistency) */
|
/* 9- Autogrid object */
|
||||||
/* 10- Forms (forms consistency) */
|
/* 10- Global Layout (alignment, modules, positionning) */
|
||||||
/* 11- Helpers (width and spacers helpers) */
|
/* 11- Helpers (width and spacers helpers) */
|
||||||
/* 12- Responsive (Responsive Web Design helpers) */
|
/* (12- WordPress reset (disabled by default)) */
|
||||||
|
/* 13- Responsive (Responsive Web Design helpers) */
|
||||||
|
/* 14- Grid Layout (grillade) */
|
||||||
|
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
/* ==Normalize (basic reset) */
|
/* ==Normalize (basic reset) */
|
||||||
/* ---------------------------------- */
|
/* ---------------------------------- */
|
||||||
|
|
||||||
@import "_normalize/_normalize.scss"; // normalize (basic reset)
|
@import "_vendor/_normalize.scss"; // normalize (basic reset)
|
||||||
@import "_include-media/_include-media.scss"; // include-media
|
|
||||||
|
|
||||||
// WARNING : you should comment the following @import (config)
|
// WARNING : you should comment the following @import (variables)
|
||||||
// and move config file from knacss folder to your own project folder!
|
// and move variables file from knacss folder to your own project folder!
|
||||||
@import "_config-variables.scss";
|
@import "_config/_variables.scss";
|
||||||
|
|
||||||
|
@import "_config/_breakpoints.scss";
|
||||||
|
@import "_config/_mixins.scss";
|
||||||
|
|
||||||
// Libraries
|
// Libraries
|
||||||
@import "_library-base.scss"; // basic styles
|
@import "library/_base.scss"; // basic styles
|
||||||
@import "_library-print.scss"; // print quick reset
|
@import "library/_print.scss"; // print quick reset
|
||||||
@import "_library-styling.scss"; // minor stylings
|
@import "library/_styling.scss"; // minor stylings
|
||||||
@import "_library-misc.scss"; // skip links, hyphens
|
@import "library/_misc.scss"; // skip links, hyphens
|
||||||
// @import "_library-wordpress.scss"; // WordPress reset and basic styles
|
@import "library/_tables.scss"; // data tables consistency
|
||||||
|
@import "library/_forms.scss"; // forms consistency
|
||||||
// Layout
|
|
||||||
@import "_layout-general.scss"; // alignment, modules, positionning
|
|
||||||
@import "_layout-grids.scss"; // grids
|
|
||||||
|
|
||||||
// Objects
|
// Objects
|
||||||
@import "_object-tables.scss"; // data tables consistency
|
@import "objects/_media.scss"; // media object
|
||||||
@import "_object-forms.scss"; // forms consistency
|
@import "objects/_autogrid.scss"; // media autogrid
|
||||||
|
|
||||||
// Overrides
|
// Utilities
|
||||||
@import "_override-helpers.scss"; // width and spacers helpers
|
@import "utilities/_layout.scss"; // alignment, modules, positionning
|
||||||
@import "_override-responsive.scss"; // Responsive Web Design helpers
|
@import "utilities/_helpers.scss"; // width and spacers helpers
|
||||||
|
// @import "utilities/_wordpress.scss"; // WordPress reset and basic styles
|
||||||
|
@import "utilities/_responsive.scss"; // Responsive Web Design helpers
|
||||||
|
|
||||||
|
// Grids
|
||||||
|
@import "grids/_grillade.scss"; // grids
|
||||||
|
|
||||||
|
|
||||||
/* ----------------------------- */
|
/* ----------------------------- */
|
||||||
|
|
|
||||||
|
|
@ -11,26 +11,6 @@ html {
|
||||||
box-sizing: inherit;
|
box-sizing: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul,
|
|
||||||
ol {
|
|
||||||
padding-left: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* height auto only for non SVG images */
|
|
||||||
img:not([src$=".svg"]) {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote,
|
|
||||||
figure {
|
|
||||||
margin-left: 0;
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
/* set base font-size to equiv "10px", which is adapted to rem unit */
|
/* set base font-size to equiv "10px", which is adapted to rem unit */
|
||||||
font-size: 62.5%;
|
font-size: 62.5%;
|
||||||
|
|
@ -54,6 +34,21 @@ a {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
padding-left: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote,
|
||||||
|
figure {
|
||||||
|
margin-left: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* font-sizing for content */
|
/* font-sizing for content */
|
||||||
p,
|
p,
|
||||||
.#{$kna-namespace}p-like,
|
.#{$kna-namespace}p-like,
|
||||||
|
|
@ -189,7 +184,6 @@ svg {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* margin-bottom on tables */
|
img {
|
||||||
table {
|
height: auto;
|
||||||
margin-bottom: $medium-value;
|
|
||||||
}
|
}
|
||||||
|
|
@ -24,7 +24,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
// hyphens on tiny screens
|
// hyphens on tiny screens
|
||||||
@include media('<=tiny-screen') {
|
@media (max-width: $tiny) {
|
||||||
/* you shall not pass */
|
/* you shall not pass */
|
||||||
div,
|
div,
|
||||||
textarea,
|
textarea,
|
||||||
|
|
@ -39,10 +39,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// use .no-wrapping to disallow hyphens on small screens
|
// use .no-wrapping to disallow hyphens on tiny screens
|
||||||
@include media('<=tiny-screen') {
|
@media (max-width: $tiny) {
|
||||||
.no-wrapping {
|
.no-wrapping {
|
||||||
word-wrap: normal;
|
word-wrap: normal;
|
||||||
hyphens: manual;
|
hyphens: manual;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// SVG width IE fix
|
||||||
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||||
|
img[src$=".svg"] {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -9,6 +9,7 @@ table,
|
||||||
table-layout: fixed;
|
table-layout: fixed;
|
||||||
border-collapse: collapse;
|
border-collapse: collapse;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
margin-bottom: $medium-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}table {
|
.#{$kna-namespace}table {
|
||||||
22
sass/objects/_autogrid.scss
Normal file
22
sass/objects/_autogrid.scss
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
/* Autogrid object */
|
||||||
|
@media (min-width: ($tiny + 1)) {
|
||||||
|
[class^="autogrid"],
|
||||||
|
[class*=" autogrid"] {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
[class^="autogrid"] > *,
|
||||||
|
[class*=" autogrid"] > * {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0; /* avoid min-width:auto */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Autogrid variants */
|
||||||
|
@media (min-width: ($tiny + 1)) {
|
||||||
|
.has-gutter > *:not(:first-child) {
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
[class*="--reverse"] {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
21
sass/objects/_media.scss
Normal file
21
sass/objects/_media.scss
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
/* Media object */
|
||||||
|
@media (min-width: ($tiny + 1)) {
|
||||||
|
.o-media {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.o-media-content {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0; /* avoid min-width:auto */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Media variants */
|
||||||
|
@media (min-width: ($tiny + 1)) {
|
||||||
|
.o-media--reverse {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
.o-media-figure--center {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -116,7 +116,7 @@ ul.unstyled {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media('>=400px') {
|
@media (min-width: 401px) {
|
||||||
.#{$kna-namespace}w400p {
|
.#{$kna-namespace}w400p {
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
@ -130,7 +130,7 @@ ul.unstyled {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media('>=700px') {
|
@media (min-width: 701px) {
|
||||||
|
|
||||||
.#{$kna-namespace}w700p {
|
.#{$kna-namespace}w700p {
|
||||||
width: 700px;
|
width: 700px;
|
||||||
|
|
@ -141,7 +141,7 @@ ul.unstyled {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media('>=960px') {
|
@media (min-width: 961px) {
|
||||||
.#{$kna-namespace}w960p {
|
.#{$kna-namespace}w960p {
|
||||||
width: 960px;
|
width: 960px;
|
||||||
}
|
}
|
||||||
|
|
@ -9,15 +9,12 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* blocks that needs to be placed under floats */
|
/* blocks that needs to be placed under floats */
|
||||||
.clear,
|
.clear {
|
||||||
.#{$kna-namespace}line,
|
|
||||||
.#{$kna-namespace}row {
|
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* blocks that must contain floats */
|
/* blocks that must contain floats */
|
||||||
.clearfix,
|
.clearfix {
|
||||||
.#{$kna-namespace}line {
|
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
display: table;
|
display: table;
|
||||||
|
|
@ -75,24 +72,6 @@ img.#{$kna-namespace}fr {
|
||||||
margin-bottom: $tiny-value;
|
margin-bottom: $tiny-value;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* table layout */
|
|
||||||
.#{$kna-namespace}row {
|
|
||||||
display: table;
|
|
||||||
table-layout: fixed;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$kna-namespace}row > *,
|
|
||||||
.#{$kna-namespace}col {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* no table-cell for script tag when body is a .row */
|
|
||||||
body > script {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* inline-block */
|
/* inline-block */
|
||||||
.#{$kna-namespace}inbl {
|
.#{$kna-namespace}inbl {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
/* large screens */
|
/* large screens */
|
||||||
/* ------------- */
|
/* ------------- */
|
||||||
|
|
||||||
@include media('>=large-screen') {
|
@media (min-width: ($large + 1)) {
|
||||||
|
|
||||||
/* layouts for large screens */
|
/* layouts for large screens */
|
||||||
.#{$kna-namespace}large-hidden {
|
.#{$kna-namespace}large-hidden {
|
||||||
|
|
@ -25,15 +25,6 @@
|
||||||
float: none;
|
float: none;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
.#{$kna-namespace}large-row {
|
|
||||||
display: table;
|
|
||||||
table-layout: fixed;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
.#{$kna-namespace}large-col {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* widths for large screens */
|
/* widths for large screens */
|
||||||
.#{$kna-namespace}large-w25 {
|
.#{$kna-namespace}large-w25 {
|
||||||
|
|
@ -41,7 +32,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}large-w33 {
|
.#{$kna-namespace}large-w33 {
|
||||||
width: 33.3333% !important;
|
width: 33.333333% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}large-w50 {
|
.#{$kna-namespace}large-w50 {
|
||||||
|
|
@ -49,7 +40,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}large-w66 {
|
.#{$kna-namespace}large-w66 {
|
||||||
width: 66.6666% !important;
|
width: 66.666666% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}large-w75 {
|
.#{$kna-namespace}large-w75 {
|
||||||
|
|
@ -77,7 +68,7 @@
|
||||||
/* medium screens */
|
/* medium screens */
|
||||||
/* -------------- */
|
/* -------------- */
|
||||||
|
|
||||||
@include media('>=medium-screen', '<large-screen') {
|
@media (min-width: ($small + 1)) and (max-width: $large) {
|
||||||
|
|
||||||
/* layouts for medium screens */
|
/* layouts for medium screens */
|
||||||
.#{$kna-namespace}medium-hidden {
|
.#{$kna-namespace}medium-hidden {
|
||||||
|
|
@ -98,24 +89,13 @@
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}medium-row {
|
|
||||||
display: table;
|
|
||||||
table-layout: fixed;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$kna-namespace}medium-col {
|
|
||||||
display: table-cell;
|
|
||||||
vertical-align: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* widths for medium screens */
|
/* widths for medium screens */
|
||||||
.#{$kna-namespace}medium-w25 {
|
.#{$kna-namespace}medium-w25 {
|
||||||
width: 25% !important;
|
width: 25% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}medium-w33 {
|
.#{$kna-namespace}medium-w33 {
|
||||||
width: 33.3333% !important;
|
width: 33.333333% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}medium-w50 {
|
.#{$kna-namespace}medium-w50 {
|
||||||
|
|
@ -123,7 +103,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}medium-w66 {
|
.#{$kna-namespace}medium-w66 {
|
||||||
width: 66.6666% !important;
|
width: 66.666666% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}medium-w75 {
|
.#{$kna-namespace}medium-w75 {
|
||||||
|
|
@ -151,7 +131,7 @@
|
||||||
/* small screens */
|
/* small screens */
|
||||||
/* ------------- */
|
/* ------------- */
|
||||||
|
|
||||||
@include media('>=small-screen', '<medium-screen') {
|
@media (min-width: ($tiny + 1)) and (max-width: $small) {
|
||||||
|
|
||||||
/* layouts for small screens */
|
/* layouts for small screens */
|
||||||
.#{$kna-namespace}small-hidden {
|
.#{$kna-namespace}small-hidden {
|
||||||
|
|
@ -172,24 +152,13 @@
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}small-row {
|
|
||||||
display: table !important;
|
|
||||||
table-layout: fixed !important;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$kna-namespace}small-col {
|
|
||||||
display: table-cell !important;
|
|
||||||
vertical-align: top !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* widths for small screens */
|
/* widths for small screens */
|
||||||
.#{$kna-namespace}small-w25 {
|
.#{$kna-namespace}small-w25 {
|
||||||
width: 25% !important;
|
width: 25% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}small-w33 {
|
.#{$kna-namespace}small-w33 {
|
||||||
width: 33.3333% !important;
|
width: 33.333333% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}small-w50 {
|
.#{$kna-namespace}small-w50 {
|
||||||
|
|
@ -197,7 +166,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}small-w66 {
|
.#{$kna-namespace}small-w66 {
|
||||||
width: 66.6666% !important;
|
width: 66.666666% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}small-w75 {
|
.#{$kna-namespace}small-w75 {
|
||||||
|
|
@ -231,7 +200,7 @@
|
||||||
/* tiny screens */
|
/* tiny screens */
|
||||||
/* ------------ */
|
/* ------------ */
|
||||||
|
|
||||||
@include media('<small-screen') {
|
@media (max-width: $tiny) {
|
||||||
|
|
||||||
/* quick small resolution reset */
|
/* quick small resolution reset */
|
||||||
.#{$kna-namespace}mod,
|
.#{$kna-namespace}mod,
|
||||||
|
|
@ -250,11 +219,6 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}row {
|
|
||||||
display: block !important;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* layouts for tiny screens */
|
/* layouts for tiny screens */
|
||||||
.#{$kna-namespace}tiny-hidden {
|
.#{$kna-namespace}tiny-hidden {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
|
|
@ -274,35 +238,13 @@
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}tiny-row {
|
|
||||||
display: table !important;
|
|
||||||
table-layout: fixed !important;
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.#{$kna-namespace}tiny-col {
|
|
||||||
display: table-cell !important;
|
|
||||||
vertical-align: top !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
th,
|
|
||||||
td {
|
|
||||||
display: block;
|
|
||||||
width: auto;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* widths for tiny screens */
|
/* widths for tiny screens */
|
||||||
.#{$kna-namespace}tiny-w25 {
|
.#{$kna-namespace}tiny-w25 {
|
||||||
width: 25% !important;
|
width: 25% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}tiny-w33 {
|
.#{$kna-namespace}tiny-w33 {
|
||||||
width: 33.3333% !important;
|
width: 33.333333% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}tiny-w50 {
|
.#{$kna-namespace}tiny-w50 {
|
||||||
|
|
@ -310,7 +252,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}tiny-w66 {
|
.#{$kna-namespace}tiny-w66 {
|
||||||
width: 66.6666% !important;
|
width: 66.666666% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.#{$kna-namespace}tiny-w75 {
|
.#{$kna-namespace}tiny-w75 {
|
||||||
Loading…
Reference in a new issue