diff --git a/README.md b/README.md index b20c88e..951717c 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,6 @@ http://www.knacss.com KNACSS, c'est un peu comme une feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign). -
- KNACSS prend en charge les styles de base, mais également la typographie, les modèles de boîte, les alignements et positionnements d'éléments, les grilles de mise en page, dans l'esprit d'être adapté à toutes les tailles d'écran (reponsive). Le tout automatiquement ! Conçu par l'agence web [Alsacreations.fr](http://alsacreations.fr) et pensé pour être couplé avec des préprocesseurs tels que LESS ou Sass, le micro-framework KNACSS est employé quotidiennement sur toute sorte de projets web quel que soit son type ou son envergure. @@ -17,12 +15,14 @@ La version courte est "il n'y a rien à installer". Selon votre environnement de travail vous suffit de récupérer la feuille de styles : - en version [CSS classique](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss-unminified.css) (ou [minifié](vhttps://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss.css)) -- en version [LESS](https://github.com/raphaelgoetter/KNACSS/tree/master/less) - en version [Sass](https://github.com/raphaelgoetter/KNACSS/tree/master/sass) -_Les versions LESS et Sass seront bien évidemment plus malléables grâce à l'apport de variables et fonctions._ +_La version Sass sera bien évidemment plus malléable grâce à l'apport de variables et fonctions._ -À noter que KNACSS est basé sur un socle [Normalize.css](http://necolas.github.io/normalize.css/), célèbre - et éprouvé - reset CSS employé par Twitter, Github, Bootstrap, Guardian, etc. +À noter que KNACSS est basé sur deux outils : + +- [Normalize.css](http://necolas.github.io/normalize.css/), célèbre - et éprouvé - reset CSS employé par Twitter, Github, Bootstrap, Guardian, etc. +- [include-media](http://include-media.com/), mixins Sass pour la gestion des Media Queries. ## Usage @@ -34,81 +34,81 @@ Il est également possible de l'installer (toutes versions) via [Bower](http://b ## Compatibilité -KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs à partir d'IE8 inclus. +KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs à partir d'IE10 inclus. -Seules exceptions : -- les positionnements avancés à base de Flexbox (IE10+ minimum), c'est à dire toutes les classes débutant par `.flex-` -- les grilles de mise en page, également basées sur flexbox (IE10, Android 4.4+), c'est à dire toutes les classes débutant par `.grid-`. Note : une alternative, basée sur `inline-block` est cependant proposée automatiquement pour les anciens navigateurs (IE8, Android 2). +## RTFM! + +KNACSS se veut être un outil simple (contrairement aux usines à gaz que sont Bootstrap ou Foundation), mais évolutif. +La contrepartie est que cela nécessite de votre part de bonnes connaissances en CSS et un petit effort de compréhension et de d'apprentissage des mécanismes de l'outil. + +Une [**documentation**](https://github.com/raphaelgoetter/KNACSS/tree/master/doc) détaillée et illustrée est en cours de rédaction. Je vous invite vivement à la parcourir avant de vous jeter sur KNACSS. + +Sachez qu'un [pense-bête en PDF](http://knacss.com/KNACSS-cheatsheet.pdf) est également disponible pour vous rappeler des classes utiles de KNACSS. ## Juste une grille ? Grillade ! KNACSS en version complète ne vous convient pas ? Seule la grille flexbox vous intéresse ? Bienvenue dans *Grillade* ! -### votre grillade avec LESS ? +- en version [CSS classique](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.css) (parfaitement autonome et ne pèse que 4ko seulement !) +- en version [Sass](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.scss) (avec variables) -Il est possible de n'utiliser KNACSS que pour sa fonctionnalité de grille de positionnement et de bénéficier de colonnes égales, inégales, responsive, des offsets, des pull et push et des mises en exergue. Bref, de [tout l'attirail des grilles KNACSS](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md). - -Il vous suffit pour cela de récupérer le fichier suivant : [grillade.less](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.less) - -Ce fichier n'est rien d'autre que la concaténation de deux fichiers essentiels : -- `_00-config.less` (nécessaire pour les variables, les tailles de gouttières et les valeurs de breakpoints) -- `_03-grids.less` (ben oui, quand même) - -### votre grillade plutôt nature ? - -Vous souhaitez simplement bénéficier d'une grille de mise en page simple mais fonctionnelle, en pur CSS sans passer par LESS ou Sass ? - -Alors contentez-vous du fichier grillade.css, il est parfaitement autonome et ne pèse que 4ko seulement ! - -Par contre, n'oubliez quand même pas de lire [la documentation](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md) que l'on a concoctée rien que pour vous. - -## Documentation de KNACSS - -KNACSS se veut être un outil simple (contrairement aux usines à gaz que sont Bootstrap ou Foundation), mais évolutif. -La contrepartie est que cela nécessite de votre part de bonnes connaissances en CSS et un petit effort de compréhension et de d'apprentissage des mécanismes de l'outil. - -Je vous invite vivement à parcourir la [**documentation**](https://github.com/raphaelgoetter/KNACSS/tree/master/doc) avant de vous jeter sur KNACSS. - -Sachez qu'un [pense-bête en PDF](http://knacss.com/KNACSS-cheatsheet.pdf) est également disponible pour vous rappeler des classes utiles de KNACSS. - -

Vous y trouverez en détail, avec codes et illustrations, les différentes sections suivantes :

-
    -
  1. Comment débuter avec KNACSS
    2. -
  2. Typographie et reset
    3. -
  3. Gérer les alignements de base
    4. -
  4. Gérer le positionnement des éléments
    5. -
  5. Construire des grilles de mise en page
    6. -
  6. Styler les tableaux
    7. -
  7. Styler les formulaires
    8. -
  8. Classes "visuelles" (marges et largeurs)
    9. -
  9. Responsive Webdesign
    10. -
  10. Styles pour l'impression
    11. -
  11. Styles divers (césures, Google Maps, liens d'évitement)
    12. -
  12. Adaptations pour WordPress
    13. -
+Dans tous les cas n'oubliez quand même pas de lire [la documentation](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md) que l'on a concoctée rien que pour vous. ## Préprocesseurs -KNACSS est conçu et pensé pour être adapté aux préprocesseurs que sont LESS et Sass. Nous employons LESS en interne, nos fichiers de travail sont donc des `.less` et non des `.css` (cela fonctionne aussi avec Sass). +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/less/_00-config.less) 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 [fichier de configuration](https://github.com/raphaelgoetter/KNACSS/blob/master/sass/_config-variables.scss) contenant toutes les variables du projet est intégré. Libre à vous de le modifier selon les contraintes de votre projet. -**Attention**, si vous importez KNACSS automatiquement via Bower par exemple (dans un dossier `vendor`), ce fichier de configuration risque d'être écrasé à chaque mise à jour de KNACSS. Nous vous invitons à en faire une copie dans votre dossier de travail et à commenter l'appel au fichier de config de `vendor`. +**Attention**, si vous importez KNACSS automatiquement via Bower (par exemple dans un dossier `vendor`), ce fichier de configuration risque d'être écrasé à chaque mise à jour de KNACSS. **Nous vous invitons à en faire une copie dans votre dossier de travail et à commenter l'appel au fichier de config de `vendor`**. + +Dans le cas d'un usage via préprocesseur, 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/knacss.scss` qui importe tous les fichiers que vous risquez d'employez dans votre projet. + +En cours de développement, il vous suffit de compiler ce fichier `sass/knacss.scss` pour obtenir vos fichiers CSS utiles. ### 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. -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** (paramètres de Autoprefixer : "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 les versions LESS et 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 aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/). + +### 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.*.*`. + +Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 5 de KNACSS : + +#### Modifications majeures depuis la `4.*.*` + +- suppression de la version LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge) +- suppression des fallbacks pour IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge) +- restructuration / renommage des fichiers avec préfixes `_config-`, `_layout-`, `_library-`, `_object-`, `_override-` +- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent) +- ajout de la library include-media (http://include-media.com/) +- grille "grillade" à présent en mobile first + +#### Modifications majeures depuis la `3.*.*` + +- La rétrocompatibilité n'est pas préservée pour certains noms de classes ( `.left`, `.start`, `.fl`, `.table-`, `.flex-start`, `.flex-end`) : `.left` ne correspond plus à un `float: left` mais à un `margin-right: auto`, il faut dorénavant employer `.fl` pour obtenir un flottant à gauche; `.right` ne correspond plus à un `float: right` mais à un `margin-left: auto`, il faut dorénavant employer `.fr` pour obtenir un flottant à droite; `.start` et `.end` n'existent plus +- Les noms des conteneurs de grille ont changé et nécessitent systématiquement un trait d'union : ancien nommage : `.grid2`, `.grid1-3`; nouveau nommage : `.grid-2`, `.grid-1-3` +- Les classes relatives à flexbox ont été renommées pour ne pas entrer en conflit avec des outils tels que Modernizer (qui ajoutent aux-aussi ce genre de classes). Nouveau nommage : +`.flex-container, .flex-container-h`, `.flex-container-v`, `.flex-item-fluid`, `.flex-item-center`, `.flex-item-first, .flex-item-medium, .flex-item-last` + +### Utilisateur de SPIP ? + +Le CMS SPIP impose une classe générique `.fr` sur l'élément ``, or cette classe est également employée pour les positionnements flottants dans KNACSS. + +Si vous êtes un utilisateur de SPIP, nous vous conseillons de modifier les fichiers CSS de KNACSS et de remplacer les classes `.fr` et `.fl` par `:not(html) .fr` et `:not(html) .fl` ## Liens utiles * Site web de KNACSS : http://knacss.com * [**Documentation détaillée**](https://github.com/raphaelgoetter/KNACSS/tree/master/doc) * Sur Alsacreations.com : ["découverte du framework KNACSS"](http://www.alsacreations.com/tuto/lire/1577-decouverte-du-framework-css-KNACSS.html) -* Générateur de gabarits HTML/CSS : ["Schnaps.it"](http://schnaps.it/) diff --git a/bower.json b/bower.json index 87d2470..cdbe824 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "KNACSS", - "version": "4.4.5", + "version": "5.0.0", "homepage": "http://www.knacss.com/", "authors": [ "Raphaël GOETTER, Alsacreations" diff --git a/changelog.md b/changelog.md index 4cd30da..bd742e1 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,18 @@ +# changelog v5.0.0 (23 mai 2016) +- suppression du support IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge) +- suppression du support LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge pour des raisons de maintenabilité) +- mise à jour vers Normalize 4.1.1 : https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md +- restructuration / renommage des fichiers avec préfixes `_config-`, `_layout-`, `_library-`, `_object-`, `_override-` +- ajout de la library include-media (http://include-media.com/) pour faciliter la gestion des media queries +- adaptation des variables de breakpoint pour les rendre compatibles avec include-media +- grille "grillade" à présent en mobile first (par défaut 1 colonne sur "tiny", 2 colonnes sur "small", valeurs modifiables) +- nommage de variables préfixé pour plus de maintenabilité : `$gutter` -> `$grid-gutter`, `$number` -> `$grid-number`, `$left` -> `$grid-left` et `$right` -> `$grid-right` +- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent) +- ajout des éléments de layout : `.grid-item-first`, `.grid-item-medium` et `.grid-item-last` +- ajout de Table des Matières dans la feuille de style non minifiée +- adaptation des fichiers gulpfile, package.json et bower.json +- mise à jour de la documentation + # changelog v4.4.5 (1er avril 2016) - mise à jour vers Normalize 4 : https://github.com/necolas/normalize.css/blob/4.0.0/CHANGELOG.md diff --git a/css/grillade.css b/css/grillade.css index c5b59af..f3be279 100644 --- a/css/grillade.css +++ b/css/grillade.css @@ -1,4 +1 @@ -/*! -* www.KNACSS.com V4.4.4 (23 janvier 2016) @author: Raphael Goetter, Alsacreations -* Licence WTFPL http://www.wtfpl.net/ -*/[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem;letter-spacing:-.31em}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% * 1 / 4 - 2rem - .01px);min-width:0;margin-left:2rem;display:inline-block;vertical-align:top;letter-spacing:normal}[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.flex-item-double{width:calc(100% * 2 / 2 - 2rem - .01px)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.flex-item-double{width:calc(100% * 2 / 4 - 2rem - .01px)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.flex-item-double{width:calc(100% * 2 / 5 - 2rem - .01px)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.flex-item-double{width:calc(100% * 2 / 6 - 2rem - .01px)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.flex-item-double{width:calc(100% * 2 / 7 - 2rem - .01px)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.flex-item-double{width:calc(100% * 2 / 8 - 2rem - .01px)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.flex-item-double{width:calc(100% * 2 / 10 - 2rem - .01px)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.flex-item-double{width:calc(100% * 2 / 12 - 2rem - .01px)}@media (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.flex-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.flex-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.flex-item-double{width:calc(100% - 2rem - .01px)}}@media (max-width:320px){[class*="-tiny-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-tiny-2"]>.flex-item-double,[class*="-tiny-1"]>*,[class*="-tiny-1"]>.flex-item-double{width:calc(100% - 2rem - .01px)}}.grid-2-1>:nth-child(odd){width:calc(66.66666666666666% - 2rem - .01px)}.grid-2-1>:nth-child(even){width:calc(33.33333333333333% - 2rem - .01px)}@media (max-width:640px){.grid-2-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-2>:nth-child(odd){width:calc(33.33333333333333% - 2rem - .01px)}.grid-1-2>:nth-child(even){width:calc(66.66666666666666% - 2rem - .01px)}@media (max-width:640px){.grid-1-2>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-3-1>:nth-child(odd){width:calc(75% - 2rem - .01px)}.grid-3-1>:nth-child(even){width:calc(25% - 2rem - .01px)}@media (max-width:640px){.grid-3-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-3>:nth-child(odd){width:calc(25% - 2rem - .01px)}.grid-1-3>:nth-child(even){width:calc(75% - 2rem - .01px)}@media (max-width:640px){.grid-1-3>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-3-2>:nth-child(odd){width:calc(60% - 2rem - .01px)}.grid-3-2>:nth-child(even){width:calc(40% - 2rem - .01px)}@media (max-width:640px){.grid-3-2>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-2-3>:nth-child(odd){width:calc(40% - 2rem - .01px)}.grid-2-3>:nth-child(even){width:calc(60% - 2rem - .01px)}@media (max-width:640px){.grid-2-3>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-4-1>:nth-child(odd){width:calc(80% - 2rem - .01px)}.grid-4-1>:nth-child(even){width:calc(20% - 2rem - .01px)}@media (max-width:640px){.grid-4-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-4>:nth-child(odd){width:calc(20% - 2rem - .01px)}.grid-1-4>:nth-child(even){width:calc(80% - 2rem - .01px)}@media (max-width:640px){.grid-1-4>:nth-child(n){width:calc(100% - 2rem - .01px)}}.pull{margin-right:auto}.push{margin-left:auto} \ No newline at end of file +[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - 2rem - .01px);min-width:0;min-height:0;margin-left:2rem}@media (min-width:321px) and (max-width:640px){[class*=grid-]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.grid-item-double{width:calc(100% * 2 / 2 - 2rem)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.grid-item-double{width:calc(100% * 2 / 4 - 2rem)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.grid-item-double{width:calc(100% * 2 / 5 - 2rem)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.grid-item-double{width:calc(100% * 2 / 6 - 2rem)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.grid-item-double{width:calc(100% * 2 / 7 - 2rem)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.grid-item-double{width:calc(100% * 2 / 8 - 2rem)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9]>.grid-item-double{width:calc(100% * 2 / 9 - 2rem)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.grid-item-double{width:calc(100% * 2 / 10 - 2rem)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11]>.grid-item-double{width:calc(100% * 2 / 11 - 2rem)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.grid-item-double{width:calc(100% * 2 / 12 - 2rem)}}@media (min-width:321px) and (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.grid-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.grid-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){.grid-2-1 :nth-child(odd){width:calc(66.66667% - 2rem)}.grid-1-2 :nth-child(odd),.grid-2-1 :nth-child(even){width:calc(33.33333% - 2rem)}.grid-1-2 :nth-child(even){width:calc(66.66667% - 2rem)}.grid-3-1 :nth-child(odd){width:calc(75% - 2rem)}.grid-1-3 :nth-child(odd),.grid-3-1 :nth-child(even){width:calc(25% - 2rem)}.grid-1-3 :nth-child(even){width:calc(75% - 2rem)}.grid-3-2 :nth-child(odd){width:calc(60% - 2rem)}.grid-2-3 :nth-child(odd),.grid-3-2 :nth-child(even){width:calc(40% - 2rem)}.grid-2-3 :nth-child(even){width:calc(60% - 2rem)}.grid-4-1 :nth-child(odd){width:calc(80% - 2rem)}.grid-1-4 :nth-child(odd),.grid-4-1 :nth-child(even){width:calc(20% - 2rem)}.grid-1-4 :nth-child(even){width:calc(80% - 2rem)}}.pull{margin-right:auto}.push{margin-left:auto} \ No newline at end of file diff --git a/css/grillade.less b/css/grillade.less deleted file mode 100644 index 8206fda..0000000 --- a/css/grillade.less +++ /dev/null @@ -1,252 +0,0 @@ -/*! -* www.KNACSS.com V4.4.4 (23 janvier 2016) @author: Raphael Goetter, Alsacreations -* Licence WTFPL http://www.wtfpl.net/ -*/ - -// Config file and project variables - -// font sizes -@base-font-size : 1.4rem; // ex. 1.4rem would be "14px" equivalent -@line-height : 1.5; // equiv line-height 1.5 -@h1-size : 3.2rem; // equiv "32px" -@h2-size : 2.8rem; // equiv "28px" -@h3-size : 2.4rem; // equiv "24px" -@h4-size : 2.0rem; // equiv "20px" -@h5-size : 1.8rem; // equiv "18px" -@h6-size : 1.6rem; // equiv "16px" - -// font stacks -@font-stack-common : sans-serif; // common font -@font-stack-headings : sans-serif; // headings font -@font-stack-monospace : consolas, courier, monospace; // monospace font - -// font colors -@base-color : #000; // text color on body and content -@primary-color : #000; // text color on primary elements -@secondary-color : #000; // text color on secondary elements -@headings-color : #000; // text color on headings -@headings-1-color : #000; // text color on headings level 1 -@headings-2-color : #000; // text color on headings level 2 -@headings-3-color : #000; // text color on headings level 3 -@base-color-link : #333; // base links color -@base-color-link-hover : #000; // base hovered/focused links color - -// backgrounds -@base-background : #fff; // body background color -@primary-background : #fff; // primary elements background color -@secondary-background : #fff; // secondary elements background color - -// spacings (choose unit you prefer) -@tiny-value : .5rem; // tiny value for margins / paddings -@tiny-plus-value : .7rem; // tiny+ value for margins / paddings -@small-value : 1rem; // small value for margins / paddings -@small-plus-value : 1.5rem; // small+ value for margins / paddings -@medium-value : 2rem; // medium value for margins / paddings -@medium-plus-value : 3rem; // medium+ value for margins / paddings -@large-value : 4rem; // large value for margins / paddings -@large-plus-value : 6rem; // large value for margins / paddings -@extra-large-value : 8rem; // extra large value for margins / paddings -@extra-large-plus-value : 12rem; // extra large value for margins / paddings -@ultra-large-value : 16rem; // ultra large value for margins / paddings -@ultra-large-plus-value : 20rem; // ultra large value for margins / paddings - -// breakpoints (choose unit you prefer) -@tiny-screen : 320px; // tiny screens media query (less-equal than 320px) -@tiny-plus-screen : 480px; // screens between 321px and 480px -@small-screen : 640px; // screens between 481px and 640px -@small-plus-screen : 768px; // screens between 641px and 768px -@medium-screen : 960px; // screens between 769px and 960px -@medium-plus-screen : 1024px; // screens between 961px and 1024px -@large-screen : 1280px; // screens between 1025px and 1280px -@large-plus-screen : 1440px; // screens between 1281px and 1440px -@extra-large-screen : 1600px; // screens between 1441px and 1600px -@ultra-large-screen : 1920px; // ultra large screens - -// grids variables (choose unit you prefer) -@gutter: 2rem; // gutter value for grid layouts. Unit can be: %, px, em, rem -@number: 4; // number of equal columns -@left: 2; // left side of uneven columns -@right: 1; // right side of uneven columns - -//namespace (default : empty) -@kna-namespace:~""; - -/* ---------------------------------- */ -/* ==Grillade */ -/* ---------------------------------- */ - -// Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html -// Demo : http://codepen.io/raphaelgoetter/pen/zxBMLW - -// Usage in vanilla CSS: -// -
for an equal fourth columns grid container -// -
for an uneven columns grid container - -// Usage with preprocessors : if you're using LESS, you can config grids variables : -// n = number of columns (default = 4) -// example : .grid-perso { .grid(12); } -// ... or uneven grids : -// left = left ratio column (default = 2) / right = right ratio column (default = 1) -// example : .grid-perso { .uneven-grid(2, 1); } - -/* grid container */ -[class*="@{kna-namespace}grid-"] { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-left: -@gutter; - - /* inline-block fallback for IE9 generation */ - letter-spacing: -0.31em; -} - -/* grid childs */ -[class*="@{kna-namespace}grid-"] > * { - box-sizing: border-box; - flex: 0 0 auto; - width: ~'calc(100% * 1 / @{number} - @{gutter} - .01px)'; - min-width: 0; - margin-left: @gutter; - - /* inline-block fallback for IE9 generation */ - display: inline-block; - vertical-align: top; - letter-spacing: normal; -} - -// LESS mixins for *equal* columns grid container -// example : .grid-perso { .grid(12); } -.grid(@number:@number, @gutter:@gutter) { - & > * { - width: ~'calc(100% * 1 / @{number} - @{gutter} - .01px)'; - } - & > .@{kna-namespace}flex-item-double { - width: ~'calc(100% * 2 / @{number} - @{gutter} - .01px)'; - } -} - -// Examples : will be compiled in CSS -[class*="@{kna-namespace}grid-2"] { - .grid(2); -} -[class*="@{kna-namespace}grid-3"] { - .grid(3); -} -[class*="@{kna-namespace}grid-4"] { - .grid(4); -} -[class*="@{kna-namespace}grid-5"] { - .grid(5); -} -[class*="@{kna-namespace}grid-6"] { - .grid(6); -} -[class*="@{kna-namespace}grid-7"] { - .grid(7); -} -[class*="@{kna-namespace}grid-8"] { - .grid(8); -} -[class*="@{kna-namespace}grid-10"] { - .grid(10); -} -[class*="@{kna-namespace}grid-12"] { - .grid(12); -} - -/* Responsive grid */ -// "small-2" = 2 columns when small screen -// example : .grid-4-small-2 will be 4 then 2 columns -@media (max-width: @small-screen) { - [class*="-small-4"] > * { - width: ~'calc(100% * 1 / 4 - @{gutter} - .01px)'; - } - [class*="-small-4"] > .flex-item-double { - width: ~'calc(100% * 1 / 2 - @{gutter} - .01px)'; - } - [class*="-small-3"] > * { - width: ~'calc(100% * 1 / 3 - @{gutter} - .01px)'; - } - [class*="-small-3"] > .flex-item-double { - width: ~'calc(100% * 2 / 3 - @{gutter} - .01px)'; - } - [class*="-small-2"] > * { - width: ~'calc(100% * 1 / 2 - @{gutter} - .01px)'; - } - [class*="-small-2"] > .flex-item-double { - width: ~'calc(100% - @{gutter} - .01px)'; - } - [class*="-small-1"] > * { - width: ~'calc(100% - @{gutter} - .01px)'; - } - [class*="-small-1"] > .flex-item-double { - width: ~'calc(100% - @{gutter} - .01px)'; - } -} -// "tiny-1" = 1 column when tiny screen -// example : .grid-4-small-2-tiny-1 will be 4 then 2 columns then 1 column -@media (max-width: @tiny-screen) { - [class*="-tiny-2"] > * { - width: ~'calc(100% * 1 / 2 - @{gutter} - .01px)'; - } - [class*="-tiny-2"] > .flex-item-double { - width: ~'calc(100% - @{gutter} - .01px)'; - } - [class*="-tiny-1"] > * { - width: ~'calc(100% - @{gutter} - .01px)'; - } - [class*="-tiny-1"] > .flex-item-double { - width: ~'calc(100% - @{gutter} - .01px)'; - } -} - -// LESS mixins for *unequal* columns grid container -// example : .grid-perso { .uneven-grid(2, 1); } -.uneven-grid(@left:@left, @right:@right, @gutter:@gutter) { - & > *:nth-child(odd) { - @size: (@left / (@left + @right)) * 100%; - width: ~'calc(@{size} - @{gutter} - .01px)'; - } - & > *:nth-child(even) { - @size: (@right / (@left + @right)) * 100%; - width: ~'calc(@{size} - @{gutter} - .01px)'; - } - @media (max-width: @small-screen) { - & > *:nth-child(n) { - width: ~'calc(100% - @{gutter} - .01px)'; - } - } -} - -// Examples : will be compiled in CSS -.@{kna-namespace}grid-2-1 { - .uneven-grid(2,1); -} -.@{kna-namespace}grid-1-2 { - .uneven-grid(1,2); -} -.@{kna-namespace}grid-3-1 { - .uneven-grid(3,1); -} -.@{kna-namespace}grid-1-3 { - .uneven-grid(1,3); -} -.@{kna-namespace}grid-3-2 { - .uneven-grid(3,2); -} -.@{kna-namespace}grid-2-3 { - .uneven-grid(2,3); -} -.@{kna-namespace}grid-4-1 { - .uneven-grid(4,1); -} -.@{kna-namespace}grid-1-4 { - .uneven-grid(1,4); -} - -.@{kna-namespace}pull { - margin-right: auto; -} -.@{kna-namespace}push { - margin-left: auto; -} diff --git a/css/grillade.scss b/css/grillade.scss new file mode 100644 index 0000000..1d74675 --- /dev/null +++ b/css/grillade.scss @@ -0,0 +1,805 @@ +@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', ' 0) { + @media #{unquote(parse-expression(nth($conditions, 1)))} { + // Recursive call + @include media(slice($conditions, 2)...) { + @content; + } + } + } +} + +// Config file and project variables + +// font sizes +$base-font-size : 1.4rem !default; // ex. 1.4rem would be "14px" equivalent +$line-height : 1.5 !default; // equiv line-height 1.5 +$h1-size : 3.2rem !default; // equiv "32px" +$h2-size : 2.8rem !default; // equiv "28px" +$h3-size : 2.4rem !default; // equiv "24px" +$h4-size : 2.0rem !default; // equiv "20px" +$h5-size : 1.8rem !default; // equiv "18px" +$h6-size : 1.6rem !default; // equiv "16px" + +// font stacks +$font-stack-common : sans-serif !default; // common font +$font-stack-headings : sans-serif !default; // headings font +$font-stack-monospace : consolas, courier, monospace !default; // monospace font + +// font colors +$base-color : #000 !default; // text color on body and content +$alpha-color : #000 !default; // text color on primary elements +$beta-color : #000 !default; // text color on secondary elements +$headings-color : #000 !default; // text color on headings +$headings-1-color : #000 !default; // text color on headings level 1 +$headings-2-color : #000 !default; // text color on headings level 2 +$headings-3-color : #000 !default; // text color on headings level 3 +$base-color-link : #333 !default; // base links color +$base-color-link-hover : #000 !default; // base hovered/focused links color + +// backgrounds +$base-background : #fff !default; // body background color +$alpha-background : #fff !default; // primary elements background color +$beta-background : #fff !default; // secondary elements background color + +// spacings (choose unit you prefer) +$tiny-value : .5rem !default; // tiny value for margins / paddings +$tiny-plus-value : .7rem !default; // tiny+ value for margins / paddings +$small-value : 1rem !default; // small value for margins / paddings +$small-plus-value : 1.5rem !default; // small+ value for margins / paddings +$medium-value : 2rem !default; // medium value for margins / paddings +$medium-plus-value : 3rem !default; // medium+ value for margins / paddings +$large-value : 4rem !default; // large value for margins / paddings +$large-plus-value : 6rem !default; // large value for margins / paddings +$extra-large-value : 8rem !default; // extra large value for margins / paddings +$extra-large-plus-value : 12rem !default; // extra 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 + +// 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: null !default; + +/* ---------------------------------- */ +/* ==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: +// -
for an equal fourth columns grid container +// -
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; +} diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css index dc36dc0..8fbeb59 100644 --- a/css/knacss-unminified.css +++ b/css/knacss-unminified.css @@ -1,8 +1,27 @@ +@charset "UTF-8"; /*! -* www.KNACSS.com V4.4.5 (1er avril 2016) @author: Raphael Goetter, Alsacreations +* www.KNACSS.com V5.0.0 (23 mai 2016) @author: Raphael Goetter, Alsacreations * Licence WTFPL http://www.wtfpl.net/ */ -/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ +/* ----------------------------- */ +/* ==Table Of Content */ +/* ----------------------------- */ +/* 1- Normalize (basic reset) */ +/* 2- Base (basic styles) */ +/* 3- Print (print quick reset) */ +/* 4- Stylings (minor stylings) */ +/* 5- Misc (skip links, hyphens) */ +/* (6- WordPress reset (disabled by default)) */ +/* 7- Global Layout (alignment, modules, positionning) */ +/* 8- Grid Layout (grillade) */ +/* 9- Tables (data tables consistency) */ +/* 10- Forms (forms consistency) */ +/* 11- Helpers (width and spacers helpers) */ +/* 12- Responsive (Responsive Web Design helpers) */ +/* ---------------------------------- */ +/* ==Normalize (basic reset) */ +/* ---------------------------------- */ +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orientation changes in IE and iOS. @@ -13,14 +32,14 @@ html { -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; - /* 2 */ -} + /* 2 */ } + /** * Remove the margin in all browsers (opinionated). */ body { - margin: 0; -} + margin: 0; } + /* HTML5 display definitions ========================================================================== */ /** @@ -41,8 +60,8 @@ nav, section, summary { /* 1 */ - display: block; -} + display: block; } + /** * Add the correct display in IE 9-. */ @@ -50,45 +69,49 @@ audio, canvas, progress, video { - display: inline-block; -} + display: inline-block; } + /** * Add the correct display in iOS 4-7. */ audio:not([controls]) { display: none; - height: 0; -} + height: 0; } + /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { - vertical-align: baseline; -} + vertical-align: baseline; } + /** * Add the correct display in IE 10-. * 1. Add the correct display in IE. */ template, [hidden] { - display: none; -} + display: none; } + /* Links ========================================================================== */ /** - * Remove the gray background on active links in IE 10. + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { background-color: transparent; -} + /* 1 */ + -webkit-text-decoration-skip: objects; + /* 2 */ } + /** * Remove the outline on focused links when they are also active or hovered * in all browsers (opinionated). */ a:active, a:hover { - outline-width: 0; -} + outline-width: 0; } + /* Text-level semantics ========================================================================== */ /** @@ -101,49 +124,49 @@ abbr[title] { text-decoration: underline; /* 2 */ text-decoration: underline dotted; - /* 2 */ -} + /* 2 */ } + /** * Prevent the duplicate application of `bolder` by the next rule in Safari 6. */ b, strong { - font-weight: inherit; -} + font-weight: inherit; } + /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { - font-weight: bolder; -} + font-weight: bolder; } + /** * Add the correct font style in Android 4.3-. */ dfn { - font-style: italic; -} + font-style: italic; } + /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; - margin: 0.67em 0; -} + margin: 0.67em 0; } + /** * Add the correct background and color in IE 9-. */ mark { background-color: #ff0; - color: #000; -} + color: #000; } + /** * Add the correct font size in all browsers. */ small { - font-size: 80%; -} + font-size: 80%; } + /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. @@ -153,28 +176,28 @@ sup { font-size: 75%; line-height: 0; position: relative; - vertical-align: baseline; -} + vertical-align: baseline; } + sub { - bottom: -0.25em; -} + bottom: -0.25em; } + sup { - top: -0.5em; -} + top: -0.5em; } + /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10-. */ img { - border-style: none; -} + border-style: none; } + /** * Hide the overflow in IE. */ svg:not(:root) { - overflow: hidden; -} + overflow: hidden; } + /* Grouping content ========================================================================== */ /** @@ -188,14 +211,14 @@ samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; - /* 2 */ -} + /* 2 */ } + /** * Add the correct margin in IE 8. */ figure { - margin: 1em 40px; -} + margin: 1em 40px; } + /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. @@ -206,106 +229,86 @@ hr { height: 0; /* 1 */ overflow: visible; - /* 2 */ -} + /* 2 */ } + /* Forms ========================================================================== */ /** - * Change font properties to `inherit` in all browsers (opinionated). + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. */ button, input, select, textarea { font: inherit; -} + /* 1 */ + margin: 0; + /* 2 */ } + /** * Restore the font weight unset by the previous rule. */ optgroup { - font-weight: bold; -} + font-weight: bold; } + /** * Show the overflow in IE. * 1. Show the overflow in Edge. - * 2. Show the overflow in Edge, Firefox, and IE. */ button, -input, -select { - /* 2 */ - overflow: visible; -} -/** - * Remove the margin in Safari. - * 1. Remove the margin in Firefox and Safari. - */ -button, -input, -select, -textarea { +input { /* 1 */ - margin: 0; -} + overflow: visible; } + /** - * Remove the inheritence of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritence of text transform in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ - text-transform: none; -} -/** - * Change the cursor in all browsers (opinionated). - */ -button, -[type="button"], -[type="reset"], -[type="submit"] { - cursor: pointer; -} -/** - * Restore the default cursor to disabled elements unset by the previous rule. - */ -[disabled] { - cursor: default; -} + text-transform: none; } + /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; - /* 2 */ -} + /* 2 */ } + /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; } + /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, -input:-moz-focusring { - outline: 1px dotted ButtonText; -} +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; } + /** * Change the border, margin, and padding in all browsers (opinionated). */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} + padding: 0.35em 0.625em 0.75em; } + /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. @@ -324,14 +327,14 @@ legend { padding: 0; /* 3 */ white-space: normal; - /* 1 */ -} + /* 1 */ } + /** * Remove the default vertical scrollbar in IE. */ textarea { - overflow: auto; -} + overflow: auto; } + /** * 1. Add the correct box sizing in IE 10-. * 2. Remove the padding in IE 10-. @@ -341,80 +344,94 @@ textarea { box-sizing: border-box; /* 1 */ padding: 0; - /* 2 */ -} + /* 2 */ } + /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { - height: auto; -} + height: auto; } + /** - * Correct the odd appearance of search inputs in Chrome and Safari. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; -} + /* 1 */ + outline-offset: -2px; + /* 2 */ } + /** - * Remove the inner padding and cancel buttons in Chrome on OS X and - * Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} + -webkit-appearance: none; } + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; } + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ } + /* ----------------------------- */ -/* == soft reset */ +/* ==Base (basic styles) */ /* ----------------------------- */ /* switching to border-box model for all elements */ html { - box-sizing: border-box; -} + box-sizing: border-box; } + * { - box-sizing: inherit; -} + box-sizing: inherit; } + ul, ol { - padding-left: 2em; -} + padding-left: 2em; } + img { - vertical-align: middle; -} + vertical-align: middle; } + /* height auto only for non SVG images */ img:not([src$=".svg"]) { - height: auto; -} + height: auto; } + blockquote, figure { margin-left: 0; - margin-right: 0; -} -/* ----------------------------- */ -/* == typography */ -/* ----------------------------- */ + margin-right: 0; } + html { /* set base font-size to equiv "10px", which is adapted to rem unit */ font-size: 62.5%; /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ /* thanks to @guardian, @victorbritopro and @eQRoeil */ - font-size: calc(1em * .625); -} + font-size: calc(1em * 0.625); } + body { font-size: 1.4rem; background-color: #fff; color: #000; font-family: sans-serif; - line-height: 1.5; -} + line-height: 1.5; } + a { - color: #333; -} -a:hover, -a:focus, -a:active { - color: #000; -} + color: #333; } + a:hover, a:focus, a:active { + color: #000; } + /* font-sizing for content */ p, .p-like, @@ -432,50 +449,44 @@ details, figure { margin-top: 0.75em; margin-bottom: 0; - line-height: 1.5; -} -h1, -.h1-like { + line-height: 1.5; } + +h1, .h1-like { font-size: 3.2rem; - font-family: sans-serif; -} -h2, -.h2-like { + font-family: sans-serif; } + +h2, .h2-like { font-size: 2.8rem; - font-family: sans-serif; -} -h3, -.h3-like { - font-size: 2.4rem; -} -h4, -.h4-like { - font-size: 2rem; -} -h5, -.h5-like { - font-size: 1.8rem; -} -h6, -.h6-like { - font-size: 1.6rem; -} + font-family: sans-serif; } + +h3, .h3-like { + font-size: 2.4rem; } + +h4, .h4-like { + font-size: 2rem; } + +h5, .h5-like { + font-size: 1.8rem; } + +h6, .h6-like { + font-size: 1.6rem; } + /* alternate font-sizing */ .smaller { - font-size: 0.6em; -} + font-size: 0.6em; } + .small { - font-size: 0.8em; -} + font-size: 0.8em; } + .big { - font-size: 1.2em; -} + font-size: 1.2em; } + .bigger { - font-size: 1.5em; -} + font-size: 1.5em; } + .biggest { - font-size: 2em; -} + font-size: 2em; } + code, pre, samp, @@ -484,19 +495,16 @@ kbd { white-space: pre-line; white-space: pre-wrap; font-family: consolas, courier, monospace; - line-height: normal; -} + line-height: normal; } + em, .italic, address, cite, i, var { - font-style: italic; -} -/* ----------------------------- */ -/* == browsers consistency */ -/* ----------------------------- */ + font-style: italic; } + /* avoid top margins on first content element */ p:first-child, .p-like:first-child, @@ -517,16 +525,16 @@ h5:first-child, .h5-like:first-child, h6:first-child, .h6-like:first-child { - margin-top: 0; -} + margin-top: 0; } + /* avoid margins on nested elements */ li p, li .p-like, li ul, li ol { margin-top: 0; - margin-bottom: 0; -} + margin-bottom: 0; } + /* max values */ img, table, @@ -538,1081 +546,25 @@ textarea, input, video, svg { - max-width: 100%; -} + max-width: 100%; } + /* margin-bottom on tables */ table { - margin-bottom: 2rem; -} + margin-bottom: 2rem; } + /* ----------------------------- */ -/* ==layout and modules */ +/* ==Print (quick print reset) */ /* ----------------------------- */ -/* module, gains superpower "BFC" Block Formating Context */ -.mod, -.bfc { - overflow: hidden; -} -/* blocks that needs to be placed under floats */ -.clear, -.line, -.row { - clear: both; -} -/* blocks that must contain floats */ -.clearfix::after, -.line::after { - content: ""; - display: table; - clear: both; - border-collapse: collapse; -} -/* simple blocks alignment */ -.left { - margin-right: auto; -} -.right { - margin-left: auto; -} -.center { - margin-left: auto; - margin-right: auto; -} -/* text and contents alignment */ -.txtleft { - text-align: left; -} -.txtright { - text-align: right; -} -.txtcenter { - text-align: center; -} -/* floating elements */ -.fl { - float: left; -} -img.fl { - margin-right: 1rem; -} -.fr { - float: right; -} -img.fr { - margin-left: 1rem; -} -img.fl, -img.fr { - margin-bottom: 0.5rem; -} -/* table layout */ -.row { - display: table; - table-layout: fixed; - width: 100%; -} -.row > *, -.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 */ -.inbl { - display: inline-block; - vertical-align: top; -} -/* flexbox layout -http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html -*/ -[class*="flex-container"], -.flex-container { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; -} -.flex-container-h { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; -} -.flex-container-v { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} -.flex-item-fluid { - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - min-width: 0; -} -.flex-item-first { - -webkit-box-ordinal-group: 0; - -webkit-order: -1; - -ms-flex-order: -1; - order: -1; -} -.flex-item-medium { - -webkit-box-ordinal-group: 1; - -webkit-order: 0; - -ms-flex-order: 0; - order: 0; -} -.flex-item-last { - -webkit-box-ordinal-group: 2; - -webkit-order: 1; - -ms-flex-order: 1; - order: 1; -} -.flex-item-center { - margin: auto; -} -/* ---------------------------------- */ -/* ==Grillade */ -/* ---------------------------------- */ -/* grid container */ -[class*="grid-"] { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: -2rem; - /* inline-block fallback for IE9 generation */ - letter-spacing: -0.31em; -} -/* grid childs */ -[class*="grid-"] > * { - box-sizing: border-box; - -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% * 1 / 4 - 2rem - .01px); - min-width: 0; - margin-left: 2rem; - /* inline-block fallback for IE9 generation */ - display: inline-block; - vertical-align: top; - letter-spacing: normal; -} -[class*="grid-2"] > * { - width: calc(100% * 1 / 2 - 2rem - .01px); -} -[class*="grid-2"] > .flex-item-double { - width: calc(100% * 2 / 2 - 2rem - .01px); -} -[class*="grid-3"] > * { - width: calc(100% * 1 / 3 - 2rem - .01px); -} -[class*="grid-3"] > .flex-item-double { - width: calc(100% * 2 / 3 - 2rem - .01px); -} -[class*="grid-4"] > * { - width: calc(100% * 1 / 4 - 2rem - .01px); -} -[class*="grid-4"] > .flex-item-double { - width: calc(100% * 2 / 4 - 2rem - .01px); -} -[class*="grid-5"] > * { - width: calc(100% * 1 / 5 - 2rem - .01px); -} -[class*="grid-5"] > .flex-item-double { - width: calc(100% * 2 / 5 - 2rem - .01px); -} -[class*="grid-6"] > * { - width: calc(100% * 1 / 6 - 2rem - .01px); -} -[class*="grid-6"] > .flex-item-double { - width: calc(100% * 2 / 6 - 2rem - .01px); -} -[class*="grid-7"] > * { - width: calc(100% * 1 / 7 - 2rem - .01px); -} -[class*="grid-7"] > .flex-item-double { - width: calc(100% * 2 / 7 - 2rem - .01px); -} -[class*="grid-8"] > * { - width: calc(100% * 1 / 8 - 2rem - .01px); -} -[class*="grid-8"] > .flex-item-double { - width: calc(100% * 2 / 8 - 2rem - .01px); -} -[class*="grid-10"] > * { - width: calc(100% * 1 / 10 - 2rem - .01px); -} -[class*="grid-10"] > .flex-item-double { - width: calc(100% * 2 / 10 - 2rem - .01px); -} -[class*="grid-12"] > * { - width: calc(100% * 1 / 12 - 2rem - .01px); -} -[class*="grid-12"] > .flex-item-double { - width: calc(100% * 2 / 12 - 2rem - .01px); -} -/* Responsive grid */ -@media (max-width: 640px) { - [class*="-small-4"] > * { - width: calc(100% * 1 / 4 - 2rem - .01px); - } - [class*="-small-4"] > .flex-item-double { - width: calc(100% * 1 / 2 - 2rem - .01px); - } - [class*="-small-3"] > * { - width: calc(100% * 1 / 3 - 2rem - .01px); - } - [class*="-small-3"] > .flex-item-double { - width: calc(100% * 2 / 3 - 2rem - .01px); - } - [class*="-small-2"] > * { - width: calc(100% * 1 / 2 - 2rem - .01px); - } - [class*="-small-2"] > .flex-item-double { - width: calc(100% - 2rem - .01px); - } - [class*="-small-1"] > * { - width: calc(100% - 2rem - .01px); - } - [class*="-small-1"] > .flex-item-double { - width: calc(100% - 2rem - .01px); - } -} -@media (max-width: 320px) { - [class*="-tiny-2"] > * { - width: calc(100% * 1 / 2 - 2rem - .01px); - } - [class*="-tiny-2"] > .flex-item-double { - width: calc(100% - 2rem - .01px); - } - [class*="-tiny-1"] > * { - width: calc(100% - 2rem - .01px); - } - [class*="-tiny-1"] > .flex-item-double { - width: calc(100% - 2rem - .01px); - } -} -.grid-2-1 > *:nth-child(odd) { - width: calc(66.66666666666666% - 2rem - .01px); -} -.grid-2-1 > *:nth-child(even) { - width: calc(33.33333333333333% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-2-1 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-1-2 > *:nth-child(odd) { - width: calc(33.33333333333333% - 2rem - .01px); -} -.grid-1-2 > *:nth-child(even) { - width: calc(66.66666666666666% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-1-2 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-3-1 > *:nth-child(odd) { - width: calc(75% - 2rem - .01px); -} -.grid-3-1 > *:nth-child(even) { - width: calc(25% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-3-1 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-1-3 > *:nth-child(odd) { - width: calc(25% - 2rem - .01px); -} -.grid-1-3 > *:nth-child(even) { - width: calc(75% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-1-3 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-3-2 > *:nth-child(odd) { - width: calc(60% - 2rem - .01px); -} -.grid-3-2 > *:nth-child(even) { - width: calc(40% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-3-2 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-2-3 > *:nth-child(odd) { - width: calc(40% - 2rem - .01px); -} -.grid-2-3 > *:nth-child(even) { - width: calc(60% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-2-3 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-4-1 > *:nth-child(odd) { - width: calc(80% - 2rem - .01px); -} -.grid-4-1 > *:nth-child(even) { - width: calc(20% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-4-1 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.grid-1-4 > *:nth-child(odd) { - width: calc(20% - 2rem - .01px); -} -.grid-1-4 > *:nth-child(even) { - width: calc(80% - 2rem - .01px); -} -@media (max-width: 640px) { - .grid-1-4 > *:nth-child(n) { - width: calc(100% - 2rem - .01px); - } -} -.pull { - margin-right: auto; -} -.push { - margin-left: auto; -} -/* ----------------------------- */ -/* ==tables */ -/* ----------------------------- */ -table, -.table { - width: 100%; - max-width: 100%; - table-layout: fixed; - border-collapse: collapse; - vertical-align: top; -} -.table { - display: table; -} -#recaptcha_table, -table.table-auto { - table-layout: auto; -} -td, -th { - vertical-align: top; - min-width: 2rem; - cursor: default; -} -/* ----------------------------- */ -/* ==forms */ -/* ----------------------------- */ -/* thanks to HTML5boilerplate, -* github.com/nathansmith/formalize and www.sitepen.com -*/ -/* buttons */ -.btn { - display: inline-block; -} -/* forms items */ -form, -fieldset { - border: none; -} -input, -button, -select, -label, -.btn { - font-family: inherit; - font-size: inherit; -} -button, -input, -optgroup, -select, -textarea { - color: #000; -} -label { - display: inline-block; - cursor: pointer; -} -legend { - border: 0; - white-space: normal; -} -textarea { - min-height: 5em; - vertical-align: top; - font-family: inherit; - font-size: inherit; - resize: vertical; -} -select { - -webkit-appearance: menulist-button; -} -/* if select styling bugs on WebKit */ -/* select { -webkit-appearance: none; } */ -/* 'x' appears on right of search input when text is entered. This removes it */ -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-results-button, -input[type="search"]::-webkit-search-results-decoration { - display: none; -} -::-webkit-input-placeholder { - color: #777; -} -input:-moz-placeholder, -textarea:-moz-placeholder { - color: #777; -} -.btn:focus, -input[type="button"]:focus, -button:focus { - -webkit-tap-highlight-color: transparent; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -/* unstyled forms */ -button.unstyled, -input[type="button"].unstyled, -input[type="submit"].unstyled, -input[type="reset"].unstyled { - padding: 0; - border: none; - line-height: 1; - text-align: left; - background: none; - border-radius: 0; - box-shadow: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -} -button.unstyled:focus, -input[type="button"].unstyled:focus, -input[type="submit"].unstyled:focus, -input[type="reset"].unstyled:focus { - box-shadow: none; - outline: none; -} -/* ---------------------------------- */ -/* ==state helpers */ -/* ---------------------------------- */ -/* invisible for all */ -.is-hidden, -[hidden] { - display: none; -} -/* hidden but not for an assistive technology like a screen reader, Yahoo! method */ -.visually-hidden { - position: absolute !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - padding: 0 !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; -} -.is-disabled, -[disabled] { - opacity: 0.5; - pointer-events: none; - cursor: not-allowed; - -webkit-filter: grayscale(1); - filter: grayscale(1); -} -ul.is-unstyled, -ul.unstyled { - list-style: none; - padding-left: 0; -} -/* ---------------------------------- */ -/* ==visual helpers */ -/* .. use them with parcimony ! */ -/* ---------------------------------- */ -/* blocks widths (percentage and pixels) */ -.w10 { - width: 10%; -} -.w20 { - width: 20%; -} -.w25 { - width: 25%; -} -.w30 { - width: 30%; -} -.w33 { - width: 33.3333%; -} -.w40 { - width: 40%; -} -.w50 { - width: 50%; -} -.w60 { - width: 60%; -} -.w66 { - width: 66.6666%; -} -.w70 { - width: 70%; -} -.w75 { - width: 75%; -} -.w80 { - width: 80%; -} -.w90 { - width: 90%; -} -.w100 { - width: 100%; -} -.w50p { - width: 50px; -} -.w100p { - width: 100px; -} -.w150p { - width: 150px; -} -.w200p { - width: 200px; -} -.w300p { - width: 300px; -} -.w400p { - width: 400px; -} -.w500p { - width: 500px; -} -.w600p { - width: 600px; -} -.w700p { - width: 700px; -} -.w800p { - width: 800px; -} -.w960p { - width: 960px; -} -.mw960p { - max-width: 960px; -} -.w1140p { - width: 1140px; -} -.mw1140p { - max-width: 1140px; -} -.wauto { - width: auto; -} -/* spacing helpers -p,m = padding,margin -a,t,r,b,l = all,top,right,bottom,left -s,m,l,n = small, medium, large, none -*/ -.man, -.ma0 { - margin: 0; -} -.pan, -.pa0 { - padding: 0; -} -.mas { - margin: 1rem; -} -.mam { - margin: 2rem; -} -.mal { - margin: 4rem; -} -.pas { - padding: 1rem; -} -.pam { - padding: 2rem; -} -.pal { - padding: 4rem; -} -.mtn, -.mt0 { - margin-top: 0; -} -.mts { - margin-top: 1rem; -} -.mtm { - margin-top: 2rem; -} -.mtl { - margin-top: 4rem; -} -.mrn, -.mr0 { - margin-right: 0; -} -.mrs { - margin-right: 1rem; -} -.mrm { - margin-right: 2rem; -} -.mrl { - margin-right: 4rem; -} -.mbn, -.mb0 { - margin-bottom: 0; -} -.mbs { - margin-bottom: 1rem; -} -.mbm { - margin-bottom: 2rem; -} -.mbl { - margin-bottom: 4rem; -} -.mln, -.ml0 { - margin-left: 0; -} -.mls { - margin-left: 1rem; -} -.mlm { - margin-left: 2rem; -} -.mll { - margin-left: 4rem; -} -.mauto { - margin: auto; -} -.mtauto { - margin-top: auto; -} -.mrauto { - margin-right: auto; -} -.mbauto { - margin-bottom: auto; -} -.mlauto { - margin-left: auto; -} -.ptn, -.pt0 { - padding-top: 0; -} -.pts { - padding-top: 1rem; -} -.ptm { - padding-top: 2rem; -} -.ptl { - padding-top: 4rem; -} -.prn, -.pr0 { - padding-right: 0; -} -.prs { - padding-right: 1rem; -} -.prm { - padding-right: 2rem; -} -.prl { - padding-right: 4rem; -} -.pbn, -.pb0 { - padding-bottom: 0; -} -.pbs { - padding-bottom: 1rem; -} -.pbm { - padding-bottom: 2rem; -} -.pbl { - padding-bottom: 4rem; -} -.pln, -.pl0 { - padding-left: 0; -} -.pls { - padding-left: 1rem; -} -.plm { - padding-left: 2rem; -} -.pll { - padding-left: 4rem; -} -/* ----------------------------- */ -/* ==desktop and HD devices */ -/* ----------------------------- */ -@media (min-width: 961px) { - /* rules for big resources and big screens like: background-images, font-faces, etc. */ -} -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { - /* style adjustments for high density devices */ -} -/* ---------------------------------- */ -/* ==Responsive large */ -/* ---------------------------------- */ -@media (min-width: 961px) { - /* layouts for large screens */ - .large-hidden { - display: none !important; - } - .large-visible { - display: block !important; - } - .large-no-float { - float: none; - } - .large-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .large-row { - display: table; - table-layout: fixed; - width: 100% !important; - } - .large-col { - display: table-cell; - vertical-align: top; - } - /* widths for large screens */ - .large-w25 { - width: 25% !important; - } - .large-w33 { - width: 33.3333% !important; - } - .large-w50 { - width: 50% !important; - } - .large-w66 { - width: 66.6666% !important; - } - .large-w75 { - width: 75% !important; - } - .large-w100, - .large-wauto { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - /* margins for large screens */ - .large-man { - margin: 0 !important; - } -} -/* ---------------------------------- */ -/* ==Responsive medium */ -/* ---------------------------------- */ -@media (min-width: 641px) and (max-width: 960px) { - /* layouts for medium screens */ - .medium-hidden { - display: none !important; - } - .medium-visible { - display: block !important; - } - .medium-no-float { - float: none; - } - .medium-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .medium-row { - display: table; - table-layout: fixed; - width: 100% !important; - } - .medium-col { - display: table-cell; - vertical-align: top; - } - /* widths for medium screens */ - .medium-w25 { - width: 25% !important; - } - .medium-w33 { - width: 33.3333% !important; - } - .medium-w50 { - width: 50% !important; - } - .medium-w66 { - width: 66.6666% !important; - } - .medium-w75 { - width: 75% !important; - } - .medium-w100, - .medium-wauto { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - /* margins for medium screens */ - .medium-man, - .medium-ma0 { - margin: 0 !important; - } -} -/* ---------------------------------- */ -/* ==Responsive small */ -/* ---------------------------------- */ -@media (min-width: 321px) and (max-width: 640px) { - /* quick reset in small resolution and less */ - .w600p, - .w700p, - .w800p, - .w960p, - .mw960p { - width: auto; - float: none; - } - /* layouts for small screens */ - .small-hidden { - display: none !important; - } - .small-visible { - display: block !important; - } - .small-no-float { - float: none; - } - .small-inbl { - display: inline-block; - float: none; - vertical-align: top; - } - .small-row { - display: table !important; - table-layout: fixed !important; - width: 100% !important; - } - .small-col { - display: table-cell !important; - vertical-align: top !important; - } - /* widths for small screens */ - .small-w25 { - width: 25% !important; - } - .small-w33 { - width: 33.3333% !important; - } - .small-w50 { - width: 50% !important; - } - .small-w66 { - width: 66.6666% !important; - } - .small-w75 { - width: 75% !important; - } - .small-w100, - .small-wauto { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - /* margins for small screens */ - .small-man, - .small-ma0 { - margin: 0 !important; - } - .small-pan, - .small-pa0 { - padding: 0 !important; - } -} -/* ---------------------------------- */ -/* ==Responsive tiny */ -/* ---------------------------------- */ -@media (max-width: 320px) { - /* quick tiny resolution reset */ - .mod, - .col, - fieldset { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - .flex-container { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - } - .w300p, - .w400p, - .w500p { - width: auto; - float: none; - } - .row { - display: block !important; - width: 100% !important; - } - /* layouts for tiny screens */ - .tiny-hidden { - display: none !important; - } - .tiny-visible { - display: block !important; - } - .tiny-no-float { - float: none; - } - .tiny-inbl { - display: inline-block; - float: none; - 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; - } - th, - td { - display: block; - width: auto; - text-align: left; - } - thead { - display: none; - } - /* widths for tiny screens */ - .tiny-w25 { - width: 25% !important; - } - .tiny-w33 { - width: 33.3333% !important; - } - .tiny-w50 { - width: 50% !important; - } - .tiny-w66 { - width: 66.6666% !important; - } - .tiny-w75 { - width: 75% !important; - } - .tiny-w100, - .tiny-wauto { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - /* margins for tiny screens */ - .tiny-man, - .tiny-ma0 { - margin: 0 !important; - } - .tiny-pan, - .tiny-pa0 { - padding: 0 !important; - } -} -/* quick print reset */ @media print { * { background: transparent !important; box-shadow: none !important; - text-shadow: none !important; - } + text-shadow: none !important; } body { width: auto; margin: auto; font-family: serif; - font-size: 12pt; - } + font-size: 12pt; } p, .p-like, h1, @@ -1631,27 +583,22 @@ s,m,l,n = small, medium, large, none ul, ol { color: #000; - margin: auto; - } + margin: auto; } .print { - display: block; - } + display: block; } .no-print { - display: none; - } + display: none; } /* no orphans, no widows */ p, .p-like, blockquote { orphans: 3; - widows: 3; - } + widows: 3; } /* no breaks inside these elements */ blockquote, ul, ol { - page-break-inside: avoid; - } + page-break-inside: avoid; } /* page break before main headers h1, .h1-like { @@ -1666,11 +613,9 @@ s,m,l,n = small, medium, large, none h3, .h3-like, caption { - page-break-after: avoid; - } + page-break-after: avoid; } a { - color: #000; - } + color: #000; } /* displaying URLs a[href]::after { content: " (" attr(href) ")"; @@ -1678,31 +623,122 @@ s,m,l,n = small, medium, large, none */ a[href^="javascript:"]::after, a[href^="#"]::after { - content: ""; - } -} + content: ""; } } + /* ----------------------------- */ -/* ==misc rules */ +/* ==Stylings (minor stylings) */ +/* ----------------------------- */ +/* styling elements */ +code, kbd, mark { + border-radius: 2px; } + +kbd { + padding: 0 2px; + border: 1px solid #999; } + +code { + padding: 2px 4px; + background: rgba(0, 0, 0, 0.04); + color: #b11; } + +pre code { + padding: 0; + background: none; + color: inherit; + border-radius: 0; } + +mark { + padding: 2px 4px; } + +sup, +sub { + vertical-align: 0; } + +sup { + bottom: 1ex; } + +sub { + top: 0.5ex; } + +blockquote { + position: relative; + padding-left: 3em; } + +blockquote::before { + content: "\201C"; + position: absolute; + left: 0; + top: 0; + font-family: georgia, serif; + font-size: 5em; + line-height: 0.9; + color: rgba(0, 0, 0, 0.3); } + +blockquote > footer { + margin-top: .75em; + font-size: 0.9em; + color: rgba(0, 0, 0, 0.7); } + +blockquote > footer::before { + content: "\2014 \0020"; } + +q { + font-style: normal; } + +q, +.q { + quotes: "“\00a0" "\00a0”"; } + +q:lang(fr), +.q:lang(fr) { + quotes: "«\00a0" "\00a0»"; } + +hr { + display: block; + clear: both; + height: 1px; + margin: 1em 0 2em; + padding: 0; + border: 0; + color: #ccc; + background-color: #ccc; } + +/* tables */ +table, +.table { + border: 1px solid #ccc; } + +caption { + padding: 1rem; + color: #555; + font-style: italic; } + +td, +th { + padding: 0.3em 0.8em; + border: 1px #aaa dotted; + text-align: left; } + +/* ----------------------------- */ +/* ==Misc (skip links, hyphens) */ /* ----------------------------- */ /* styling skip links */ .skip-links { - position: absolute; -} -.skip-links a { - position: absolute; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - padding: 0.5em; - background: black; - color: white; - text-decoration: none; -} -.skip-links a:focus { - position: static; - overflow: visible; - clip: auto; -} -@media (max-width: 640px) { + position: absolute; } + .skip-links a { + position: absolute; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + padding: 0.5em; + background: black; + color: white; + text-decoration: none; } + .skip-links a:focus { + position: static; + overflow: visible; + clip: auto; } + +@media (max-width: 320px) { /* you shall not pass */ div, textarea, @@ -1716,117 +752,933 @@ s,m,l,n = small, medium, large, none -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; - hyphens: auto; - } -} -@media (max-width: 640px) { + hyphens: auto; } } + +@media (max-width: 320px) { .no-wrapping { word-wrap: normal; -webkit-hyphens: manual; -moz-hyphens: manual; -ms-hyphens: manual; - hyphens: manual; - } -} + hyphens: manual; } } + /* ----------------------------- */ -/* ==minor stylings */ +/* ==Global Layout */ /* ----------------------------- */ -/* styling elements */ -code, -kbd, -mark { - border-radius: 2px; -} -kbd { - padding: 0 2px; - border: 1px solid #999; -} -code { - padding: 2px 4px; - background: rgba(0, 0, 0, 0.04); - color: #b11; -} -pre code { - padding: 0; - background: none; - color: inherit; - border-radius: 0; -} -mark { - padding: 2px 4px; -} -sup, -sub { - vertical-align: 0; -} -sup { - bottom: 1ex; -} -sub { - top: 0.5ex; -} -blockquote { - position: relative; - padding-left: 3em; -} -blockquote::before { - content: "\201C"; - position: absolute; - left: 0; - top: 0; - font-family: georgia, serif; - font-size: 5em; - line-height: 0.9; - color: rgba(0, 0, 0, 0.3); -} -blockquote > footer { - margin-top: .75em; - font-size: 0.9em; - color: rgba(0, 0, 0, 0.7); -} -blockquote > footer::before { - content: "\2014 \0020"; -} -q { - font-style: normal; -} -q, -.q { - quotes: "“\00a0" "\00a0”"; -} -q:lang(fr), -.q:lang(fr) { - quotes: "«\00a0" "\00a0»"; -} -hr { - display: block; +/* module, gains superpower "BFC" Block Formating Context */ +.mod, +.bfc { + overflow: hidden; } + +/* blocks that needs to be placed under floats */ +.clear, +.line, +.row { + clear: both; } + +/* blocks that must contain floats */ +.clearfix::after, +.line::after { + content: ""; + display: table; clear: both; - height: 1px; - margin: 1em 0 2em; - padding: 0; - border: 0; - color: #ccc; - background-color: #ccc; -} -/* tables */ + border-collapse: collapse; } + +/* simple blocks alignment */ +.left { + margin-right: auto; } + +.right { + margin-left: auto; } + +.center { + margin-left: auto; + margin-right: auto; } + +/* text and contents alignment */ +.txtleft { + text-align: left; } + +.txtright { + text-align: right; } + +.txtcenter { + text-align: center; } + +/* floating elements */ +.fl { + float: left; } + +img.fl { + margin-right: 1rem; } + +.fr { + float: right; } + +img.fr { + margin-left: 1rem; } + +img.fl, +img.fr { + margin-bottom: 0.5rem; } + +/* table layout */ +.row { + display: table; + table-layout: fixed; + width: 100%; } + +.row > *, +.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 */ +.inbl { + display: inline-block; + vertical-align: top; } + +/* flexbox layout +http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html +*/ +[class*="flex-container"] { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + +.flex-container-h { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } + +.flex-container-v { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } + +.flex-item-fluid { + -webkit-box-flex: 1; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 0; } + +.flex-item-first, +.grid-item-first { + -webkit-box-ordinal-group: 0; + -webkit-order: -1; + -ms-flex-order: -1; + order: -1; } + +.flex-item-medium, +.grid-item-medium { + -webkit-box-ordinal-group: 1; + -webkit-order: 0; + -ms-flex-order: 0; + order: 0; } + +.flex-item-last, +.grid-item-last { + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + -ms-flex-order: 1; + order: 1; } + +.flex-item-center, +.grid-item-center { + margin: auto; } + +/* ---------------------------------- */ +/* ==Grid Layout (grillade) */ +/* ---------------------------------- */ +/* grid container */ +[class*="grid-"] { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-left: -2rem; } + +/* grid childs */ +[class*="grid-"] > * { + box-sizing: border-box; + -webkit-box-flex: 0; + -webkit-flex: 0 0 auto; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% - 2rem - .01px); + min-width: 0; + min-height: 0; + margin-left: 2rem; } + +@media (min-width: 321px) and (max-width: 640px) { + [class*="grid-"] > * { + width: calc(100% * 1 / 2 - 2rem - .01px); } + [class*="grid-"] > *.grid-item-double { + width: calc(100% - 2rem - .01px); } } + +@media (min-width: 641px) { + [class*="grid-2"] > * { + width: calc(100% * 1 / 2 - 2rem - .01px); } + [class*="grid-2"] > .grid-item-double { + width: calc(100% * 2 / 2 - 2rem); } + [class*="grid-3"] > * { + width: calc(100% * 1 / 3 - 2rem - .01px); } + [class*="grid-3"] > .grid-item-double { + width: calc(100% * 2 / 3 - 2rem); } + [class*="grid-4"] > * { + width: calc(100% * 1 / 4 - 2rem - .01px); } + [class*="grid-4"] > .grid-item-double { + width: calc(100% * 2 / 4 - 2rem); } + [class*="grid-5"] > * { + width: calc(100% * 1 / 5 - 2rem - .01px); } + [class*="grid-5"] > .grid-item-double { + width: calc(100% * 2 / 5 - 2rem); } + [class*="grid-6"] > * { + width: calc(100% * 1 / 6 - 2rem - .01px); } + [class*="grid-6"] > .grid-item-double { + width: calc(100% * 2 / 6 - 2rem); } + [class*="grid-7"] > * { + width: calc(100% * 1 / 7 - 2rem - .01px); } + [class*="grid-7"] > .grid-item-double { + width: calc(100% * 2 / 7 - 2rem); } + [class*="grid-8"] > * { + width: calc(100% * 1 / 8 - 2rem - .01px); } + [class*="grid-8"] > .grid-item-double { + width: calc(100% * 2 / 8 - 2rem); } + [class*="grid-9"] > * { + width: calc(100% * 1 / 9 - 2rem - .01px); } + [class*="grid-9"] > .grid-item-double { + width: calc(100% * 2 / 9 - 2rem); } + [class*="grid-10"] > * { + width: calc(100% * 1 / 10 - 2rem - .01px); } + [class*="grid-10"] > .grid-item-double { + width: calc(100% * 2 / 10 - 2rem); } + [class*="grid-11"] > * { + width: calc(100% * 1 / 11 - 2rem - .01px); } + [class*="grid-11"] > .grid-item-double { + width: calc(100% * 2 / 11 - 2rem); } + [class*="grid-12"] > * { + width: calc(100% * 1 / 12 - 2rem - .01px); } + [class*="grid-12"] > .grid-item-double { + width: calc(100% * 2 / 12 - 2rem); } } + +/* Responsive grid */ +@media (min-width: 321px) and (max-width: 640px) { + [class*="-small-4"] > * { + width: calc(100% * 1 / 4 - 2rem - .01px); } + [class*="-small-4"] > .grid-item-double { + width: calc(100% * 1 / 2 - 2rem - .01px); } + [class*="-small-3"] > * { + width: calc(100% * 1 / 3 - 2rem - .01px); } + [class*="-small-3"] > .grid-item-double { + width: calc(100% * 2 / 3 - 2rem - .01px); } + [class*="-small-2"] > * { + width: calc(100% * 1 / 2 - 2rem - .01px); } + [class*="-small-2"] > .grid-item-double { + width: calc(100% - 2rem - .01px); } + [class*="-small-1"] > * { + width: calc(100% - 2rem - .01px); } + [class*="-small-1"] > .grid-item-double { + width: calc(100% - 2rem - .01px); } } + +@media (min-width: 641px) { + .grid-2-1 :nth-child(odd) { + width: calc(66.66667% - 2rem); } + .grid-2-1 :nth-child(even) { + width: calc(33.33333% - 2rem); } } + +@media (min-width: 641px) { + .grid-1-2 :nth-child(odd) { + width: calc(33.33333% - 2rem); } + .grid-1-2 :nth-child(even) { + width: calc(66.66667% - 2rem); } } + +@media (min-width: 641px) { + .grid-3-1 :nth-child(odd) { + width: calc(75% - 2rem); } + .grid-3-1 :nth-child(even) { + width: calc(25% - 2rem); } } + +@media (min-width: 641px) { + .grid-1-3 :nth-child(odd) { + width: calc(25% - 2rem); } + .grid-1-3 :nth-child(even) { + width: calc(75% - 2rem); } } + +@media (min-width: 641px) { + .grid-3-2 :nth-child(odd) { + width: calc(60% - 2rem); } + .grid-3-2 :nth-child(even) { + width: calc(40% - 2rem); } } + +@media (min-width: 641px) { + .grid-2-3 :nth-child(odd) { + width: calc(40% - 2rem); } + .grid-2-3 :nth-child(even) { + width: calc(60% - 2rem); } } + +@media (min-width: 641px) { + .grid-4-1 :nth-child(odd) { + width: calc(80% - 2rem); } + .grid-4-1 :nth-child(even) { + width: calc(20% - 2rem); } } + +@media (min-width: 641px) { + .grid-1-4 :nth-child(odd) { + width: calc(20% - 2rem); } + .grid-1-4 :nth-child(even) { + width: calc(80% - 2rem); } } + +.pull { + margin-right: auto; } + +.push { + margin-left: auto; } + +/* ----------------------------- */ +/* ==Tables */ +/* ----------------------------- */ table, .table { - border: 1px solid #ccc; -} -caption { - padding: 1rem; - color: #555; - font-style: italic; -} + width: 100%; + max-width: 100%; + table-layout: fixed; + border-collapse: collapse; + vertical-align: top; } + +.table { + display: table; } + +#recaptcha_table, +.table-auto { + table-layout: auto; } + td, th { - padding: 0.3em 0.8em; - border: 1px #aaa dotted; - text-align: left; -} + vertical-align: top; + min-width: 2rem; + cursor: default; } + /* ----------------------------- */ -/* ==own stylesheet */ +/* ==Forms */ +/* ----------------------------- */ +/* thanks to HTML5boilerplate, +* github.com/nathansmith/formalize and www.sitepen.com +*/ +/* buttons */ +.btn { + display: inline-block; } + +/* forms items */ +form, +fieldset { + border: none; } + +input, +button, +select, +label, +.btn { + font-family: inherit; + font-size: inherit; } + +button, +input, +optgroup, +select, +textarea { + color: #000; } + +label { + vertical-align: middle; + cursor: pointer; } + +legend { + border: 0; + white-space: normal; } + +textarea { + min-height: 5em; + vertical-align: top; + font-family: inherit; + font-size: inherit; + resize: vertical; } + +select { + -webkit-appearance: menulist-button; } + +/* if select styling bugs on WebKit */ +/* select { -webkit-appearance: none; } */ +/* 'x' appears on right of search input when text is entered. This removes it */ +input[type="search"]::-webkit-search-decoration, +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-results-button, +input[type="search"]::-webkit-search-results-decoration { + display: none; } + +::-webkit-input-placeholder { + color: #777; } + +input:-moz-placeholder, +textarea:-moz-placeholder { + color: #777; } + +.btn:focus, +input[type="button"]:focus, +button:focus { + -webkit-tap-highlight-color: transparent; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } + +/* unstyled forms */ +button.unstyled, +input[type="button"].unstyled, +input[type="submit"].unstyled, +input[type="reset"].unstyled { + padding: 0; + border: none; + line-height: 1; + text-align: left; + background: none; + border-radius: 0; + box-shadow: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; } + button.unstyled:focus, + input[type="button"].unstyled:focus, + input[type="submit"].unstyled:focus, + input[type="reset"].unstyled:focus { + box-shadow: none; + outline: none; } + +/* ---------------------------------- */ +/* ==Helpers */ +/* ---------------------------------- */ +/* State Helpers */ +/* ------------- */ +/* invisible for all */ +.is-hidden, +[hidden] { + display: none; } + +/* hidden but not for an assistive technology like a screen reader, Yahoo! method */ +.visually-hidden { + position: absolute !important; + border: 0 !important; + height: 1px !important; + width: 1px !important; + padding: 0 !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; } + +.is-disabled, +[disabled] { + opacity: 0.5; + pointer-events: none; + cursor: not-allowed; + -webkit-filter: grayscale(1); + filter: grayscale(1); } + +ul.is-unstyled, +ul.unstyled { + list-style: none; + padding-left: 0; } + +/* Width Helpers */ +/* ------------- */ +/* blocks widths (percentage and pixels) */ +.w10 { + width: 10%; } + +.w20 { + width: 20%; } + +.w25 { + width: 25%; } + +.w30 { + width: 30%; } + +.w33 { + width: 33.3333%; } + +.w40 { + width: 40%; } + +.w50 { + width: 50%; } + +.w60 { + width: 60%; } + +.w66 { + width: 66.6666%; } + +.w70 { + width: 70%; } + +.w75 { + width: 75%; } + +.w80 { + width: 80%; } + +.w90 { + width: 90%; } + +.w100 { + width: 100%; } + +.w50p { + width: 50px; } + +.w100p { + width: 100px; } + +.w150p { + width: 150px; } + +.w200p { + width: 200px; } + +.w300p { + width: 300px; } + +.w400p { + width: 400px; } + +.w500p { + width: 500px; } + +.w600p { + width: 600px; } + +.w700p { + width: 700px; } + +.w800p { + width: 800px; } + +.w960p { + width: 960px; } + +.mw960p { + max-width: 960px; } + +.w1140p { + width: 1140px; } + +.mw1140p { + max-width: 1140px; } + +.wauto { + width: auto; } + +/* Spacing Helpers */ +/* --------------- */ +.man, +.ma0 { + margin: 0; } + +.pan, +.pa0 { + padding: 0; } + +.mas { + margin: 1rem; } + +.mam { + margin: 2rem; } + +.mal { + margin: 4rem; } + +.pas { + padding: 1rem; } + +.pam { + padding: 2rem; } + +.pal { + padding: 4rem; } + +.mtn, +.mt0 { + margin-top: 0; } + +.mts { + margin-top: 1rem; } + +.mtm { + margin-top: 2rem; } + +.mtl { + margin-top: 4rem; } + +.mrn, +.mr0 { + margin-right: 0; } + +.mrs { + margin-right: 1rem; } + +.mrm { + margin-right: 2rem; } + +.mrl { + margin-right: 4rem; } + +.mbn, +.mb0 { + margin-bottom: 0; } + +.mbs { + margin-bottom: 1rem; } + +.mbm { + margin-bottom: 2rem; } + +.mbl { + margin-bottom: 4rem; } + +.mln, +.ml0 { + margin-left: 0; } + +.mls { + margin-left: 1rem; } + +.mlm { + margin-left: 2rem; } + +.mll { + margin-left: 4rem; } + +.mauto { + margin: auto; } + +.mtauto { + margin-top: auto; } + +.mrauto { + margin-right: auto; } + +.mbauto { + margin-bottom: auto; } + +.mlauto { + margin-left: auto; } + +.ptn, +.pt0 { + padding-top: 0; } + +.pts { + padding-top: 1rem; } + +.ptm { + padding-top: 2rem; } + +.ptl { + padding-top: 4rem; } + +.prn, +.pr0 { + padding-right: 0; } + +.prs { + padding-right: 1rem; } + +.prm { + padding-right: 2rem; } + +.prl { + padding-right: 4rem; } + +.pbn, +.pb0 { + padding-bottom: 0; } + +.pbs { + padding-bottom: 1rem; } + +.pbm { + padding-bottom: 2rem; } + +.pbl { + padding-bottom: 4rem; } + +.pln, +.pl0 { + padding-left: 0; } + +.pls { + padding-left: 1rem; } + +.plm { + padding-left: 2rem; } + +.pll { + padding-left: 4rem; } + +/* -------------------------- */ +/* ==Responsive helpers */ +/* -------------------------- */ +/* large screens */ +/* ------------- */ +@media (min-width: 1280px) { + /* layouts for large screens */ + .large-hidden { + display: none !important; } + .large-visible { + display: block !important; } + .large-no-float { + float: none; } + .large-inbl { + display: inline-block; + float: none; + vertical-align: top; } + .large-row { + display: table; + table-layout: fixed; + width: 100% !important; } + .large-col { + display: table-cell; + vertical-align: top; } + /* widths for large screens */ + .large-w25 { + width: 25% !important; } + .large-w33 { + width: 33.3333% !important; } + .large-w50 { + width: 50% !important; } + .large-w66 { + width: 66.6666% !important; } + .large-w75 { + width: 75% !important; } + .large-w100, + .large-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; } + /* margins for large screens */ + .large-man, + .large-ma0 { + margin: 0 !important; } } + +/* medium screens */ +/* -------------- */ +@media (min-width: 960px) and (max-width: 1279px) { + /* layouts for medium screens */ + .medium-hidden { + display: none !important; } + .medium-visible { + display: block !important; } + .medium-no-float { + float: none; } + .medium-inbl { + display: inline-block; + float: none; + vertical-align: top; } + .medium-row { + display: table; + table-layout: fixed; + width: 100% !important; } + .medium-col { + display: table-cell; + vertical-align: top; } + /* widths for medium screens */ + .medium-w25 { + width: 25% !important; } + .medium-w33 { + width: 33.3333% !important; } + .medium-w50 { + width: 50% !important; } + .medium-w66 { + width: 66.6666% !important; } + .medium-w75 { + width: 75% !important; } + .medium-w100, + .medium-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; } + /* margins for medium screens */ + .medium-man, + .medium-ma0 { + margin: 0 !important; } } + +/* small screens */ +/* ------------- */ +@media (min-width: 640px) and (max-width: 959px) { + /* quick reset in small resolution and less */ + .w600p, + .w700p, + .w800p, + .w960p, + .mw960p { + width: auto; + float: none; } + /* layouts for small screens */ + .small-hidden { + display: none !important; } + .small-visible { + display: block !important; } + .small-no-float { + float: none; } + .small-inbl { + display: inline-block; + float: none; + vertical-align: top; } + .small-row { + display: table !important; + table-layout: fixed !important; + width: 100% !important; } + .small-col { + display: table-cell !important; + vertical-align: top !important; } + /* widths for small screens */ + .small-w25 { + width: 25% !important; } + .small-w33 { + width: 33.3333% !important; } + .small-w50 { + width: 50% !important; } + .small-w66 { + width: 66.6666% !important; } + .small-w75 { + width: 75% !important; } + .small-w100, + .small-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; } + /* margins for small screens */ + .small-man, + .small-ma0 { + margin: 0 !important; } + .small-pan, + .small-pa0 { + padding: 0 !important; } } + +/* tiny screens */ +/* ------------ */ +@media (max-width: 639px) { + /* quick small resolution reset */ + .mod, + .col, + fieldset { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; } + .flex-container { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; } + .w300p, + .w400p, + .w500p { + width: auto; + float: none; } + .row { + display: block !important; + width: 100% !important; } + /* layouts for tiny screens */ + .tiny-hidden { + display: none !important; } + .tiny-visible { + display: block !important; } + .tiny-no-float { + float: none; } + .tiny-inbl { + display: inline-block; + float: none; + 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; } + th, + td { + display: block; + width: auto; + text-align: left; } + thead { + display: none; } + /* widths for tiny screens */ + .tiny-w25 { + width: 25% !important; } + .tiny-w33 { + width: 33.3333% !important; } + .tiny-w50 { + width: 50% !important; } + .tiny-w66 { + width: 66.6666% !important; } + .tiny-w75 { + width: 75% !important; } + .tiny-w100, + .tiny-wauto { + display: block !important; + float: none !important; + clear: none !important; + width: auto !important; + margin-left: 0 !important; + margin-right: 0 !important; + border: 0; } + /* margins for tiny screens */ + .tiny-man, + .tiny-ma0 { + margin: 0 !important; } + .tiny-pan, + .tiny-pa0 { + padding: 0 !important; } } + +/* ----------------------------- */ +/* ==Own stylesheet */ /* ----------------------------- */ /* Here should go your own CSS styles */ -/* You can also link them with a LESS @import */ -/* @import "my-styles.less"; */ diff --git a/css/knacss.css b/css/knacss.css index 0f0dae1..7c5bf98 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -1,4 +1,4 @@ -/*! -* www.KNACSS.com V4.4.5 (1er avril 2016) @author: Raphael Goetter, Alsacreations +@charset "UTF-8";/*! +* www.KNACSS.com V5.0.0 (23 mai 2016) @author: Raphael Goetter, Alsacreations * Licence WTFPL http://www.wtfpl.net/ -*//*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */button,hr,input,select{overflow:visible}[type=checkbox],[type=radio],legend{padding:0;box-sizing:border-box}html,legend{box-sizing:border-box}.table,blockquote,code,img,input,legend,pre,svg,table,td,textarea,video{max-width:100%}.row,.table,table{table-layout:fixed}a:active,a:focus,a:hover,body,button,input,mark,optgroup,select,textarea{color:#000}[type=button],[type=reset],[type=submit],button,label{cursor:pointer}.col,.inbl,.row>*,.table,table,td,textarea,th{vertical-align:top}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}.row,legend{display:table}a{background-color:transparent;color:#333}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{margin:.67em 0}mark{background-color:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em;top:.5ex}sup{top:-.5em;bottom:1ex}img{border-style:none;vertical-align:middle}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box}button,input,select,textarea{font:inherit;margin:0}.h1-like,.h2-like,body,h1,h2{font-family:sans-serif}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:ButtonText dotted 1px}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;border:0;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}html{font-size:62.5%;font-size:calc(1em * .625)}*{box-sizing:inherit}ol,ul{padding-left:2em}img:not([src$=".svg"]){height:auto}blockquote,figure{margin-left:0;margin-right:0}body{margin:0;font-size:1.4rem;background-color:#fff;line-height:1.5}.center,.right{margin-left:auto}.center,.left{margin-right:auto}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.5}.h1-like,h1{font-size:3.2rem}.h2-like,h2{font-size:2.8rem}.h3-like,h3{font-size:2.4rem}.h4-like,h4{font-size:2rem}.h5-like,h5{font-size:1.8rem}.h6-like,h6{font-size:1.6rem}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}code,kbd,pre,samp{white-space:pre-line;white-space:pre-wrap;font-family:consolas,courier,monospace;line-height:normal}.btn,button,input,label,select,textarea{font-family:inherit;font-size:inherit}.italic,address,cite,em,i,var{font-style:italic}.h1-like:first-child,.h2-like:first-child,.h3-like:first-child,.h4-like:first-child,.h5-like:first-child,.h6-like:first-child,.p-like:first-child,blockquote:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,ol:first-child,p:first-child,pre:first-child,ul:first-child{margin-top:0}li .p-like,li ol,li p,li ul{margin-top:0;margin-bottom:0}table{margin-bottom:2rem}.bfc,.mod{overflow:hidden}.clear,.line,.row{clear:both}.clearfix::after,.line::after{content:"";display:table;clear:both;border-collapse:collapse}.txtleft{text-align:left}.txtright{text-align:right}.txtcenter{text-align:center}.fl{float:left}img.fl{margin-right:1rem}.fr{float:right}img.fr{margin-left:1rem}img.fl,img.fr{margin-bottom:.5rem}.row{width:100%}.col,.row>*{display:table-cell}body>script{display:none!important}.inbl{display:inline-block}.flex-container,[class*=flex-container]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-container-v{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-item-fluid{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0}.flex-item-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.flex-item-medium{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.flex-item-last{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.flex-item-center{margin:auto}[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem;letter-spacing:-.31em}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% * 1 / 4 - 2rem - .01px);min-width:0;margin-left:2rem;display:inline-block;vertical-align:top;letter-spacing:normal}[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.flex-item-double{width:calc(100% * 2 / 2 - 2rem - .01px)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.flex-item-double{width:calc(100% * 2 / 4 - 2rem - .01px)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.flex-item-double{width:calc(100% * 2 / 5 - 2rem - .01px)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.flex-item-double{width:calc(100% * 2 / 6 - 2rem - .01px)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.flex-item-double{width:calc(100% * 2 / 7 - 2rem - .01px)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.flex-item-double{width:calc(100% * 2 / 8 - 2rem - .01px)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.flex-item-double{width:calc(100% * 2 / 10 - 2rem - .01px)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.flex-item-double{width:calc(100% * 2 / 12 - 2rem - .01px)}@media (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.flex-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.flex-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.flex-item-double{width:calc(100% - 2rem - .01px)}}@media (max-width:320px){[class*="-tiny-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-tiny-2"]>.flex-item-double,[class*="-tiny-1"]>*,[class*="-tiny-1"]>.flex-item-double{width:calc(100% - 2rem - .01px)}}.grid-2-1>:nth-child(odd){width:calc(66.66666666666666% - 2rem - .01px)}.grid-2-1>:nth-child(even){width:calc(33.33333333333333% - 2rem - .01px)}@media (max-width:640px){.grid-2-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-2>:nth-child(odd){width:calc(33.33333333333333% - 2rem - .01px)}.grid-1-2>:nth-child(even){width:calc(66.66666666666666% - 2rem - .01px)}@media (max-width:640px){.grid-1-2>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-3-1>:nth-child(odd){width:calc(75% - 2rem - .01px)}.grid-3-1>:nth-child(even){width:calc(25% - 2rem - .01px)}@media (max-width:640px){.grid-3-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-3>:nth-child(odd){width:calc(25% - 2rem - .01px)}.grid-1-3>:nth-child(even){width:calc(75% - 2rem - .01px)}@media (max-width:640px){.grid-1-3>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-3-2>:nth-child(odd){width:calc(60% - 2rem - .01px)}.grid-3-2>:nth-child(even){width:calc(40% - 2rem - .01px)}@media (max-width:640px){.grid-3-2>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-2-3>:nth-child(odd){width:calc(40% - 2rem - .01px)}.grid-2-3>:nth-child(even){width:calc(60% - 2rem - .01px)}@media (max-width:640px){.grid-2-3>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-4-1>:nth-child(odd){width:calc(80% - 2rem - .01px)}.grid-4-1>:nth-child(even){width:calc(20% - 2rem - .01px)}@media (max-width:640px){.grid-4-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-4>:nth-child(odd){width:calc(20% - 2rem - .01px)}.grid-1-4>:nth-child(even){width:calc(80% - 2rem - .01px)}@media (max-width:640px){.grid-1-4>:nth-child(n){width:calc(100% - 2rem - .01px)}code,div,pre,samp,table,td,textarea,th{word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}}.pull{margin-right:auto}.push{margin-left:auto}.table,table{width:100%;border-collapse:collapse}.table{display:table}.btn,label{display:inline-block}#recaptcha_table,table.table-auto{table-layout:auto}td,th{min-width:2rem;cursor:default}fieldset,form{border:none}textarea{min-height:5em;resize:vertical}select{-webkit-appearance:menulist-button}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}.btn:focus,button:focus,input[type=button]:focus{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button.unstyled,input[type=button].unstyled,input[type=reset].unstyled,input[type=submit].unstyled{padding:0;border:none;line-height:1;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.unstyled:focus,input[type=button].unstyled:focus,input[type=reset].unstyled:focus,input[type=submit].unstyled:focus{box-shadow:none;outline:0}.is-hidden,[hidden]{display:none}.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.skip-links,.skip-links a{position:absolute}.is-disabled,[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed;-webkit-filter:grayscale(1);filter:grayscale(1)}ul.is-unstyled,ul.unstyled{list-style:none;padding-left:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.3333%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w66{width:66.6666%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w50p{width:50px}.w100p{width:100px}.w150p{width:150px}.w200p{width:200px}.w300p{width:300px}.w400p{width:400px}.w500p{width:500px}.w600p{width:600px}.w700p{width:700px}.w800p{width:800px}.w960p{width:960px}.mw960p{max-width:960px}.w1140p{width:1140px}.mw1140p{max-width:1140px}.wauto{width:auto}.ma0,.man{margin:0}.pa0,.pan{padding:0}.mas{margin:1rem}.mam{margin:2rem}.mal{margin:4rem}.pas{padding:1rem}.pam{padding:2rem}.pal{padding:4rem}.mt0,.mtn{margin-top:0}.mts{margin-top:1rem}.mtm{margin-top:2rem}.mtl{margin-top:4rem}.mr0,.mrn{margin-right:0}.mrs{margin-right:1rem}.mrm{margin-right:2rem}.mrl{margin-right:4rem}.mb0,.mbn{margin-bottom:0}.mbs{margin-bottom:1rem}.mbm{margin-bottom:2rem}.mbl{margin-bottom:4rem}.ml0,.mln{margin-left:0}.mls{margin-left:1rem}.mlm{margin-left:2rem}.mll{margin-left:4rem}.mauto{margin:auto}.mtauto{margin-top:auto}.mrauto{margin-right:auto}.mbauto{margin-bottom:auto}.mlauto{margin-left:auto}.pt0,.ptn{padding-top:0}.pts{padding-top:1rem}.ptm{padding-top:2rem}.ptl{padding-top:4rem}.pr0,.prn{padding-right:0}.prs{padding-right:1rem}.prm{padding-right:2rem}.prl{padding-right:4rem}.pb0,.pbn{padding-bottom:0}.pbs{padding-bottom:1rem}.pbm{padding-bottom:2rem}.pbl{padding-bottom:4rem}.pl0,.pln{padding-left:0}.pls{padding-left:1rem}.plm{padding-left:2rem}.pll{padding-left:4rem}@media (min-width:961px){.large-hidden{display:none!important}.large-visible{display:block!important}.large-no-float{float:none}.large-inbl{display:inline-block;float:none;vertical-align:top}.large-row{display:table;table-layout:fixed;width:100%!important}.large-col{display:table-cell;vertical-align:top}.large-w25{width:25%!important}.large-w33{width:33.3333%!important}.large-w50{width:50%!important}.large-w66{width:66.6666%!important}.large-w75{width:75%!important}.large-w100,.large-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.large-man{margin:0!important}}@media (min-width:641px) and (max-width:960px){.medium-hidden{display:none!important}.medium-visible{display:block!important}.medium-no-float{float:none}.medium-inbl{display:inline-block;float:none;vertical-align:top}.medium-row{display:table;table-layout:fixed;width:100%!important}.medium-col{display:table-cell;vertical-align:top}.medium-w25{width:25%!important}.medium-w33{width:33.3333%!important}.medium-w50{width:50%!important}.medium-w66{width:66.6666%!important}.medium-w75{width:75%!important}.medium-w100,.medium-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.medium-ma0,.medium-man{margin:0!important}}@media (min-width:321px) and (max-width:640px){.mw960p,.w600p,.w700p,.w800p,.w960p{width:auto;float:none}.small-hidden{display:none!important}.small-visible{display:block!important}.small-no-float{float:none}.small-inbl{display:inline-block;float:none;vertical-align:top}.small-row{display:table!important;table-layout:fixed!important;width:100%!important}.small-col{display:table-cell!important;vertical-align:top!important}.small-w25{width:25%!important}.small-w33{width:33.3333%!important}.small-w50{width:50%!important}.small-w66{width:66.6666%!important}.small-w75{width:75%!important}.small-w100,.small-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.small-ma0,.small-man{margin:0!important}.small-pa0,.small-pan{padding:0!important}}@media (max-width:320px){.col,.mod,.row,fieldset{display:block!important}.col,.mod,.tiny-w100,.tiny-wauto,fieldset{clear:none!important;margin-left:0!important;margin-right:0!important;border:0}.col,.mod,fieldset{float:none!important;width:auto!important}.tiny-inbl,.tiny-no-float{float:none}.flex-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.w300p,.w400p,.w500p{width:auto;float:none}.row,.tiny-row{width:100%!important}.tiny-hidden{display:none!important}.tiny-visible{display:block!important}.tiny-inbl{display:inline-block;vertical-align:top}.tiny-row{display:table!important;table-layout:fixed!important}.tiny-col{display:table-cell!important;vertical-align:top!important}td,th{display:block;width:auto;text-align:left}thead{display:none}.tiny-w25{width:25%!important}.tiny-w33{width:33.3333%!important}.tiny-w50{width:50%!important}.tiny-w66{width:66.6666%!important}.tiny-w75{width:75%!important}.tiny-w100,.tiny-wauto{display:block!important;float:none!important;width:auto!important}.tiny-ma0,.tiny-man{margin:0!important}.tiny-pa0,.tiny-pan{padding:0!important}}@media print{*{background:0 0!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="javascript:"]::after,a[href^="#"]::after{content:""}}.skip-links a{overflow:hidden;clip:rect(1px,1px,1px,1px);padding:.5em;background:#000;color:#fff;text-decoration:none}code,mark{padding:2px 4px}.skip-links a:focus{position:static;overflow:visible;clip:auto}@media (max-width:640px){.no-wrapping{word-wrap:normal;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual;hyphens:manual}}code,kbd,mark{border-radius:2px}kbd{padding:0 2px;border:1px solid #999}code{background:rgba(0,0,0,.04);color:#b11}pre code{padding:0;background:0 0;color:inherit;border-radius:0}sub,sup{vertical-align:0}blockquote{position:relative;padding-left:3em}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}blockquote>footer::before{content:"\2014 \0020"}q{font-style:normal}.q,q{quotes:"“\00a0" "\00a0”"}.q:lang(fr),q:lang(fr){quotes:"«\00a0" "\00a0»"}hr{display:block;clear:both;height:1px;margin:1em 0 2em;padding:0;border:0;color:#ccc;background-color:#ccc}.table,table{border:1px solid #ccc}caption{padding:1rem;color:#555;font-style:italic}td,th{padding:.3em .8em;border:1px dotted #aaa;text-align:left} \ No newline at end of file +*//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html,legend{box-sizing:border-box}a:active,a:focus,a:hover,body,mark{color:#000}code,mark{padding:2px 4px}button,hr,input{overflow:visible}hr,legend,pre code{padding:0}.clear,.line,.row,hr{clear:both}.txtleft,td,th{text-align:left}.table,blockquote,code,img,input,legend,pre,svg,table,td,textarea,video{max-width:100%}.row,.table,table{table-layout:fixed}.col,.inbl,.row>*,.table,table,td,textarea,th{vertical-align:top}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#333}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{margin:.67em 0}mark{background-color:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:0}sub{bottom:-.25em;top:.5ex}sup{top:-.5em;bottom:1ex}img{border-style:none;vertical-align:middle}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-size:1em}figure{margin:1em 40px}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.h1-like,.h2-like,body,h1,h2{font-family:sans-serif}html{font-size:62.5%;font-size:calc(1em * .625)}*{box-sizing:inherit}ol,ul{padding-left:2em}img:not([src$=".svg"]){height:auto}blockquote,figure{margin-left:0;margin-right:0}body{margin:0;font-size:1.4rem;background-color:#fff;line-height:1.5}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.5}.h1-like,h1{font-size:3.2rem}.h2-like,h2{font-size:2.8rem}.h3-like,h3{font-size:2.4rem}.h4-like,h4{font-size:2rem}.h5-like,h5{font-size:1.8rem}.h6-like,h6{font-size:1.6rem}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}code,kbd,pre,samp{white-space:pre-line;white-space:pre-wrap;font-family:consolas,courier,monospace;line-height:normal}.italic,address,cite,em,i,var{font-style:italic}.h1-like:first-child,.h2-like:first-child,.h3-like:first-child,.h4-like:first-child,.h5-like:first-child,.h6-like:first-child,.p-like:first-child,blockquote:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,ol:first-child,p:first-child,pre:first-child,ul:first-child{margin-top:0}li .p-like,li ol,li p,li ul{margin-top:0;margin-bottom:0}table{margin-bottom:2rem}@media print{*{background:0 0!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="#"]::after,a[href^="javascript:"]::after{content:""}}code,kbd,mark{border-radius:2px}kbd{padding:0 2px;border:1px solid #999}code{background:rgba(0,0,0,.04);color:#b11}pre code{background:0 0;color:inherit;border-radius:0}blockquote{position:relative;padding-left:3em}.skip-links,.skip-links a{position:absolute}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}.btn,button,input,label,select,textarea{font-family:inherit;font-size:inherit}blockquote>footer::before{content:"\2014 \0020"}q{font-style:normal}.q,q{quotes:"“\00a0" "\00a0”"}.q:lang(fr),q:lang(fr){quotes:"«\00a0" "\00a0»"}hr{box-sizing:content-box;display:block;height:1px;margin:1em 0 2em;border:0;color:#ccc;background-color:#ccc}.center,.right{margin-left:auto}.center,.left{margin-right:auto}.table,table{border:1px solid #ccc}caption{padding:1rem;color:#555;font-style:italic}td,th{padding:.3em .8em;border:1px dotted #aaa}.skip-links a{overflow:hidden;clip:rect(1px,1px,1px,1px);padding:.5em;background:#000;color:#fff;text-decoration:none}.skip-links a:focus{position:static;overflow:visible;clip:auto}@media (max-width:320px){code,div,pre,samp,table,td,textarea,th{word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.no-wrapping{word-wrap:normal;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual;hyphens:manual}}.bfc,.mod{overflow:hidden}.clearfix::after,.line::after{content:"";display:table;clear:both;border-collapse:collapse}.txtright{text-align:right}.txtcenter{text-align:center}.fl{float:left}img.fl{margin-right:1rem}.fr{float:right}img.fr{margin-left:1rem}img.fl,img.fr{margin-bottom:.5rem}.row{display:table;width:100%}.col,.row>*{display:table-cell}body>script{display:none!important}.inbl{display:inline-block}[class*=flex-container]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-container-v{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-item-fluid{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0}.flex-item-first,.grid-item-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.flex-item-medium,.grid-item-medium{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.flex-item-last,.grid-item-last{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.flex-item-center,.grid-item-center{margin:auto}[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - 2rem - .01px);min-width:0;min-height:0;margin-left:2rem}@media (min-width:321px) and (max-width:640px){[class*=grid-]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.grid-item-double{width:calc(100% * 2 / 2 - 2rem)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.grid-item-double{width:calc(100% * 2 / 4 - 2rem)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.grid-item-double{width:calc(100% * 2 / 5 - 2rem)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.grid-item-double{width:calc(100% * 2 / 6 - 2rem)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.grid-item-double{width:calc(100% * 2 / 7 - 2rem)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.grid-item-double{width:calc(100% * 2 / 8 - 2rem)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9]>.grid-item-double{width:calc(100% * 2 / 9 - 2rem)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.grid-item-double{width:calc(100% * 2 / 10 - 2rem)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11]>.grid-item-double{width:calc(100% * 2 / 11 - 2rem)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.grid-item-double{width:calc(100% * 2 / 12 - 2rem)}}@media (min-width:321px) and (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.grid-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.grid-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){.grid-2-1 :nth-child(odd){width:calc(66.66667% - 2rem)}.grid-1-2 :nth-child(odd),.grid-2-1 :nth-child(even){width:calc(33.33333% - 2rem)}.grid-1-2 :nth-child(even){width:calc(66.66667% - 2rem)}.grid-3-1 :nth-child(odd){width:calc(75% - 2rem)}.grid-1-3 :nth-child(odd),.grid-3-1 :nth-child(even){width:calc(25% - 2rem)}.grid-1-3 :nth-child(even){width:calc(75% - 2rem)}.grid-3-2 :nth-child(odd){width:calc(60% - 2rem)}.grid-2-3 :nth-child(odd),.grid-3-2 :nth-child(even){width:calc(40% - 2rem)}.grid-2-3 :nth-child(even){width:calc(60% - 2rem)}.grid-4-1 :nth-child(odd){width:calc(80% - 2rem)}.grid-1-4 :nth-child(odd),.grid-4-1 :nth-child(even){width:calc(20% - 2rem)}.grid-1-4 :nth-child(even){width:calc(80% - 2rem)}}.pull{margin-right:auto}.push{margin-left:auto}.table,table{width:100%;border-collapse:collapse}.table{display:table}#recaptcha_table,.table-auto{table-layout:auto}td,th{min-width:2rem;cursor:default}.btn{display:inline-block}fieldset,form{border:none}button,input,optgroup,select,textarea{color:#000}label{vertical-align:middle;cursor:pointer}legend{border:0;white-space:normal}textarea{min-height:5em;resize:vertical}select{-webkit-appearance:menulist-button}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{opacity:.54;color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}.btn:focus,button:focus,input[type=button]:focus{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button.unstyled,input[type=button].unstyled,input[type=reset].unstyled,input[type=submit].unstyled{padding:0;border:none;line-height:1;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.unstyled:focus,input[type=button].unstyled:focus,input[type=reset].unstyled:focus,input[type=submit].unstyled:focus{box-shadow:none;outline:0}.is-hidden,[hidden]{display:none}.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.is-disabled,[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed;-webkit-filter:grayscale(1);filter:grayscale(1)}ul.is-unstyled,ul.unstyled{list-style:none;padding-left:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.3333%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w66{width:66.6666%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w50p{width:50px}.w100p{width:100px}.w150p{width:150px}.w200p{width:200px}.w300p{width:300px}.w400p{width:400px}.w500p{width:500px}.w600p{width:600px}.w700p{width:700px}.w800p{width:800px}.w960p{width:960px}.mw960p{max-width:960px}.w1140p{width:1140px}.mw1140p{max-width:1140px}.wauto{width:auto}.ma0,.man{margin:0}.pa0,.pan{padding:0}.mas{margin:1rem}.mam{margin:2rem}.mal{margin:4rem}.pas{padding:1rem}.pam{padding:2rem}.pal{padding:4rem}.mt0,.mtn{margin-top:0}.mts{margin-top:1rem}.mtm{margin-top:2rem}.mtl{margin-top:4rem}.mr0,.mrn{margin-right:0}.mrs{margin-right:1rem}.mrm{margin-right:2rem}.mrl{margin-right:4rem}.mb0,.mbn{margin-bottom:0}.mbs{margin-bottom:1rem}.mbm{margin-bottom:2rem}.mbl{margin-bottom:4rem}.ml0,.mln{margin-left:0}.mls{margin-left:1rem}.mlm{margin-left:2rem}.mll{margin-left:4rem}.mauto{margin:auto}.mtauto{margin-top:auto}.mrauto{margin-right:auto}.mbauto{margin-bottom:auto}.mlauto{margin-left:auto}.pt0,.ptn{padding-top:0}.pts{padding-top:1rem}.ptm{padding-top:2rem}.ptl{padding-top:4rem}.pr0,.prn{padding-right:0}.prs{padding-right:1rem}.prm{padding-right:2rem}.prl{padding-right:4rem}.pb0,.pbn{padding-bottom:0}.pbs{padding-bottom:1rem}.pbm{padding-bottom:2rem}.pbl{padding-bottom:4rem}.pl0,.pln{padding-left:0}.pls{padding-left:1rem}.plm{padding-left:2rem}.pll{padding-left:4rem}@media (min-width:1280px){.large-hidden{display:none!important}.large-visible{display:block!important}.large-no-float{float:none}.large-inbl{display:inline-block;float:none;vertical-align:top}.large-row{display:table;table-layout:fixed;width:100%!important}.large-col{display:table-cell;vertical-align:top}.large-w25{width:25%!important}.large-w33{width:33.3333%!important}.large-w50{width:50%!important}.large-w66{width:66.6666%!important}.large-w75{width:75%!important}.large-w100,.large-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.large-ma0,.large-man{margin:0!important}}@media (min-width:960px) and (max-width:1279px){.medium-hidden{display:none!important}.medium-visible{display:block!important}.medium-no-float{float:none}.medium-inbl{display:inline-block;float:none;vertical-align:top}.medium-row{display:table;table-layout:fixed;width:100%!important}.medium-col{display:table-cell;vertical-align:top}.medium-w25{width:25%!important}.medium-w33{width:33.3333%!important}.medium-w50{width:50%!important}.medium-w66{width:66.6666%!important}.medium-w75{width:75%!important}.medium-w100,.medium-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.medium-ma0,.medium-man{margin:0!important}}@media (min-width:640px) and (max-width:959px){.mw960p,.w600p,.w700p,.w800p,.w960p{width:auto;float:none}.small-hidden{display:none!important}.small-visible{display:block!important}.small-no-float{float:none}.small-inbl{display:inline-block;float:none;vertical-align:top}.small-row{display:table!important;table-layout:fixed!important;width:100%!important}.small-col{display:table-cell!important;vertical-align:top!important}.small-w25{width:25%!important}.small-w33{width:33.3333%!important}.small-w50{width:50%!important}.small-w66{width:66.6666%!important}.small-w75{width:75%!important}.small-w100,.small-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.small-ma0,.small-man{margin:0!important}.small-pa0,.small-pan{padding:0!important}}@media (max-width:639px){.col,.mod,.row,fieldset{display:block!important}.col,.mod,.tiny-w100,.tiny-wauto,fieldset{clear:none!important;margin-left:0!important;margin-right:0!important;border:0}.col,.mod,fieldset{float:none!important;width:auto!important}.tiny-inbl,.tiny-no-float{float:none}.flex-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.w300p,.w400p,.w500p{width:auto;float:none}.row,.tiny-row{width:100%!important}.tiny-hidden{display:none!important}.tiny-visible{display:block!important}.tiny-inbl{display:inline-block;vertical-align:top}.tiny-row{display:table!important;table-layout:fixed!important}.tiny-col{display:table-cell!important;vertical-align:top!important}td,th{display:block;width:auto;text-align:left}thead{display:none}.tiny-w25{width:25%!important}.tiny-w33{width:33.3333%!important}.tiny-w50{width:50%!important}.tiny-w66{width:66.6666%!important}.tiny-w75{width:75%!important}.tiny-w100,.tiny-wauto{display:block!important;float:none!important;width:auto!important}.tiny-ma0,.tiny-man{margin:0!important}.tiny-pa0,.tiny-pan{padding:0!important}} \ No newline at end of file diff --git a/doc/00-commencer.md b/doc/00-commencer.md index be61daa..951717c 100644 --- a/doc/00-commencer.md +++ b/doc/00-commencer.md @@ -15,12 +15,14 @@ La version courte est "il n'y a rien à installer". Selon votre environnement de travail vous suffit de récupérer la feuille de styles : - en version [CSS classique](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss-unminified.css) (ou [minifié](vhttps://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss.css)) -- en version [LESS](https://github.com/raphaelgoetter/KNACSS/tree/master/less) - en version [Sass](https://github.com/raphaelgoetter/KNACSS/tree/master/sass) -_Les versions LESS et Sass seront bien évidemment plus malléables grâce à l'apport de variables et fonctions._ +_La version Sass sera bien évidemment plus malléable grâce à l'apport de variables et fonctions._ -À noter que KNACSS est basé sur un socle [Normalize.css](http://necolas.github.io/normalize.css/), célèbre - et éprouvé - reset CSS employé par Twitter, Github, Bootstrap, Guardian, etc. +À noter que KNACSS est basé sur deux outils : + +- [Normalize.css](http://necolas.github.io/normalize.css/), célèbre - et éprouvé - reset CSS employé par Twitter, Github, Bootstrap, Guardian, etc. +- [include-media](http://include-media.com/), mixins Sass pour la gestion des Media Queries. ## Usage @@ -32,11 +34,8 @@ Il est également possible de l'installer (toutes versions) via [Bower](http://b ## Compatibilité -KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs à partir d'IE8 inclus. +KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs à partir d'IE10 inclus. -Seules exceptions : - -- les positionnements avancés à base de Flexbox (IE10+ minimum), c'est à dire toutes les classes débutant par `.flex-` ## RTFM! @@ -51,39 +50,26 @@ Sachez qu'un [pense-bête en PDF](http://knacss.com/KNACSS-cheatsheet.pdf) est KNACSS en version complète ne vous convient pas ? Seule la grille flexbox vous intéresse ? Bienvenue dans *Grillade* ! -### votre grillade avec LESS ? +- en version [CSS classique](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.css) (parfaitement autonome et ne pèse que 4ko seulement !) +- en version [Sass](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.scss) (avec variables) -Il est possible de n'utiliser KNACSS que pour sa fonctionnalité de grille de positionnement et de bénéficier de colonnes égales, inégales, responsive, des offsets, des pull et push et des mises en exergue. Bref, de [tout l'attirail des grilles KNACSS](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md). - -Il vous suffit pour cela de récupérer le fichier suivant : [grillade.less](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.less) - -Ce fichier n'est rien d'autre que la concaténation de deux fichiers essentiels : -- `_00-config.less` (nécessaire pour les variables, les tailles de gouttières et les valeurs de breakpoints) -- `_03-grids.less` (ben oui, quand même) - -### votre grillade plutôt nature ? - -Vous souhaitez simplement bénéficier d'une grille de mise en page simple mais fonctionnelle, en pur CSS sans passer par LESS ou Sass ? - -Alors contentez-vous du fichier grillade.css, il est parfaitement autonome et ne pèse que 4ko seulement ! - -Par contre, n'oubliez quand même pas de lire [la documentation](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md) que l'on a concoctée rien que pour vous. +Dans tous les cas n'oubliez quand même pas de lire [la documentation](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md) que l'on a concoctée rien que pour vous. ## Préprocesseurs -KNACSS est conçu et pensé pour être adapté aux préprocesseurs que sont LESS et Sass. Nous employons LESS en interne, nos fichiers de travail sont donc des `.less` et non des `.css` (cela fonctionne aussi avec Sass). +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/less/_00-config.less) 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 [fichier de configuration](https://github.com/raphaelgoetter/KNACSS/blob/master/sass/_config-variables.scss) contenant toutes les variables du projet est intégré. Libre à vous de le modifier selon les contraintes de votre projet. -**Attention**, si vous importez KNACSS automatiquement via Bower (par exemple dans un dossier `vendor`), ce fichier de configuration risque d'être écrasé à chaque mise à jour de KNACSS. Nous vous invitons à en faire une copie dans votre dossier de travail et à commenter l'appel au fichier de config de `vendor`. +**Attention**, si vous importez KNACSS automatiquement via Bower (par exemple dans un dossier `vendor`), ce fichier de configuration risque d'être écrasé à chaque mise à jour de KNACSS. **Nous vous invitons à en faire une copie dans votre dossier de travail et à commenter l'appel au fichier de config de `vendor`**. Dans le cas d'un usage via préprocesseur, vos deux fichiers de travail principaux seront : -- le fichier `less/_00-config.less` contenant toutes les variables du projet à définir une fois pour toute au départ -- le fichier `less/knacss.less` qui importe tous les fichiers que vous risquez d'employez dans votre projet (`layout.css`, `responsive.css`, `forms.css`, `print.css`, etc.). +- 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 fichiers que vous risquez d'employez dans votre projet. -En cours de développement, il vous suffit de compiler ce fichier `less/knacss.less` (ou `sass/knacss.scss`) pour obtenir vos fichiers CSS utiles. +En cours de développement, il vous suffit de compiler ce fichier `sass/knacss.scss` pour obtenir vos fichiers CSS utiles. ### Préfixes navigateurs @@ -91,56 +77,29 @@ Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une 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 les versions LESS et 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 aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/). ### Mise à jour depuis une version précédente de KNACSS ? -La version `4.*.*` 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 `3.*.*`. +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.*.*`. -Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 4 de KNACSS : +Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 5 de KNACSS : -#### Alignements et flottants +#### Modifications majeures depuis la `4.*.*` -La rétrocompatibilité n'est pas préservée pour certains noms de classes ( `.left`, `.start`, `.fl`, `.table-`, `.flex-start`, `.flex-end`) : +- suppression de la version LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge) +- suppression des fallbacks pour IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge) +- restructuration / renommage des fichiers avec préfixes `_config-`, `_layout-`, `_library-`, `_object-`, `_override-` +- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent) +- ajout de la library include-media (http://include-media.com/) +- grille "grillade" à présent en mobile first -- `.left` ne correspond plus à un `float: left` mais à un `margin-right: auto`, il faut dorénavant employer `.fl` pour obtenir un flottant à gauche -- `.right` ne correspond plus à un `float: right` mais à un `margin-left: auto`, il faut dorénavant employer `.fr` pour obtenir un flottant à droite -- `.start` et `.end` n'existent plus +#### Modifications majeures depuis la `3.*.*` -#### Nommages des grilles - -Le système de grilles de KNACSS 4 est à présent basé sur flexbox (mais demeure compatible IE8 grâce à une alternative inline-block). - -De plus, les noms des conteneurs ont changé et nécessitent systématiquement un trait d'union. - -Exemple : - -- ancien nommage : `.grid2`, `.grid1-3` -- nouveau nommage : `.grid-2`, `.grid-1-3` - -#### Nommages de flexbox - -Les classes relatives à flexbox ont été renommées pour ne pas entrer en conflit avec des outils tels que Modernizer (qui ajoutent aux-aussi ce genre de classes). - -Ancien nommage : - -``` -.flexbox, .flexbox-h -.flexbox-v -.flexitem-fluid -.flexitem-center -.flexitem-first, .flexitem-medium, .flexitem-last -``` - -Nouveau nommage : - -``` -.flex-container, .flex-container-h -.flex-container-v -.flex-item-fluid -.flex-item-center -.flex-item-first, .flex-item-medium, .flex-item-last -``` +- La rétrocompatibilité n'est pas préservée pour certains noms de classes ( `.left`, `.start`, `.fl`, `.table-`, `.flex-start`, `.flex-end`) : `.left` ne correspond plus à un `float: left` mais à un `margin-right: auto`, il faut dorénavant employer `.fl` pour obtenir un flottant à gauche; `.right` ne correspond plus à un `float: right` mais à un `margin-left: auto`, il faut dorénavant employer `.fr` pour obtenir un flottant à droite; `.start` et `.end` n'existent plus +- Les noms des conteneurs de grille ont changé et nécessitent systématiquement un trait d'union : ancien nommage : `.grid2`, `.grid1-3`; nouveau nommage : `.grid-2`, `.grid-1-3` +- Les classes relatives à flexbox ont été renommées pour ne pas entrer en conflit avec des outils tels que Modernizer (qui ajoutent aux-aussi ce genre de classes). Nouveau nommage : +`.flex-container, .flex-container-h`, `.flex-container-v`, `.flex-item-fluid`, `.flex-item-center`, `.flex-item-first, .flex-item-medium, .flex-item-last` ### Utilisateur de SPIP ? diff --git a/doc/01-typo-et-reset.md b/doc/01-typo-et-reset.md index af69d61..7f2568f 100644 --- a/doc/01-typo-et-reset.md +++ b/doc/01-typo-et-reset.md @@ -11,7 +11,7 @@ En résumé, voilà les bases typographiques de KNACSS : ## Reset "light" -Le reset de KNACSS est volotairement minimal, le but n'étant pas de tout mettre à zéro pour le redéfinir par la suite. +Le reset de KNACSS est volontairement minimal, le but n'étant pas de tout mettre à zéro pour le redéfinir par la suite. La feuille de style débute ainsi par une variante de l'incontournable `* {box-sizing: border-box}` afin d'imposer le très pratique modèle de boîte CSS3 à tous les éléments du document. diff --git a/doc/03-grilles.md b/doc/03-grilles.md index 4115305..49fe90a 100644 --- a/doc/03-grilles.md +++ b/doc/03-grilles.md @@ -3,8 +3,8 @@ Une grille "KNACSS" a les caractéristiques globales suivantes : - Les largeurs des colonnes sont fluides (définies en pourcentage du parent), -- Une gouttière sépare chaque colonne (la valeur de cette gouttière est modifiable dans les fichiers `less/knacss.less` ou `sass/knacss.scss`), -- Par défaut, une grille n'est pas responsive mais il est très simple d'activer cette fonctionnalité, +- 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). Il existe deux types principaux de systèmes de grilles dans KNACSS : @@ -12,18 +12,17 @@ Il existe deux types principaux de systèmes de grilles dans KNACSS : - Les grilles à colonnes égales - Les grilles à colonnes inégales -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). Note : une alternative, basée sur `inline-block` est cependant proposée automatiquement pour les anciens navigateurs (IE8, Android 2). +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). Quelques exemples pour vous échauffer : - `
` : grille de 4 colonnes également réparties - `
` : grille de répartition 2/3 - 1/3 -- `
` : grille de 3 colonnes égales, puis 1 colonne sur très petit écran -- `
` : grille de 6 colonnes, puis 3 colonnes sur écran "small", puis 2 colonnes sur écran "tiny". +- `
` : grille de 3 colonnes égales, puis 1 colonne sur écran "small" +- `
` : 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 ! -**NOTE pour les utilisateurs de LESS / Sass :** par défaut, les grilles sont activées dans KNACSS. Si vous avez le moindre souci, vérifiez que `@import "_03-grids";` est présent et non commenté dans votre fichier `less/knacss.less` ou `sass/knacss.scss`). - ## Précautions à prendre Qui dit CSS3 dit précautions à prendre. @@ -31,7 +30,7 @@ La bonne nouvelle est que Flexbox est plutôt bien reconnu par l'ensemble des na 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 les versions LESS et 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 aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/). ## Exemple concret @@ -86,6 +85,26 @@ Les **enfants** directs d'un conteneur, quels qu'ils soient, se répartissent au - 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 +
+
un div ou n'importe quoi d'autre
+
un 2è div ou n'importe quoi d'autre
+
un 3è div ou n'importe quoi d'autre
+
etc.
+
+``` + ## 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". @@ -112,13 +131,13 @@ Résultat : 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 `.flex-item-double` à cet élément. +Pour ce faire, appliquez la classe `.grid-item-double` à cet élément. HTML : ```html
un div ou n'importe quoi d'autre
-
je suis deux fois plus large que mes frères
+
je suis deux fois plus large que mes frères
un 3è div ou n'importe quoi d'autre
etc.
@@ -131,14 +150,14 @@ Résultat : Vous pouvez modifier l'ordre d'affichage des éléments au sein d'une grille à l'aide des classes : -- `.flex-item-first` (l'élément apparaîtra avant tous les autres) -- `.flex-item-last` (l'élément apparaîtra tout à la fin de la grille) +- `.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
un div ou n'importe quoi d'autre
-
je m'affiche avant tous mes frères
+
je m'affiche avant tous mes frères
un 3è div ou n'importe quoi d'autre
etc.
@@ -147,22 +166,7 @@ HTML : Résultat : ![preums!](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-first.PNG) -## Grilles responsive -Vous pouvez définir le nombre de colonnes selon les tailles d'écran à l'aide des mots-clés suivants : - -- `-small-*` : définit le nombre de colonnes lorsque le point de rupture atteint la valeur de la variable `small-screen` -- `-tiny-*` : définit le nombre de colonnes lorsque le point de rupture atteint la valeur de la variable `tiny-screen` - -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 -
-
un div ou n'importe quoi d'autre
-
un 2è div ou n'importe quoi d'autre
-
un 3è div ou n'importe quoi d'autre
-
etc.
-
-``` ## Grilles imbriquées @@ -193,32 +197,32 @@ KNACSS est pensé pour être utilisé à l'aide de preprocesseurs tels que LESS ### Modifier les variables globales -Les variables de configuration des grilles se trouvent dans le fichier `less/_00-config.less` (pour les utilisateurs de LESS) et `sass/_00-config.scss` (en version Sass) : +Les variables de configuration des grilles se trouvent dans le fichier `sass/_config-variables.scss` : ```css -@gutter: 1em; -@number: 4; // for equal columns -@left: 2; // left side of uneven columns -@right: 1; // right side of uneven columns +$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 LESS/Sass seront compilés en CSS. +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)` pour personnaliser une grille de colonnes **égales**. Les arguments sont "n" = nombre de colonnes +- `.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 LESS +#### 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** -LESS (fichier de développement) : +Sass (fichier de développement) : ```css .grid-container { - .grid(6); + @include grid(4, 12px) } ``` @@ -228,17 +232,14 @@ CSS compilé (sans Autoprefixer) : ```css .grid-container { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-left: -1em; + margin-left: -12px; } .grid-container > * { - flex: 0 0 auto; - width: 16.66666667%; - display: block; /* IE fix */ - border-left: 1em solid transparent; - background-clip: padding-box !important; /* no background on border */ + width: calc(100% * 1 / 4 - 12px - .01px); + margin-left: 12px; +} +.grid-container > .grid-item-double { + width: calc(100% * 2 / 4 - 12px); } ... ``` @@ -251,7 +252,7 @@ LESS (fichier de développement) : ```css .grid-truc { - .uneven-grid(2, 1); + @include uneven-grid(2, 1); } ``` @@ -261,22 +262,13 @@ LESS (fichier de développement) : CSS compilé (sans Autoprefixer) : ```css -.grid-truc { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-left: -1em; -} -.grid-truc > * { - display: block; /* IE fix */ - border-left: 1em solid transparent; - background-clip: padding-box !important; /* no background on border */ -} -.grid-truc > *:nth-child(odd) { - width: 66.66666667%; -} -.grid-truc > *:nth-child(even) { - width: 33.33333333%; +@media (min-width: 641px) { + .grid-truc :nth-child(odd) { + width: calc(66.66667% - 2rem); + } + .grid-truc :nth-child(even) { + width: calc(33.33333% - 2rem); + } } ... ``` diff --git a/gulpfile.js b/gulpfile.js index 1c375cd..efafdf0 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -2,7 +2,7 @@ var gulp = require('gulp'); // Include plugins -var less = require('gulp-less'); +var sass = require('gulp-sass'); var concat = require('gulp-concat'); var rename = require('gulp-rename'); var minifycss = require('gulp-minify-css'); @@ -12,8 +12,8 @@ var autoprefixer = require('gulp-autoprefixer'); // tâche CSS = compile vers knacss.css et knacss-unminified.css gulp.task('css', function () { - return gulp.src('./less/knacss.less') - .pipe(less()) + return gulp.src('./sass/knacss.scss') + .pipe(sass()) .pipe(autoprefixer()) .pipe(rename('knacss-unminified.css')) .pipe(gulp.dest('./css/')) @@ -25,10 +25,10 @@ gulp.task('css', function () { }); gulp.task('grillade', function() { - return gulp.src(['./less/_00-config.less', './less/_03-grids.less']) - .pipe(concat('grillade.less')) + return gulp.src(['./sass/_include-media/_include-media.scss','./sass/_config-variables.scss', './sass/_layout-grids.scss']) + .pipe(concat('grillade.scss')) .pipe(gulp.dest('./css/')) - .pipe(less()) + .pipe(sass()) .pipe(autoprefixer()) .pipe(minifycss()) .pipe(gulp.dest('./css/')); @@ -36,7 +36,7 @@ gulp.task('grillade', function() { // Watcher gulp.task('watch', function() { - gulp.watch(['./less/*.less'], ['css']); + gulp.watch(['./sass/*.scss'], ['css']); }); diff --git a/less/_00-config.less b/less/_00-config.less deleted file mode 100644 index fbaef8f..0000000 --- a/less/_00-config.less +++ /dev/null @@ -1,72 +0,0 @@ -/*! -* www.KNACSS.com V4.4.5 (1er avril 2016) @author: Raphael Goetter, Alsacreations -* Licence WTFPL http://www.wtfpl.net/ -*/ - -// Config file and project variables - -// font sizes -@base-font-size : 1.4rem; // ex. 1.4rem would be "14px" equivalent -@line-height : 1.5; // equiv line-height 1.5 -@h1-size : 3.2rem; // equiv "32px" -@h2-size : 2.8rem; // equiv "28px" -@h3-size : 2.4rem; // equiv "24px" -@h4-size : 2.0rem; // equiv "20px" -@h5-size : 1.8rem; // equiv "18px" -@h6-size : 1.6rem; // equiv "16px" - -// font stacks -@font-stack-common : sans-serif; // common font -@font-stack-headings : sans-serif; // headings font -@font-stack-monospace : consolas, courier, monospace; // monospace font - -// font colors -@base-color : #000; // text color on body and content -@primary-color : #000; // text color on primary elements -@secondary-color : #000; // text color on secondary elements -@headings-color : #000; // text color on headings -@headings-1-color : #000; // text color on headings level 1 -@headings-2-color : #000; // text color on headings level 2 -@headings-3-color : #000; // text color on headings level 3 -@base-color-link : #333; // base links color -@base-color-link-hover : #000; // base hovered/focused links color - -// backgrounds -@base-background : #fff; // body background color -@primary-background : #fff; // primary elements background color -@secondary-background : #fff; // secondary elements background color - -// spacings (choose unit you prefer) -@tiny-value : .5rem; // tiny value for margins / paddings -@tiny-plus-value : .7rem; // tiny+ value for margins / paddings -@small-value : 1rem; // small value for margins / paddings -@small-plus-value : 1.5rem; // small+ value for margins / paddings -@medium-value : 2rem; // medium value for margins / paddings -@medium-plus-value : 3rem; // medium+ value for margins / paddings -@large-value : 4rem; // large value for margins / paddings -@large-plus-value : 6rem; // large value for margins / paddings -@extra-large-value : 8rem; // extra large value for margins / paddings -@extra-large-plus-value : 12rem; // extra large value for margins / paddings -@ultra-large-value : 16rem; // ultra large value for margins / paddings -@ultra-large-plus-value : 20rem; // ultra large value for margins / paddings - -// breakpoints (choose unit you prefer) -@tiny-screen : 320px; // tiny screens media query (less-equal than 320px) -@tiny-plus-screen : 480px; // screens between 321px and 480px -@small-screen : 640px; // screens between 481px and 640px -@small-plus-screen : 768px; // screens between 641px and 768px -@medium-screen : 960px; // screens between 769px and 960px -@medium-plus-screen : 1024px; // screens between 961px and 1024px -@large-screen : 1280px; // screens between 1025px and 1280px -@large-plus-screen : 1440px; // screens between 1281px and 1440px -@extra-large-screen : 1600px; // screens between 1441px and 1600px -@ultra-large-screen : 1920px; // ultra large screens - -// grids variables (choose unit you prefer) -@gutter: 2rem; // gutter value for grid layouts. Unit can be: %, px, em, rem -@number: 4; // number of equal columns -@left: 2; // left side of uneven columns -@right: 1; // right side of uneven columns - -//namespace (default : empty) -@kna-namespace:~""; diff --git a/less/_01a-normalize.less b/less/_01a-normalize.less deleted file mode 100644 index b0d3f97..0000000 --- a/less/_01a-normalize.less +++ /dev/null @@ -1,424 +0,0 @@ -/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ - -/** - * 1. Change the default font family in all browsers (opinionated). - * 2. Prevent adjustments of font size after orientation changes in IE and iOS. - */ - -html { - font-family: sans-serif; /* 1 */ - -ms-text-size-adjust: 100%; /* 2 */ - -webkit-text-size-adjust: 100%; /* 2 */ -} - -/** - * Remove the margin in all browsers (opinionated). - */ - -body { - margin: 0; -} - -/* HTML5 display definitions - ========================================================================== */ - -/** - * Add the correct display in IE 9-. - * 1. Add the correct display in Edge, IE, and Firefox. - * 2. Add the correct display in IE. - */ - -article, -aside, -details, /* 1 */ -figcaption, -figure, -footer, -header, -main, /* 2 */ -menu, -nav, -section, -summary { /* 1 */ - display: block; -} - -/** - * Add the correct display in IE 9-. - */ - -audio, -canvas, -progress, -video { - display: inline-block; -} - -/** - * Add the correct display in iOS 4-7. - */ - -audio:not([controls]) { - display: none; - height: 0; -} - -/** - * Add the correct vertical alignment in Chrome, Firefox, and Opera. - */ - -progress { - vertical-align: baseline; -} - -/** - * Add the correct display in IE 10-. - * 1. Add the correct display in IE. - */ - -template, /* 1 */ -[hidden] { - display: none; -} - -/* Links - ========================================================================== */ - -/** - * Remove the gray background on active links in IE 10. - */ - -a { - background-color: transparent; -} - -/** - * Remove the outline on focused links when they are also active or hovered - * in all browsers (opinionated). - */ - -a:active, -a:hover { - outline-width: 0; -} - -/* Text-level semantics - ========================================================================== */ - -/** - * 1. Remove the bottom border in Firefox 39-. - * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. - */ - -abbr[title] { - border-bottom: none; /* 1 */ - text-decoration: underline; /* 2 */ - text-decoration: underline dotted; /* 2 */ -} - -/** - * Prevent the duplicate application of `bolder` by the next rule in Safari 6. - */ - -b, -strong { - font-weight: inherit; -} - -/** - * Add the correct font weight in Chrome, Edge, and Safari. - */ - -b, -strong { - font-weight: bolder; -} - -/** - * Add the correct font style in Android 4.3-. - */ - -dfn { - font-style: italic; -} - -/** - * Correct the font size and margin on `h1` elements within `section` and - * `article` contexts in Chrome, Firefox, and Safari. - */ - -h1 { - font-size: 2em; - margin: 0.67em 0; -} - -/** - * Add the correct background and color in IE 9-. - */ - -mark { - background-color: #ff0; - color: #000; -} - -/** - * Add the correct font size in all browsers. - */ - -small { - font-size: 80%; -} - -/** - * Prevent `sub` and `sup` elements from affecting the line height in - * all browsers. - */ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* Embedded content - ========================================================================== */ - -/** - * Remove the border on images inside links in IE 10-. - */ - -img { - border-style: none; -} - -/** - * Hide the overflow in IE. - */ - -svg:not(:root) { - overflow: hidden; -} - -/* Grouping content - ========================================================================== */ - -/** - * 1. Correct the inheritance and scaling of font size in all browsers. - * 2. Correct the odd `em` font sizing in all browsers. - */ - -code, -kbd, -pre, -samp { - font-family: monospace, monospace; /* 1 */ - font-size: 1em; /* 2 */ -} - -/** - * Add the correct margin in IE 8. - */ - -figure { - margin: 1em 40px; -} - -/** - * 1. Add the correct box sizing in Firefox. - * 2. Show the overflow in Edge and IE. - */ - -hr { - box-sizing: content-box; /* 1 */ - height: 0; /* 1 */ - overflow: visible; /* 2 */ -} - -/* Forms - ========================================================================== */ - -/** - * Change font properties to `inherit` in all browsers (opinionated). - */ - -button, -input, -select, -textarea { - font: inherit; -} - -/** - * Restore the font weight unset by the previous rule. - */ - -optgroup { - font-weight: bold; -} - -/** - * Show the overflow in IE. - * 1. Show the overflow in Edge. - * 2. Show the overflow in Edge, Firefox, and IE. - */ - -button, -input, /* 1 */ -select { /* 2 */ - overflow: visible; -} - -/** - * Remove the margin in Safari. - * 1. Remove the margin in Firefox and Safari. - */ - -button, -input, -select, -textarea { /* 1 */ - margin: 0; -} - -/** - * Remove the inheritence of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritence of text transform in Firefox. - */ - -button, -select { /* 1 */ - text-transform: none; -} - -/** - * Change the cursor in all browsers (opinionated). - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - cursor: pointer; -} - -/** - * Restore the default cursor to disabled elements unset by the previous rule. - */ - -[disabled] { - cursor: default; -} - -/** - * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` - * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS. - */ - -button, -html [type="button"], /* 1 */ -[type="reset"], -[type="submit"] { - -webkit-appearance: button; /* 2 */ -} - -/** - * Remove the inner border and padding in Firefox. - */ - -button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; - padding: 0; -} - -/** - * Restore the focus styles unset by the previous rule. - */ - -button:-moz-focusring, -input:-moz-focusring { - outline: 1px dotted ButtonText; -} - -/** - * Change the border, margin, and padding in all browsers (opinionated). - */ - -fieldset { - border: 1px solid #c0c0c0; - margin: 0 2px; - padding: 0.35em 0.625em 0.75em; -} - -/** - * 1. Correct the text wrapping in Edge and IE. - * 2. Correct the color inheritance from `fieldset` elements in IE. - * 3. Remove the padding so developers are not caught out when they zero out - * `fieldset` elements in all browsers. - */ - -legend { - box-sizing: border-box; /* 1 */ - color: inherit; /* 2 */ - display: table; /* 1 */ - max-width: 100%; /* 1 */ - padding: 0; /* 3 */ - white-space: normal; /* 1 */ -} - -/** - * Remove the default vertical scrollbar in IE. - */ - -textarea { - overflow: auto; -} - -/** - * 1. Add the correct box sizing in IE 10-. - * 2. Remove the padding in IE 10-. - */ - -[type="checkbox"], -[type="radio"] { - box-sizing: border-box; /* 1 */ - padding: 0; /* 2 */ -} - -/** - * Correct the cursor style of increment and decrement buttons in Chrome. - */ - -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { - height: auto; -} - -/** - * Correct the odd appearance of search inputs in Chrome and Safari. - */ - -[type="search"] { - -webkit-appearance: textfield; -} - -/** - * Remove the inner padding and cancel buttons in Chrome on OS X and - * Safari on OS X. - */ - -[type="search"]::-webkit-search-cancel-button, -[type="search"]::-webkit-search-decoration { - -webkit-appearance: none; -} diff --git a/less/_01b-base.less b/less/_01b-base.less deleted file mode 100644 index 873f05b..0000000 --- a/less/_01b-base.less +++ /dev/null @@ -1,212 +0,0 @@ -/* ----------------------------- */ -/* == soft reset */ -/* ----------------------------- */ - -/* switching to border-box model for all elements */ -html { - box-sizing: border-box; -} - -* { - 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; -} - -/* ----------------------------- */ -/* == typography */ -/* ----------------------------- */ - -html { - - /* set base font-size to equiv "10px", which is adapted to rem unit */ - font-size: 62.5%; - - /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ - /* thanks to @guardian, @victorbritopro and @eQRoeil */ - font-size: ~'calc(1em * .625)'; -} - -body { - font-size: @base-font-size; - - background-color: @base-background; - color: @base-color; - font-family: @font-stack-common; - line-height: @line-height; -} - -a { - color: @base-color-link; - &:hover, &:focus, &:active { - color: @base-color-link-hover; - } -} - -/* font-sizing for content */ -p, -.@{kna-namespace}p-like, -ul, -ol, -dl, -blockquote, -pre, -td, -th, -label, -textarea, -caption, -details, -figure { - margin-top: 0.75em; - margin-bottom: 0; - line-height: @line-height; -} - -h1, -.@{kna-namespace}h1-like { - font-size: @h1-size; - font-family: @font-stack-headings; -} - -h2, -.@{kna-namespace}h2-like { - font-size: @h2-size; - font-family: @font-stack-headings; -} - -h3, -.@{kna-namespace}h3-like { - font-size: @h3-size; -} - -h4, -.@{kna-namespace}h4-like { - font-size: @h4-size; -} - -h5, -.@{kna-namespace}h5-like { - font-size: @h5-size; -} - -h6, -.@{kna-namespace}h6-like { - font-size: @h6-size; -} - -/* alternate font-sizing */ -.@{kna-namespace}smaller { - font-size: 0.6em; -} - -.@{kna-namespace}small { - font-size: 0.8em; -} - -.@{kna-namespace}big { - font-size: 1.2em; -} - -.@{kna-namespace}bigger { - font-size: 1.5em; -} - -.@{kna-namespace}biggest { - font-size: 2em; -} - -code, -pre, -samp, -kbd { - /* IE fix */ - white-space: pre-line; - white-space: pre-wrap; - font-family: @font-stack-monospace; - line-height: normal; -} - -em, -.@{kna-namespace}italic, -address, -cite, -i, -var { - font-style: italic; -} - -/* ----------------------------- */ -/* == browsers consistency */ -/* ----------------------------- */ - -/* avoid top margins on first content element */ -p, -.@{kna-namespace}p-like, -ul, -ol, -dl, -blockquote, -pre, -h1, -.@{kna-namespace}h1-like, -h2, -.@{kna-namespace}h2-like, -h3, -.@{kna-namespace}h3-like, -h4, -.@{kna-namespace}h4-like, -h5, -.@{kna-namespace}h5-like, -h6, -.@{kna-namespace}h6-like { - &:first-child { - margin-top: 0; - } -} - -/* avoid margins on nested elements */ -li p, -li .@{kna-namespace}p-like, -li ul, -li ol { - margin-top: 0; - margin-bottom: 0; -} - -/* max values */ -img, -table, -td, -blockquote, -code, -pre, -textarea, -input, -video, -svg { - max-width: 100%; -} - -/* margin-bottom on tables */ -table { - margin-bottom: @medium-value; -} diff --git a/less/_02-layout.less b/less/_02-layout.less deleted file mode 100644 index 98ea5cd..0000000 --- a/less/_02-layout.less +++ /dev/null @@ -1,139 +0,0 @@ -/* ----------------------------- */ -/* ==layout and modules */ -/* ----------------------------- */ - -/* module, gains superpower "BFC" Block Formating Context */ -.mod, -.bfc { - overflow: hidden; -} - -/* blocks that needs to be placed under floats */ -.clear, -.@{kna-namespace}line, -.@{kna-namespace}row { - clear: both; -} - -/* blocks that must contain floats */ -.clearfix, -.@{kna-namespace}line { - &::after { - content: ""; - display: table; - clear: both; - border-collapse: collapse; - } -} - -/* simple blocks alignment */ -.@{kna-namespace}left { - margin-right: auto; -} - -.@{kna-namespace}right { - margin-left: auto; -} - -.@{kna-namespace}center { - margin-left: auto; - margin-right: auto; -} - -/* text and contents alignment */ -.@{kna-namespace}txtleft { - text-align: left; -} - -.@{kna-namespace}txtright { - text-align: right; -} - -.@{kna-namespace}txtcenter { - text-align: center; -} - -/* floating elements */ -.@{kna-namespace}fl { - float: left; -} - -img.@{kna-namespace}fl { - margin-right: @small-value; -} - -.@{kna-namespace}fr { - float: right; -} - -img.@{kna-namespace}fr { - margin-left: @small-value; -} - -img.@{kna-namespace}fl, -img.@{kna-namespace}fr { - 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 */ -.@{kna-namespace}inbl { - display: inline-block; - vertical-align: top; -} - -/* flexbox layout -http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html -*/ - -[class*="@{kna-namespace}flex-container"], -.@{kna-namespace}flex-container { - display : flex; - flex-wrap: wrap; -} - -.@{kna-namespace}flex-container-h { - flex-direction: row; -} - -.@{kna-namespace}flex-container-v { - flex-direction: column; -} - -.@{kna-namespace}flex-item-fluid { - flex: 1; - min-width: 0; -} - -.@{kna-namespace}flex-item-first { - order : -1; -} - -.@{kna-namespace}flex-item-medium { - order : 0; -} - -.@{kna-namespace}flex-item-last { - order : 1; -} - -.@{kna-namespace}flex-item-center { - margin: auto; -} diff --git a/less/_03-grids.less b/less/_03-grids.less deleted file mode 100644 index bd99e45..0000000 --- a/less/_03-grids.less +++ /dev/null @@ -1,191 +0,0 @@ -/* ---------------------------------- */ -/* ==Grillade */ -/* ---------------------------------- */ - -// Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html -// Demo : http://codepen.io/raphaelgoetter/pen/zxBMLW - -// Usage in vanilla CSS: -// -
for an equal fourth columns grid container -// -
for an uneven columns grid container - -// Usage with preprocessors : if you're using LESS, you can config grids variables : -// n = number of columns (default = 4) -// example : .grid-perso { .grid(12); } -// ... or uneven grids : -// left = left ratio column (default = 2) / right = right ratio column (default = 1) -// example : .grid-perso { .uneven-grid(2, 1); } - -/* grid container */ -[class*="@{kna-namespace}grid-"] { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-left: -@gutter; - - /* inline-block fallback for IE9 generation */ - letter-spacing: -0.31em; -} - -/* grid childs */ -[class*="@{kna-namespace}grid-"] > * { - box-sizing: border-box; - flex: 0 0 auto; - width: ~'calc(100% * 1 / @{number} - @{gutter} - .01px)'; - min-width: 0; - margin-left: @gutter; - - /* inline-block fallback for IE9 generation */ - display: inline-block; - vertical-align: top; - letter-spacing: normal; -} - -// LESS mixin for custom grid container -.check-new-margin(@newgutter, @multiplier) when not (@newgutter = @gutter) { - margin-left: @newgutter * @multiplier; -} - -// LESS mixins for *equal* columns grid container -// example : .grid-perso { .grid(12); } -.grid(@number:@number, @gutter:@gutter) { - .check-new-margin(@gutter, -1); - & > * { - width: ~'calc(100% * 1 / @{number} - @{gutter} - .01px)'; - .check-new-margin(@gutter, 1); - } - & > .@{kna-namespace}flex-item-double { - width: ~'calc(100% * 2 / @{number} - @{gutter} - .01px)'; - } -} - -// Examples : will be compiled in CSS -[class*="@{kna-namespace}grid-2"] { - .grid(2); -} -[class*="@{kna-namespace}grid-3"] { - .grid(3); -} -[class*="@{kna-namespace}grid-4"] { - .grid(4); -} -[class*="@{kna-namespace}grid-5"] { - .grid(5); -} -[class*="@{kna-namespace}grid-6"] { - .grid(6); -} -[class*="@{kna-namespace}grid-7"] { - .grid(7); -} -[class*="@{kna-namespace}grid-8"] { - .grid(8); -} -[class*="@{kna-namespace}grid-10"] { - .grid(10); -} -[class*="@{kna-namespace}grid-12"] { - .grid(12); -} - -/* Responsive grid */ -// "small-2" = 2 columns when small screen -// example : .grid-4-small-2 will be 4 then 2 columns -@media (max-width: @small-screen) { - [class*="-small-4"] > * { - width: ~'calc(100% * 1 / 4 - @{gutter} - .01px)'; - } - [class*="-small-4"] > .flex-item-double { - width: ~'calc(100% * 1 / 2 - @{gutter} - .01px)'; - } - [class*="-small-3"] > * { - width: ~'calc(100% * 1 / 3 - @{gutter} - .01px)'; - } - [class*="-small-3"] > .flex-item-double { - width: ~'calc(100% * 2 / 3 - @{gutter} - .01px)'; - } - [class*="-small-2"] > * { - width: ~'calc(100% * 1 / 2 - @{gutter} - .01px)'; - } - [class*="-small-2"] > .flex-item-double { - width: ~'calc(100% - @{gutter} - .01px)'; - } - [class*="-small-1"] > * { - width: ~'calc(100% - @{gutter} - .01px)'; - } - [class*="-small-1"] > .flex-item-double { - width: ~'calc(100% - @{gutter} - .01px)'; - } -} -// "tiny-1" = 1 column when tiny screen -// example : .grid-4-small-2-tiny-1 will be 4 then 2 columns then 1 column -@media (max-width: @tiny-screen) { - [class*="-tiny-2"] > * { - width: ~'calc(100% * 1 / 2 - @{gutter} - .01px)'; - } - [class*="-tiny-2"] > .flex-item-double { - width: ~'calc(100% - @{gutter} - .01px)'; - } - [class*="-tiny-1"] > * { - width: ~'calc(100% - @{gutter} - .01px)'; - } - [class*="-tiny-1"] > .flex-item-double { - width: ~'calc(100% - @{gutter} - .01px)'; - } -} - -// LESS mixins for *unequal* columns grid container -// example : .grid-perso { .uneven-grid(2, 1); } -.uneven-grid(@left:@left, @right:@right, @gutter:@gutter) { - .check-new-margin(@gutter, -1); - & > * { - .check-new-margin(@gutter, 1); - &:nth-child(odd) { - @size: (@left / (@left + @right)) * 100%; - width: ~'calc(@{size} - @{gutter} - .01px)'; - } - &:nth-child(even) { - @size: (@right / (@left + @right)) * 100%; - width: ~'calc(@{size} - @{gutter} - .01px)'; - } - } - - @media (max-width: @small-screen) { - & > *:nth-child(n) { - width: ~'calc(100% - @{gutter} - .01px)'; - } - } -} - -// Examples : will be compiled in CSS -.@{kna-namespace}grid-2-1 { - .uneven-grid(2,1); -} -.@{kna-namespace}grid-1-2 { - .uneven-grid(1,2); -} -.@{kna-namespace}grid-3-1 { - .uneven-grid(3,1); -} -.@{kna-namespace}grid-1-3 { - .uneven-grid(1,3); -} -.@{kna-namespace}grid-3-2 { - .uneven-grid(3,2); -} -.@{kna-namespace}grid-2-3 { - .uneven-grid(2,3); -} -.@{kna-namespace}grid-4-1 { - .uneven-grid(4,1); -} -.@{kna-namespace}grid-1-4 { - .uneven-grid(1,4); -} - -.@{kna-namespace}pull { - margin-right: auto; -} -.@{kna-namespace}push { - margin-left: auto; -} diff --git a/less/_04-tables.less b/less/_04-tables.less deleted file mode 100644 index 87d4ef7..0000000 --- a/less/_04-tables.less +++ /dev/null @@ -1,28 +0,0 @@ -/* ----------------------------- */ -/* ==tables */ -/* ----------------------------- */ - -table, -.@{kna-namespace}table { - width: 100%; - max-width : 100%; - table-layout: fixed; - border-collapse: collapse; - vertical-align: top; -} - -.@{kna-namespace}table { - display: table; -} - -#recaptcha_table, -table.@{kna-namespace}table-auto { - table-layout:auto; -} - -td, -th { - vertical-align: top; - min-width: @medium-value; - cursor: default; -} diff --git a/less/_05-forms.less b/less/_05-forms.less deleted file mode 100644 index 3ec3006..0000000 --- a/less/_05-forms.less +++ /dev/null @@ -1,111 +0,0 @@ -/* ----------------------------- */ -/* ==forms */ -/* ----------------------------- */ - -/* thanks to HTML5boilerplate, -* github.com/nathansmith/formalize and www.sitepen.com -*/ - -/* buttons */ -.@{kna-namespace}btn { - display: inline-block; -} - -/* forms items */ -form, -fieldset { - border: none; -} - -input, -button, -select, -label, -.@{kna-namespace}btn { - font-family: inherit; - font-size: inherit; -} - -button, -input, -optgroup, -select, -textarea { - color: @base-color; -} - -label { - display: inline-block; - cursor: pointer; -} - -legend { - border: 0; - white-space: normal; -} - -textarea { - min-height: 5em; - vertical-align: top; - font-family: inherit; - font-size: inherit; - resize: vertical; -} - -select { - -webkit-appearance: menulist-button; -} - -/* if select styling bugs on WebKit */ -/* select { -webkit-appearance: none; } */ - -/* 'x' appears on right of search input when text is entered. This removes it */ -input[type="search"]::-webkit-search-decoration, -input[type="search"]::-webkit-search-cancel-button, -input[type="search"]::-webkit-search-results-button, -input[type="search"]::-webkit-search-results-decoration { - display: none; -} - -::-webkit-input-placeholder { - color: #777; -} - -input:-moz-placeholder, -textarea:-moz-placeholder { - color: #777; -} - -.@{kna-namespace}btn:focus, -input[type="button"]:focus, -button:focus { - -webkit-tap-highlight-color: transparent; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/* unstyled forms */ -.@{kna-namespace}unstyled { - button&, - input[type="button"]&, - input[type="submit"]&, - input[type="reset"]& { - padding: 0; - border: none; - line-height: 1; - text-align: left; - background: none; - border-radius: 0; - box-shadow: none; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; - - &:focus { - box-shadow: none; - outline: none; - } - } -} diff --git a/less/_06-helpers.less b/less/_06-helpers.less deleted file mode 100644 index cc1df88..0000000 --- a/less/_06-helpers.less +++ /dev/null @@ -1,352 +0,0 @@ -/* ---------------------------------- */ -/* ==state helpers */ -/* ---------------------------------- */ - -/* invisible for all */ -.is-hidden, -[hidden] { - display: none; -} - -/* hidden but not for an assistive technology like a screen reader, Yahoo! method */ -.visually-hidden { - position: absolute !important; - border: 0 !important; - height: 1px !important; - width: 1px !important; - padding: 0 !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; -} - -.is-disabled, -[disabled] { - opacity: 0.5; - pointer-events: none; - cursor: not-allowed; - filter: grayscale(1); -} - -ul.is-unstyled, -ul.unstyled { - list-style: none; - padding-left: 0; -} - -/* ---------------------------------- */ -/* ==visual helpers */ -/* .. use them with parcimony ! */ -/* ---------------------------------- */ - -/* blocks widths (percentage and pixels) */ -.@{kna-namespace}w10 { - width: 10%; -} - -.@{kna-namespace}w20 { - width: 20%; -} - -.@{kna-namespace}w25 { - width: 25%; -} - -.@{kna-namespace}w30 { - width: 30%; -} - -.@{kna-namespace}w33 { - width: 33.3333%; -} - -.@{kna-namespace}w40 { - width: 40%; -} - -.@{kna-namespace}w50 { - width: 50%; -} - -.@{kna-namespace}w60 { - width: 60%; -} - -.@{kna-namespace}w66 { - width: 66.6666%; -} - -.@{kna-namespace}w70 { - width: 70%; -} - -.@{kna-namespace}w75 { - width: 75%; -} - -.@{kna-namespace}w80 { - width: 80%; -} - -.@{kna-namespace}w90 { - width: 90%; -} - -.@{kna-namespace}w100 { - width: 100%; -} - - -.@{kna-namespace}w50p { - width: 50px; -} - -.@{kna-namespace}w100p { - width: 100px; -} - -.@{kna-namespace}w150p { - width: 150px; -} - -.@{kna-namespace}w200p { - width: 200px; -} - -.@{kna-namespace}w300p { - width: 300px; -} - -.@{kna-namespace}w400p { - width: 400px; -} - -.@{kna-namespace}w500p { - width: 500px; -} - -.@{kna-namespace}w600p { - width: 600px; -} - -.@{kna-namespace}w700p { - width: 700px; -} - -.@{kna-namespace}w800p { - width: 800px; -} - -.@{kna-namespace}w960p { - width: 960px; -} - -.@{kna-namespace}mw960p { - max-width: 960px; -} - -.@{kna-namespace}w1140p { - width: 1140px; -} - -.@{kna-namespace}mw1140p { - max-width: 1140px; -} - -.@{kna-namespace}wauto { - width: auto; -} - -/* spacing helpers -p,m = padding,margin -a,t,r,b,l = all,top,right,bottom,left -s,m,l,n = small, medium, large, none -*/ -.@{kna-namespace}man, -.@{kna-namespace}ma0 { - margin: 0; -} - -.@{kna-namespace}pan, -.@{kna-namespace}pa0 { - padding: 0; -} - -.@{kna-namespace}mas { - margin: @small-value; -} - -.@{kna-namespace}mam { - margin: @medium-value; -} - -.@{kna-namespace}mal { - margin: @large-value; -} - -.@{kna-namespace}pas { - padding: @small-value; -} - -.@{kna-namespace}pam { - padding: @medium-value; -} - -.@{kna-namespace}pal { - padding: @large-value; -} - -.@{kna-namespace}mtn, -.@{kna-namespace}mt0 { - margin-top: 0; -} - -.@{kna-namespace}mts { - margin-top: @small-value; -} - -.@{kna-namespace}mtm { - margin-top: @medium-value; -} - -.@{kna-namespace}mtl { - margin-top: @large-value; -} - -.@{kna-namespace}mrn, -.@{kna-namespace}mr0 { - margin-right: 0; -} - -.@{kna-namespace}mrs { - margin-right: @small-value; -} - -.@{kna-namespace}mrm { - margin-right: @medium-value; -} - -.@{kna-namespace}mrl { - margin-right: @large-value; -} - -.@{kna-namespace}mbn, -.@{kna-namespace}mb0 { - margin-bottom: 0; -} - -.@{kna-namespace}mbs { - margin-bottom: @small-value; -} - -.@{kna-namespace}mbm { - margin-bottom: @medium-value; -} - -.@{kna-namespace}mbl { - margin-bottom: @large-value; -} - -.@{kna-namespace}mln, -.@{kna-namespace}ml0 { - margin-left: 0; -} - -.@{kna-namespace}mls { - margin-left: @small-value; -} - -.@{kna-namespace}mlm { - margin-left: @medium-value; -} - -.@{kna-namespace}mll { - margin-left: @large-value; -} - -.@{kna-namespace}mauto { - margin: auto; -} - -.@{kna-namespace}mtauto { - margin-top: auto; -} - -.@{kna-namespace}mrauto { - margin-right: auto; -} - -.@{kna-namespace}mbauto { - margin-bottom: auto; -} - -.@{kna-namespace}mlauto { - margin-left: auto; -} - -.@{kna-namespace}ptn, -.@{kna-namespace}pt0 { - padding-top: 0; -} - -.@{kna-namespace}pts { - padding-top: @small-value; -} - -.@{kna-namespace}ptm { - padding-top: @medium-value; -} - -.@{kna-namespace}ptl { - padding-top: @large-value; -} - -.@{kna-namespace}prn, -.@{kna-namespace}pr0 { - padding-right: 0; -} - -.@{kna-namespace}prs { - padding-right: @small-value; -} - -.@{kna-namespace}prm { - padding-right: @medium-value; -} - -.@{kna-namespace}prl { - padding-right: @large-value; -} - -.@{kna-namespace}pbn, -.@{kna-namespace}pb0 { - padding-bottom: 0; -} - -.@{kna-namespace}pbs { - padding-bottom: @small-value; -} - -.@{kna-namespace}pbm { - padding-bottom: @medium-value; -} - -.@{kna-namespace}pbl { - padding-bottom: @large-value; -} - -.@{kna-namespace}pln, -.@{kna-namespace}pl0 { - padding-left: 0; -} - -.@{kna-namespace}pls { - padding-left: @small-value; -} - -.@{kna-namespace}plm { - padding-left: @medium-value; -} - -.@{kna-namespace}pll { - padding-left: @large-value; -} diff --git a/less/_07-responsive.less b/less/_07-responsive.less deleted file mode 100644 index 9f75d65..0000000 --- a/less/_07-responsive.less +++ /dev/null @@ -1,372 +0,0 @@ -/* ----------------------------- */ -/* ==desktop and HD devices */ -/* ----------------------------- */ - -@media (min-width: (@medium-screen + 1)) { - /* rules for big resources and big screens like: background-images, font-faces, etc. */ -} - -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { - /* style adjustments for high density devices */ -} - -/* ---------------------------------- */ -/* ==Responsive large */ -/* ---------------------------------- */ - -@media (min-width: (@medium-screen + 1)) { - - /* layouts for large screens */ - .@{kna-namespace}large-hidden { - display: none !important; - } - - .@{kna-namespace}large-visible { - display: block !important; - } - - .@{kna-namespace}large-no-float { - float: none; - } - - .@{kna-namespace}large-inbl { - display: inline-block; - float: none; - 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 */ - .@{kna-namespace}large-w25 { - width: 25% !important; - } - - .@{kna-namespace}large-w33 { - width: 33.3333% !important; - } - - .@{kna-namespace}large-w50 { - width: 50% !important; - } - - .@{kna-namespace}large-w66 { - width: 66.6666% !important; - } - - .@{kna-namespace}large-w75 { - width: 75% !important; - } - - .@{kna-namespace}large-w100, - .@{kna-namespace}large-wauto { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - - /* margins for large screens */ - .@{kna-namespace}large-man { - margin: 0 !important; - } -} - -/* ---------------------------------- */ -/* ==Responsive medium */ -/* ---------------------------------- */ - -@media (min-width: (@small-screen + 1)) and (max-width: @medium-screen) { - - /* layouts for medium screens */ - .@{kna-namespace}medium-hidden { - display: none !important; - } - - .@{kna-namespace}medium-visible { - display: block !important; - } - - .@{kna-namespace}medium-no-float { - float: none; - } - - .@{kna-namespace}medium-inbl { - display: inline-block; - float: none; - 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 */ - .@{kna-namespace}medium-w25 { - width: 25% !important; - } - - .@{kna-namespace}medium-w33 { - width: 33.3333% !important; - } - - .@{kna-namespace}medium-w50 { - width: 50% !important; - } - - .@{kna-namespace}medium-w66 { - width: 66.6666% !important; - } - - .@{kna-namespace}medium-w75 { - width: 75% !important; - } - - .@{kna-namespace}medium-w100, - .@{kna-namespace}medium-wauto { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - - /* margins for medium screens */ - .@{kna-namespace}medium-man, - .@{kna-namespace}medium-ma0 { - margin: 0 !important; - } -} - -/* ---------------------------------- */ -/* ==Responsive small */ -/* ---------------------------------- */ - -@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) { - - /* quick reset in small resolution and less */ - .@{kna-namespace}w600p, - .@{kna-namespace}w700p, - .@{kna-namespace}w800p, - .@{kna-namespace}w960p, - .@{kna-namespace}mw960p { - width: auto; - float: none; - } - - /* layouts for small screens */ - .@{kna-namespace}small-hidden { - display: none !important; - } - - .@{kna-namespace}small-visible { - display: block !important; - } - - .@{kna-namespace}small-no-float { - float: none; - } - - .@{kna-namespace}small-inbl { - display: inline-block; - float: none; - 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 */ - .@{kna-namespace}small-w25 { - width: 25% !important; - } - - .@{kna-namespace}small-w33 { - width: 33.3333% !important; - } - - .@{kna-namespace}small-w50 { - width: 50% !important; - } - - .@{kna-namespace}small-w66 { - width: 66.6666% !important; - } - - .@{kna-namespace}small-w75 { - width: 75% !important; - } - - .@{kna-namespace}small-w100, - .@{kna-namespace}small-wauto { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - - /* margins for small screens */ - .@{kna-namespace}small-man, - .@{kna-namespace}small-ma0 { - margin: 0 !important; - } - - .@{kna-namespace}small-pan, - .@{kna-namespace}small-pa0 { - padding: 0 !important; - } - -} - -/* ---------------------------------- */ -/* ==Responsive tiny */ -/* ---------------------------------- */ - -@media (max-width: @tiny-screen) { - - /* quick tiny resolution reset */ - .@{kna-namespace}mod, - .@{kna-namespace}col, - fieldset { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - - .@{kna-namespace}flex-container { - flex-direction: column; - } - - .@{kna-namespace}w300p, - .@{kna-namespace}w400p, - .@{kna-namespace}w500p { - width: auto; - float: none; - } - - .@{kna-namespace}row { - display: block !important; - width: 100% !important; - } - - /* layouts for tiny screens */ - .@{kna-namespace}tiny-hidden { - display: none !important; - } - - .@{kna-namespace}tiny-visible { - display: block !important; - } - - .@{kna-namespace}tiny-no-float { - float: none; - } - - .@{kna-namespace}tiny-inbl { - display: inline-block; - float: none; - 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 */ - .@{kna-namespace}tiny-w25 { - width: 25% !important; - } - - .@{kna-namespace}tiny-w33 { - width: 33.3333% !important; - } - - .@{kna-namespace}tiny-w50 { - width: 50% !important; - } - - .@{kna-namespace}tiny-w66 { - width: 66.6666% !important; - } - - .@{kna-namespace}tiny-w75 { - width: 75% !important; - } - - .@{kna-namespace}tiny-w100, - .@{kna-namespace}tiny-wauto { - display: block !important; - float: none !important; - clear: none !important; - width: auto !important; - margin-left: 0 !important; - margin-right: 0 !important; - border: 0; - } - - /* margins for tiny screens */ - .@{kna-namespace}tiny-man, - .@{kna-namespace}tiny-ma0 { - margin: 0 !important; - } - - .@{kna-namespace}tiny-pan, - .@{kna-namespace}tiny-pa0 { - padding: 0 !important; - } - -} diff --git a/less/_08-print.less b/less/_08-print.less deleted file mode 100644 index 3016686..0000000 --- a/less/_08-print.less +++ /dev/null @@ -1,93 +0,0 @@ -/* quick print reset */ -@media print { - - * { - background: transparent !important; - box-shadow: none !important; - text-shadow: none !important; - } - - body { - width: auto; - margin: auto; - font-family: serif; - font-size: 12pt; - } - - p, - .@{kna-namespace}p-like, - h1, - .@{kna-namespace}h1-like, - h2, - .@{kna-namespace}h2-like, - h3, - .@{kna-namespace}h3-like, - h4, - .@{kna-namespace}h4-like, - h5, - .@{kna-namespace}h5-like, - h6, - .@{kna-namespace}h6-like, - blockquote, - ul, - ol { - color: #000; - margin: auto; - } - - .@{kna-namespace}print { - display: block; - } - - .@{kna-namespace}no-print { - display: none; - } - - /* no orphans, no widows */ - p, - .@{kna-namespace}p-like, - blockquote { - orphans: 3; - widows: 3; - } - - /* no breaks inside these elements */ - blockquote, - ul, - ol { - page-break-inside: avoid; - } - - /* page break before main headers - h1, - .h1-like { - page-break-before: always; - } - */ - - /* no breaks after these elements */ - h1, - .@{kna-namespace}h1-like, - h2, - .@{kna-namespace}h2-like, - h3, - .@{kna-namespace}h3-like, - caption { - page-break-after: avoid; - } - - a { - color: #000; - } - - /* displaying URLs - a[href]::after { - content: " (" attr(href) ")"; - } - */ - - a[href^="javascript:"]::after, - a[href^="#"]::after { - content: ""; - } -} diff --git a/less/_09-misc.less b/less/_09-misc.less deleted file mode 100644 index 4aff926..0000000 --- a/less/_09-misc.less +++ /dev/null @@ -1,48 +0,0 @@ -/* ----------------------------- */ -/* ==misc rules */ -/* ----------------------------- */ - -/* styling skip links */ -.@{kna-namespace}skip-links { - position: absolute; - - & a { - position: absolute; - overflow: hidden; - clip: rect(1px, 1px, 1px, 1px); - padding: 0.5em; - background: black; - color: white; - text-decoration: none; - - &:focus { - position: static; - overflow: visible; - clip: auto; - } - } -} - -// hyphens on small screens -@media (max-width: @small-screen) { - /* you shall not pass */ - div, - textarea, - table, - td, - th, - code, - pre, - samp { - word-wrap: break-word; - hyphens: auto; - } -} - -// use .no-wrapping to disallow hyphens on small screens -@media (max-width: @small-screen) { - .no-wrapping { - word-wrap: normal; - hyphens: manual; - } -} diff --git a/less/_10-styling.less b/less/_10-styling.less deleted file mode 100644 index 3dc9f55..0000000 --- a/less/_10-styling.less +++ /dev/null @@ -1,115 +0,0 @@ -/* ----------------------------- */ -/* ==minor stylings */ -/* ----------------------------- */ - -/* styling elements */ -code, -kbd, -mark { - border-radius: 2px; -} - -kbd { - padding: 0 2px; - border: 1px solid #999; -} - -code { - padding: 2px 4px; - background: rgba(0,0,0,0.04); - color: #b11; -} - -pre code { - padding: 0; - background: none; - color: inherit; - border-radius: 0; -} - -mark { - padding:2px 4px; -} - -sup, -sub { - vertical-align: 0; -} - -sup { - bottom: 1ex; -} - -sub { - top: 0.5ex; -} - -blockquote { - position: relative; - padding-left: 3em; -} - -blockquote::before { - content: "\201C"; - position: absolute; - left: 0; - top: 0; - font-family: georgia, serif; - font-size: 5em; - line-height: 0.9; - color: rgba(0, 0, 0, .3); -} - -blockquote > footer { - margin-top: .75em; - font-size: 0.9em; - color: rgba(0, 0, 0, .7); -} - -blockquote > footer::before { - content: "\2014 \0020"; -} - -q { - font-style: normal; -} - -q, -.@{kna-namespace}q { - quotes: "“\00a0" "\00a0”"; -} - -q:lang(fr), -.@{kna-namespace}q:lang(fr) { - quotes: "«\00a0" "\00a0»"; -} - -hr { - display: block; - clear: both; - height: 1px; - margin: 1em 0 2em; - padding: 0; - border: 0; - color: #ccc; - background-color: #ccc; -} - -/* tables */ -table, -.@{kna-namespace}table { - border: 1px solid #ccc; -} - -caption { - padding: @small-value; - color: #555; - font-style: italic; -} - -td, -th { - padding: 0.3em 0.8em; - border: 1px #aaa dotted; - text-align: left; -} diff --git a/less/_11-wordpress.less b/less/_11-wordpress.less deleted file mode 100644 index fc6bc92..0000000 --- a/less/_11-wordpress.less +++ /dev/null @@ -1,302 +0,0 @@ -/* ----------------------------- */ -/* ==WordPress reset */ -/* ----------------------------- */ - -/* -Author: Geoffrey Crofte, Alsacréations -Contributors: Automattic, Geoffrey Crofte -Description: Reset styles for WordPress usage of KNACSS -*/ - -/* ----------------------------- */ -/* ==Menus */ -/* ----------------------------- */ - -// current menu elements -.current_page_item > a { -} -.current-menu-item > a { -} -.current_page_ancestor > a { -} - -// blocks of content navigation -.comment-navigation, -.paging-navigation, -.post-navigation { - margin: 0 0 1.5em; - overflow: hidden; -} - -.comment-navigation .nav-previous, -.paging-navigation .nav-previous, -.post-navigation .nav-previous { - float: left; - width: 50%; -} - -.comment-navigation .nav-next, -.paging-navigation .nav-next, -.post-navigation .nav-next { - float: right; - text-align: right; - width: 50%; -} - -/* ----------------------------- */ -/* ==Alignments */ -/* ----------------------------- */ - -// class in img elements -.alignnone { - margin: .25em 1.5em 1.5em 0; -} - -.aligncenter { - clear: both; - display: block; - margin: 1.5em auto; -} - -.alignleft { - float: left; - margin: 0 1.5em .25em 0; -} - -.alignright { - float: right; - margin: 0 0 .25em 1.5em; -} - -/* ----------------------------- */ -/* ==Clearings */ -/* ----------------------------- */ - -.entry-content, -.comment-content { - clear: both; - - &::after, &::before { - content: ""; - display: table; - } -} - -/* ----------------------------- */ -/* ==Widgets */ -/* ----------------------------- */ - -.widget + .widget { - margin: 1.5em 0 0; -} - -// usage example: -.widget select { - max-width: 100%; -} - -/* ----------------------------- */ -/* ==Posts and pages */ -/* ----------------------------- */ - -/* === 5.1 Posts - post_class === */ - -// featured content -.sticky { -} - -// attachment post -.attachment { -} - -// format of post -.format- { - &aside { - } - &gallery { - } - &link { - } - &image { - } - "e { - } - &status { - } - &video { - } - &chat { - } -} - -// class for a tag -.tag- { - &name-of-tag { - } -} - -// class for categorie -.category- { - &name-of-category { - } -} - -/* === 5.2 Pages - body_class === */ - -// front page -.home { - // if display posts - &.blog { - } - // if static page - &.page { - } -} - -// page displays posts -.blog { - // if is frontpage - &.home { - } - // if static page - &.page { - } -} - -// simple page -.page { -} - -// page of single post -.single { -} - -// page of archives -.archive { -} - -// page of search -.search { - // if has results - .search-results { - } - // if has no results - .search-no-results { - } -} - -// page 404 -.error404 { -} - -// user logged in -.logged-in { -} - -// text direction if right-to-left -// prefer rtl.css: http://codex.wordpress.org/Right-to-Left_Language_Support -.rtl { -} - -/* === 5.3 Posts and Pages - Contents === */ - -.hentry { - margin: 0 0 1.5em; -} - -.page-content, -.entry-content, -.entry-summary { - margin: 1.5em 0 0; -} - -.page-links { - clear: both; - margin: 0 0 1.5em; -} - -/* ----------------------------- */ -/* ==Comments */ -/* ----------------------------- */ - -.comment-content a { - word-wrap: break-word; -} - -.bypostauthor { - // some make-the-logo-bigger styles -} - -/* ----------------------------- */ -/* ==Media */ -/* ----------------------------- */ - -img.wp-smiley { - margin-bottom: 0; - margin-top: 0; - padding: 0; - border: none; -} - -/* ----------------------------- */ -/* ==Captions */ -/* ----------------------------- */ - -.wp-caption { - max-width: 100%; - margin-bottom: 1.5em; -} - -.wp-caption img { - display: block; - margin: 0 auto; -} - -.wp-caption-text { - margin: 1em 0; - text-align: center; -} - -/* ----------------------------- */ -/* ==Galleries */ -/* ----------------------------- */ - -.gallery { - margin-bottom: 1.5em; -} - -.gallery-item { - display: inline-block; - width: 100%; - text-align: center; - vertical-align: top; - - .gallery-columns-2 & { - max-width: 50%; - } - .gallery-columns-3 & { - max-width: 33.33%; - } - .gallery-columns-4 & { - max-width: 25%; - } - .gallery-columns-5 & { - max-width: 20%; - } - .gallery-columns-6 & { - max-width: 16.66%; - } - .gallery-columns-7 & { - max-width: 14.28%; - } - .gallery-columns-8 & { - max-width: 12.5%; - } - .gallery-columns-9 & { - max-width: 11.11%; - } -} - -.gallery-caption { - display: block; -} diff --git a/less/knacss.less b/less/knacss.less deleted file mode 100644 index ef370fc..0000000 --- a/less/knacss.less +++ /dev/null @@ -1,33 +0,0 @@ -// LESS config file -// ----------------- - -// (WARNING : you should comment this line and move config file from vendor/knacss folder to your own folder) -@import "_00-config"; - -// normalize include -@import "_01a-normalize"; // normalize - -// LESS base styles -@import "_01b-base"; // reset and basic styles - -// LESS files : chose the ones you need -@import "_02-layout"; // alignment, modules, positionning -@import "_03-grids"; // grids -@import "_04-tables"; // data tables consistency -@import "_05-forms"; // forms consistency -@import "_06-helpers"; // width and spacers visually classes -@import "_07-responsive"; // Responsive Web Design helpers -@import "_08-print"; // print quick reset -@import "_09-misc"; // skip links, google maps and hyphens -@import "_10-styling"; // minor stylings - -// WordPress base styles -// @import "_11-wordpress"; // WordPress reset and basic styles - -/* ----------------------------- */ -/* ==own stylesheet */ -/* ----------------------------- */ - -/* Here should go your own CSS styles */ -/* You can also link them with a LESS @import */ -/* @import "my-styles.less"; */ diff --git a/package.json b/package.json index 12b70d7..507f4b5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "knacss", - "version": "4.4.5", + "version": "5.0.0", "homepage": "http://www.knacss.com/", "bugs": "https://github.com/alsacreations/KNACSS/issues", "author": [ diff --git a/sass/_03-grids.scss b/sass/_03-grids.scss deleted file mode 100644 index a85e19d..0000000 --- a/sass/_03-grids.scss +++ /dev/null @@ -1,211 +0,0 @@ -/* ---------------------------------- */ -/* ==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: -// -
for an equal fourth columns grid container -// -
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: -$gutter; - - /* inline-block fallback for IE9 generation */ - letter-spacing: -0.31em; -} - -/* grid childs */ -[class*="#{$kna-namespace}grid-"] > * { - box-sizing: border-box; - flex: 0 0 auto; - width: calc(100% * 1 / #{$number} - #{$gutter} - .01px); - min-width: 0; - margin-left: $gutter; - - /* inline-block fallback for IE9 generation */ - display: inline-block; - vertical-align: top; - letter-spacing: normal; -} - -// Sass mixins for *equal* columns grid container -// example : .grid-perso { @include grid(12); } -@mixin grid($number:$number,$newgutter:$gutter) { - @if $newgutter != $gutter { - margin-left: -$newgutter; - } - & > * { - width: calc(100% * 1 / #{$number} - #{$newgutter} - .01px); - @if $newgutter != $gutter { - margin-left: $newgutter; - } - } - & > .#{$kna-namespace}flex-item-double { - width: calc(100% * 2 / #{$number} - #{$newgutter}); - } -} - -// Examples : will be compiled in CSS - -[class*="#{$kna-namespace}grid-2"] { - @include grid(2); -} - -[class*="#{$kna-namespace}grid-3"] { - @include grid(3); -} - -[class*="#{$kna-namespace}grid-4"] { - @include grid(4); -} - -[class*="#{$kna-namespace}grid-5"] { - @include grid(5); -} - -[class*="#{$kna-namespace}grid-6"] { - @include grid(6); -} - -[class*="#{$kna-namespace}grid-7"] { - @include grid(7); -} - -[class*="#{$kna-namespace}grid-8"] { - @include grid(8); -} - -[class*="#{$kna-namespace}grid-10"] { - @include grid(10); -} - -[class*="#{$kna-namespace}grid-12"] { - @include grid(12); -} - -/* Responsive grid */ -// "small-2" = 2 columns when small screen -// example : .grid-4-small-2 will be 4 then 2 columns -@media (max-width: $small-screen) { - [class*="-small-4"] > * { - width: calc(100% * 1 / 4 - #{$gutter} - .01px); - } - [class*="-small-4"] > .flex-item-double { - width: calc(100% * 1 / 2 - #{$gutter} - .01px); - } - [class*="-small-3"] > * { - width: calc(100% * 1 / 3 - #{$gutter} - .01px); - } - [class*="-small-3"] > .flex-item-double { - width: calc(100% * 2 / 3 - #{$gutter} - .01px); - } - [class*="-small-2"] > * { - width: calc(100% * 1 / 2 - #{$gutter} - .01px); - } - [class*="-small-2"] > .flex-item-double { - width: calc(100% - #{$gutter} - .01px); - } - [class*="-small-1"] > * { - width: calc(100% - #{$gutter} - .01px); - } - [class*="-small-1"] > .flex-item-double { - width: calc(100% - #{$gutter} - .01px); - } -} -// "tiny-1" = 1 column when tiny screen -// example : .grid-4-small-2-tiny-1 will be 4 then 2 columns then 1 column -@media (max-width: $tiny-screen) { - [class*="-tiny-2"] > * { - width: calc(100% * 1 / 2 - #{$gutter} - .01px); - } - [class*="-tiny-2"] > .flex-item-double { - width: calc(100% - #{$gutter} - .01px); - } - [class*="-tiny-1"] > * { - width: calc(100% - #{$gutter} - .01px); - } - [class*="-tiny-1"] > .flex-item-double { - width: calc(100% - #{$gutter} - .01px); - } -} - -// Sass mixins for *unequal* columns grid container -// example : .grid-perso { @include uneven-grid(2, 1); } -@mixin uneven-grid($left:$left, $right:$right, $newgutter:$gutter) { - @if $newgutter != $gutter { - margin-left: -$newgutter; - } - > * { - @if $newgutter != $gutter { - margin-left: $newgutter; - } - &:nth-child(odd) { - $size: ($left / ($left + $right)) * 100%; - width: calc(#{$size} - #{$newgutter}); - } - &:nth-child(even) { - $size: ($right / ($left + $right)) * 100%; - width: calc(#{$size} - #{$newgutter}); - } - } - @media (max-width: $small-screen) { - & > *:nth-child(n) { - width: calc(100% - #{$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; -} diff --git a/sass/_00-config.scss b/sass/_config-variables.scss similarity index 61% rename from sass/_00-config.scss rename to sass/_config-variables.scss index d4e244f..24a9767 100644 --- a/sass/_00-config.scss +++ b/sass/_config-variables.scss @@ -1,8 +1,3 @@ -/*! -* www.KNACSS.com V4.4.5 (1er avril 2016) @author: Raphael Goetter, Alsacreations -* Licence WTFPL http://www.wtfpl.net/ -*/ - // Config file and project variables // font sizes @@ -22,8 +17,8 @@ $font-stack-monospace : consolas, courier, monospace !default; // monospace font // font colors $base-color : #000 !default; // text color on body and content -$primary-color : #000 !default; // text color on primary elements -$secondary-color : #000 !default; // text color on secondary elements +$alpha-color : #000 !default; // text color on primary elements +$beta-color : #000 !default; // text color on secondary elements $headings-color : #000 !default; // text color on headings $headings-1-color : #000 !default; // text color on headings level 1 $headings-2-color : #000 !default; // text color on headings level 2 @@ -32,9 +27,9 @@ $base-color-link : #333 !default; // base links color $base-color-link-hover : #000 !default; // base hovered/focused links color // backgrounds -$base-background : #fff !default; // body background color -$primary-background : #fff !default; // primary elements background color -$secondary-background : #fff !default; // secondary elements background color +$base-background : #fff !default; // body background color +$alpha-background : #fff !default; // primary elements background color +$beta-background : #fff !default; // secondary elements background color // spacings (choose unit you prefer) $tiny-value : .5rem !default; // tiny value for margins / paddings @@ -50,23 +45,26 @@ $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-plus-value : 20rem !default; // ultra large value for margins / paddings -// breakpoints (choose unit you prefer) -$tiny-screen : 320px !default; // tiny screens media query (less-equal than 320px) -$tiny-plus-screen : 480px !default; // screens between 321px and 480px -$small-screen : 640px !default; // screens between 481px and 640px -$small-plus-screen : 768px !default; // screens between 641px and 768px -$medium-screen : 960px !default; // screens between 769px and 960px -$medium-plus-screen : 1024px !default; // screens between 961px and 1024px -$large-screen : 1280px !default; // screens between 1025px and 1280px -$large-plus-screen : 1440px !default; // screens between 1281px and 1440px -$extra-large-screen : 1600px !default; // screens between 1441px and 1600px -$ultra-large-screen : 1920px !default; // ultra large screens +// 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) -$gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem -$number: 4 !default; // number of equal columns -$left: 2 !default; // left side of uneven columns -$right: 1 !default; // right side of uneven columns +$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: null !default; diff --git a/sass/_include-media/_include-media.scss b/sass/_include-media/_include-media.scss new file mode 100644 index 0000000..ddc099b --- /dev/null +++ b/sass/_include-media/_include-media.scss @@ -0,0 +1,568 @@ +@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', ' 0) { + @media #{unquote(parse-expression(nth($conditions, 1)))} { + // Recursive call + @include media(slice($conditions, 2)...) { + @content; + } + } + } +} diff --git a/sass/_02-layout.scss b/sass/_layout-general.scss similarity index 86% rename from sass/_02-layout.scss rename to sass/_layout-general.scss index f9bf015..9d398bb 100644 --- a/sass/_02-layout.scss +++ b/sass/_layout-general.scss @@ -1,5 +1,5 @@ /* ----------------------------- */ -/* ==layout and modules */ +/* ==Global Layout */ /* ----------------------------- */ /* module, gains superpower "BFC" Block Formating Context */ @@ -121,18 +121,22 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html min-width: 0; } -.#{$kna-namespace}flex-item-first { +.#{$kna-namespace}flex-item-first, +.#{$kna-namespace}grid-item-first { order : -1; } -.#{$kna-namespace}flex-item-medium { +.#{$kna-namespace}flex-item-medium, +.#{$kna-namespace}grid-item-medium { order : 0; } -.#{$kna-namespace}flex-item-last { +.#{$kna-namespace}flex-item-last, +.#{$kna-namespace}grid-item-last { order : 1; } -.#{$kna-namespace}flex-item-center { +.#{$kna-namespace}flex-item-center, +.#{$kna-namespace}grid-item-center { margin: auto; } diff --git a/sass/_layout-grids.scss b/sass/_layout-grids.scss new file mode 100644 index 0000000..8f68357 --- /dev/null +++ b/sass/_layout-grids.scss @@ -0,0 +1,165 @@ +/* ---------------------------------- */ +/* ==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: +// -
for an equal fourth columns grid container +// -
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; +} diff --git a/sass/_01b-base.scss b/sass/_library-base.scss similarity index 91% rename from sass/_01b-base.scss rename to sass/_library-base.scss index 1477298..62a19fa 100644 --- a/sass/_01b-base.scss +++ b/sass/_library-base.scss @@ -1,5 +1,5 @@ /* ----------------------------- */ -/* == soft reset */ +/* ==Base (basic styles) */ /* ----------------------------- */ /* switching to border-box model for all elements */ @@ -31,15 +31,9 @@ figure { margin-right: 0; } -/* ----------------------------- */ -/* == typography */ -/* ----------------------------- */ - html { - /* set base font-size to equiv "10px", which is adapted to rem unit */ font-size: 62.5%; - /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */ /* thanks to @guardian, @victorbritopro and @eQRoeil */ font-size: calc(1em * 0.625); @@ -47,7 +41,6 @@ html { body { font-size: $base-font-size; - background-color: $base-background; color: $base-color; font-family: $font-stack-common; @@ -148,10 +141,6 @@ var { font-style: italic; } -/* ----------------------------- */ -/* == browsers consistency */ -/* ----------------------------- */ - /* avoid top margins on first content element */ p, .#{$kna-namespace}p-like, diff --git a/sass/_09-misc.scss b/sass/_library-misc.scss similarity index 83% rename from sass/_09-misc.scss rename to sass/_library-misc.scss index 4659373..676082a 100644 --- a/sass/_09-misc.scss +++ b/sass/_library-misc.scss @@ -1,5 +1,5 @@ /* ----------------------------- */ -/* ==misc rules */ +/* ==Misc (skip links, hyphens) */ /* ----------------------------- */ /* styling skip links */ @@ -23,8 +23,8 @@ } } -// hyphens on small screens -@media (max-width: $small-screen) { +// hyphens on tiny screens +@include media('<=tiny-screen') { /* you shall not pass */ div, textarea, @@ -40,7 +40,7 @@ } // use .no-wrapping to disallow hyphens on small screens -@media (max-width: $small-screen) { +@include media('<=tiny-screen') { .no-wrapping { word-wrap: normal; hyphens: manual; diff --git a/sass/_08-print.scss b/sass/_library-print.scss similarity index 92% rename from sass/_08-print.scss rename to sass/_library-print.scss index 21bec89..bf468cf 100644 --- a/sass/_08-print.scss +++ b/sass/_library-print.scss @@ -1,4 +1,7 @@ -/* quick print reset */ +/* ----------------------------- */ +/* ==Print (quick print reset) */ +/* ----------------------------- */ + @media print { * { background: transparent !important; diff --git a/sass/_10-styling.scss b/sass/_library-styling.scss similarity index 97% rename from sass/_10-styling.scss rename to sass/_library-styling.scss index 52067e0..99692a5 100644 --- a/sass/_10-styling.scss +++ b/sass/_library-styling.scss @@ -1,5 +1,5 @@ /* ----------------------------- */ -/* ==minor stylings */ +/* ==Stylings (minor stylings) */ /* ----------------------------- */ /* styling elements */ diff --git a/sass/_11-wordpress.scss b/sass/_library-wordpress.scss similarity index 76% rename from sass/_11-wordpress.scss rename to sass/_library-wordpress.scss index 1e9733e..15d57aa 100644 --- a/sass/_11-wordpress.scss +++ b/sass/_library-wordpress.scss @@ -8,10 +8,6 @@ Contributors: Automattic, Geoffrey Crofte Description: Reset styles for WordPress usage of KNACSS */ -/* ----------------------------- */ -/* ==Menus */ -/* ----------------------------- */ - // current menu elements .current_page_item > a { } @@ -43,10 +39,6 @@ Description: Reset styles for WordPress usage of KNACSS width: 50%; } -/* ----------------------------- */ -/* ==Alignments */ -/* ----------------------------- */ - // class in img elements .alignnone { margin: .25em 1.5em 1.5em 0; @@ -68,10 +60,6 @@ Description: Reset styles for WordPress usage of KNACSS margin: 0 0 .25em 1.5em; } -/* ----------------------------- */ -/* ==Clearings */ -/* ----------------------------- */ - .entry-content, .comment-content { clear: both; @@ -82,10 +70,6 @@ Description: Reset styles for WordPress usage of KNACSS } } -/* ----------------------------- */ -/* ==Widgets */ -/* ----------------------------- */ - .widget + .widget { margin: 1.5em 0 0; } @@ -95,10 +79,6 @@ Description: Reset styles for WordPress usage of KNACSS max-width: 100%; } -/* ----------------------------- */ -/* ==Posts and pages */ -/* ----------------------------- */ - /* === 5.1 Posts - post_class === */ // featured content @@ -215,10 +195,6 @@ Description: Reset styles for WordPress usage of KNACSS margin: 0 0 1.5em; } -/* ----------------------------- */ -/* ==Comments */ -/* ----------------------------- */ - .comment-content a { word-wrap: break-word; } @@ -227,10 +203,6 @@ Description: Reset styles for WordPress usage of KNACSS // some make-the-logo-bigger styles } -/* ----------------------------- */ -/* ==Media */ -/* ----------------------------- */ - img.wp-smiley { margin-bottom: 0; margin-top: 0; @@ -238,10 +210,6 @@ img.wp-smiley { border: none; } -/* ----------------------------- */ -/* ==Captions */ -/* ----------------------------- */ - .wp-caption { max-width: 100%; margin-bottom: 1.5em; @@ -257,10 +225,6 @@ img.wp-smiley { text-align: center; } -/* ----------------------------- */ -/* ==Galleries */ -/* ----------------------------- */ - .gallery { margin-bottom: 1.5em; } diff --git a/sass/_01a-normalize.scss b/sass/_normalize/_normalize.scss similarity index 79% rename from sass/_01a-normalize.scss rename to sass/_normalize/_normalize.scss index b0d3f97..18ddf7f 100644 --- a/sass/_01a-normalize.scss +++ b/sass/_normalize/_normalize.scss @@ -1,4 +1,4 @@ -/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ +/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). @@ -85,11 +85,13 @@ template, /* 1 */ ========================================================================== */ /** - * Remove the gray background on active links in IE 10. + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. */ a { - background-color: transparent; + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ } /** @@ -248,14 +250,16 @@ hr { ========================================================================== */ /** - * Change font properties to `inherit` in all browsers (opinionated). + * 1. Change font properties to `inherit` in all browsers (opinionated). + * 2. Remove the margin in Firefox and Safari. */ button, input, select, textarea { - font: inherit; + font: inherit; /* 1 */ + margin: 0; /* 2 */ } /** @@ -269,30 +273,16 @@ optgroup { /** * Show the overflow in IE. * 1. Show the overflow in Edge. - * 2. Show the overflow in Edge, Firefox, and IE. */ button, -input, /* 1 */ -select { /* 2 */ +input { /* 1 */ overflow: visible; } /** - * Remove the margin in Safari. - * 1. Remove the margin in Firefox and Safari. - */ - -button, -input, -select, -textarea { /* 1 */ - margin: 0; -} - -/** - * Remove the inheritence of text transform in Edge, Firefox, and IE. - * 1. Remove the inheritence of text transform in Firefox. + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. */ button, @@ -300,29 +290,10 @@ select { /* 1 */ text-transform: none; } -/** - * Change the cursor in all browsers (opinionated). - */ - -button, -[type="button"], -[type="reset"], -[type="submit"] { - cursor: pointer; -} - -/** - * Restore the default cursor to disabled elements unset by the previous rule. - */ - -[disabled] { - cursor: default; -} - /** * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` * controls in Android 4. - * 2. Correct the inability to style clickable types in iOS. + * 2. Correct the inability to style clickable types in iOS and Safari. */ button, @@ -337,8 +308,10 @@ html [type="button"], /* 1 */ */ button::-moz-focus-inner, -input::-moz-focus-inner { - border: 0; +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; padding: 0; } @@ -347,7 +320,9 @@ input::-moz-focus-inner { */ button:-moz-focusring, -input:-moz-focusring { +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } @@ -406,19 +381,39 @@ textarea { } /** - * Correct the odd appearance of search inputs in Chrome and Safari. + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. */ [type="search"] { - -webkit-appearance: textfield; + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ } /** - * Remove the inner padding and cancel buttons in Chrome on OS X and - * Safari on OS X. + * Remove the inner padding and cancel buttons in Chrome and Safari on OS X. */ [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } + +/** + * Correct the text style of placeholders in Chrome, Edge, and Safari. + */ + +::-webkit-input-placeholder { + color: inherit; + opacity: 0.54; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} diff --git a/sass/_05-forms.scss b/sass/_object-forms.scss similarity index 98% rename from sass/_05-forms.scss rename to sass/_object-forms.scss index 0fd20f0..82b5cb8 100644 --- a/sass/_05-forms.scss +++ b/sass/_object-forms.scss @@ -1,5 +1,5 @@ /* ----------------------------- */ -/* ==forms */ +/* ==Forms */ /* ----------------------------- */ /* thanks to HTML5boilerplate, diff --git a/sass/_04-tables.scss b/sass/_object-tables.scss similarity index 84% rename from sass/_04-tables.scss rename to sass/_object-tables.scss index 4032f5a..0907b60 100644 --- a/sass/_04-tables.scss +++ b/sass/_object-tables.scss @@ -1,5 +1,5 @@ /* ----------------------------- */ -/* ==tables */ +/* ==Tables */ /* ----------------------------- */ table, @@ -16,7 +16,7 @@ table, } #recaptcha_table, -table.#{$kna-namespace}table-auto { +.#{$kna-namespace}table-auto { table-layout:auto; } diff --git a/sass/_06-helpers.scss b/sass/_override-helpers.scss similarity index 93% rename from sass/_06-helpers.scss rename to sass/_override-helpers.scss index eedbf16..462754b 100644 --- a/sass/_06-helpers.scss +++ b/sass/_override-helpers.scss @@ -1,7 +1,10 @@ /* ---------------------------------- */ -/* ==state helpers */ +/* ==Helpers */ /* ---------------------------------- */ +/* State Helpers */ +/* ------------- */ + /* invisible for all */ .is-hidden, [hidden] { @@ -33,10 +36,8 @@ ul.unstyled { padding-left: 0; } -/* ---------------------------------- */ -/* ==visual helpers */ -/* .. use them with parcimony ! */ -/* ---------------------------------- */ +/* Width Helpers */ +/* ------------- */ /* blocks widths (percentage and pixels) */ .#{$kna-namespace}w10 { @@ -155,11 +156,9 @@ ul.unstyled { width: auto; } -/* spacing helpers -p,m = padding,margin -a,t,r,b,l = all,top,right,bottom,left -s,m,l,n = small, medium, large, none -*/ +/* Spacing Helpers */ +/* --------------- */ + .#{$kna-namespace}man, .#{$kna-namespace}ma0 { margin: 0; diff --git a/sass/_07-responsive.scss b/sass/_override-responsive.scss similarity index 85% rename from sass/_07-responsive.scss rename to sass/_override-responsive.scss index 7f2077c..2458fd8 100644 --- a/sass/_07-responsive.scss +++ b/sass/_override-responsive.scss @@ -1,20 +1,11 @@ -/* ----------------------------- */ -/* ==desktop and HD devices */ -/* ----------------------------- */ +/* -------------------------- */ +/* ==Responsive helpers */ +/* -------------------------- */ -@media (min-width: ($medium-screen + 1)) { -/* rules for big resources and big screens like: background-images, font-faces, etc. */ -} +/* large screens */ +/* ------------- */ -@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { -/* style adjustments for high density devices */ -} - -/* ---------------------------------- */ -/* ==Responsive large */ -/* ---------------------------------- */ - -@media (min-width: ($medium-screen + 1)) { +@include media('>=large-screen') { /* layouts for large screens */ .#{$kna-namespace}large-hidden { @@ -83,11 +74,10 @@ } } -/* ---------------------------------- */ -/* ==Responsive medium */ -/* ---------------------------------- */ +/* medium screens */ +/* -------------- */ -@media (min-width: ($small-screen + 1)) and (max-width: $medium-screen) { +@include media('>=medium-screen', '=small-screen', '