passage à la v4.x.x
This commit is contained in:
CreativeJuiz
parent
65982212d4
commit
35298b42f7
62 changed files with 6786 additions and 1162 deletions
10
.editorconfig
Normal file
10
.editorconfig
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
# editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = tab
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
4
.gitignore
vendored
4
.gitignore
vendored
|
|
@ -162,3 +162,7 @@ pip-log.txt
|
|||
# Mac crap
|
||||
.DS_Store
|
||||
/README 1.md
|
||||
*.cfg
|
||||
|
||||
# parce qu'on s'en fout
|
||||
*.log
|
||||
78
README.md
78
README.md
|
|
@ -1,37 +1,69 @@
|
|||
KNACSS
|
||||
======
|
||||
# KNACSS
|
||||
|
||||
http://www.knacss.com
|
||||
|
||||
KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects.
|
||||
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).
|
||||
|
||||
Designed by [Alsacreations agency](http://alsacreations.fr) and used on a daily basis in production, KNACSS is not only a lightweight documented framework but also a CSS reset, adapted to every project no matter its size.
|
||||
<hr>
|
||||
|
||||
It handles basic elements, box sizing, margins, floats, simple and complex aligns, positioning, layout grids, gutters, old IE fallbacks and last but not least responsiveness, everything automagically!
|
||||
**KNACSS 4 est sorti, voir toutes les modifications dans le [Changelog](https://github.com/raphaelgoetter/KNACSS/blob/master/changelog.md)**
|
||||
|
||||
Installation
|
||||
-----------
|
||||
There is nothing to install. It is only a CSS file you can call as usual in the head of your document with a link element:
|
||||
<hr>
|
||||
|
||||
<link rel="stylesheet" href="knacss.css" media="all">
|
||||
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 !
|
||||
|
||||
You can also install KNACSS with [Bower](http://bower.io/) : ```bower install knacss```
|
||||
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.
|
||||
|
||||
… Or you can also choose the KNACSS Builder : http://knacss.com/builder/
|
||||
## Installation
|
||||
|
||||
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._
|
||||
|
||||
À 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.
|
||||
|
||||
## Usage
|
||||
|
||||
KNACSS n'est constitué que d'un seul fichier CSS (minifié ou non selon vos goûts), qu'il vous suffit d'ajouter à votre page HTML :
|
||||
|
||||
<link rel="stylesheet" href="knacss.css">
|
||||
|
||||
Il est également possible de l'installer (toutes versions) via [Bower](http://bower.io/) : ```bower install knacss```
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
Usage
|
||||
-----
|
||||
KNACSS is a collection of ready to use styles and snippets to kick-start your project. Feel free to use it as a “reset”, then make it grow to suit your needs.
|
||||
Take the time to read the documentation before jumping in. Indeed, KNACSS doesn’t always suit beginners’ needs since a little thing can have big consequences.
|
||||
## Préprocesseurs
|
||||
|
||||
## Vendor Prefixes
|
||||
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).
|
||||
|
||||
If you use one of the pre-processed version of KNACSS (LESS / Sass), beware that all the properties are declared **without vendor prefixes** (-webkit-,-moz-,-ms-,…), to gain clarity, and length of initial code.
|
||||
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é.
|
||||
Libre à vous de le modifier selon les contraintes de votre projet.
|
||||
|
||||
You will certainly need to add these vendor prefixes yourself (this is usually done automatically today with Autoprefixer, [Mixture](http://mixture.io), [Prepros](http://alphapixels.com/prepros/), [Grunt](http://gruntjs.com), etc.).
|
||||
**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`.
|
||||
|
||||
Useful links
|
||||
------------
|
||||
* Website and download : http://knacss.com
|
||||
* Documentation : http://knacss.com/doc.html
|
||||
* Commented code : http://knacss.com/knacss.html
|
||||
### 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").
|
||||
|
||||
**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/).
|
||||
|
||||
## 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/)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "KNACSS",
|
||||
"version": "3.1.0",
|
||||
"version": "4.1.1",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"authors": [
|
||||
"Raphaël GOETTER, Alsacreations"
|
||||
|
|
|
|||
35
changelog.md
Normal file
35
changelog.md
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
# changelog v4.1.1 (30 mars 2015)
|
||||
|
||||
## Vite fait
|
||||
|
||||
* grosse remise à jour, orientée vers les technos modernes (flexbox, rem, calc, ...) et moins de "bidouille"
|
||||
* fin du support d'IE6-IE8 Si vous souhaitez utiliser KNACSS sur d'anciens navigateurs, préférez la [Version 3](https://github.com/raphaelgoetter/KNACSS/tree/3.1.0)
|
||||
* ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
|
||||
* un grand merci à @7studio pour ses conseils et observations sur la version beta de KNACSS 4.0
|
||||
* attention : rétrocompatibilité non préservée pour certaines classes ( .left, .start, .txtleft, .fl, .table-, .flex-start, .flex-end)
|
||||
* attention : rétrocompatibilité non préservée pour les grilles de mise en page (passage à flexbox et simplification de la structure)
|
||||
|
||||
## done
|
||||
|
||||
* documentation en français
|
||||
* gros ménage de printemps (gros nettoyage de tous les espaces et tabulations disgrâcieux)
|
||||
* dans la section "quick print reset", ajout des classes .p-like, h1-like, h2-like etc.
|
||||
* mise en commun globale de tous les styles p avec .p-like (h1 et h1-like, etc.).
|
||||
* déplacement et commentaire sur la règle body > script
|
||||
* correction du bug des height: auto sur les images au format SVG
|
||||
* meilleure intégration de box-sizing
|
||||
* suppression du fichier dédié aux réglages des bugs des anciennes versions d'IE6-IE8
|
||||
* fin du support d'IE9 pour les grilles : KNACSS v4 compatible IE10+ pour ce qui concerne les mises en page en grilles (flexbox FTW!)
|
||||
* réorganisation des fichiers (le fichier dédié "IE.css" disparait, le fichier "booleans" devient "misc" (plus cohérent), le fichier "gmaps" est désormais inclus dans "misc")
|
||||
* ajout des préfixes ".table-" devant les styles de décoration des tableaux
|
||||
* suppression du fichier icons.css, statistiquement inutile en pratique
|
||||
* meilleure cohérence de nommage entre .left, .start, .txtleft, .fl
|
||||
* ajout d'un fichier de reset dédié à WordPress
|
||||
* refonte intégrale des grilles en Flexbox (et en plus ça marche sur IE10 !)
|
||||
* ajout d'un fichier .editorconfig (http://editorconfig.org/)
|
||||
* passage des :before/:after en ::before/::after
|
||||
* ajout de sourcemaps CSS
|
||||
* suppression des images noir et blanc forcées en media print
|
||||
* correction de la formule LESS `{calc(1em * .625);`
|
||||
* ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
|
||||
* mise à jour du générateur de gabarits [Schnaps.it](http://schnaps.it/)
|
||||
File diff suppressed because it is too large
Load diff
1
css/knacss-unminified.css.map
Normal file
1
css/knacss-unminified.css.map
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
css/knacss.css.map
Normal file
1
css/knacss.css.map
Normal file
File diff suppressed because one or more lines are too long
70
doc/00-commencer.md
Normal file
70
doc/00-commencer.md
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
# KNACSS
|
||||
|
||||
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.
|
||||
|
||||
## Installation
|
||||
|
||||
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._
|
||||
|
||||
À 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.
|
||||
|
||||
## Usage
|
||||
|
||||
KNACSS n'est constitué que d'un seul fichier CSS (minifié ou non selon vos goûts), qu'il vous suffit d'ajouter à votre page HTML :
|
||||
|
||||
<link rel="stylesheet" href="knacss.css">
|
||||
|
||||
Il est également possible de l'installer (toutes versions) via [Bower](http://bower.io/) : ```bower install knacss```
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
## 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).
|
||||
|
||||
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é.
|
||||
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`.
|
||||
|
||||
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.).
|
||||
|
||||
En cours de développement, il vous suffit de compiler ce fichier `less/knacss.less` (ou `less/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** (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/).
|
||||
|
||||
## 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)
|
||||
34
doc/01-typo-et-reset.md
Normal file
34
doc/01-typo-et-reset.md
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
# Typographie
|
||||
|
||||
Accessible avant tout, KNACSS propose une gamme de tailles de polices d'unités fluides (`em`, `rem`) plutôt que le pixel, figé et non malléable, donc moins accessible.
|
||||
|
||||
En résumé, voilà les bases typographiques de KNACSS :
|
||||
|
||||
- choix d'unités fluides (`em`, `rem`)
|
||||
- taille de police définie à 62.5% sur HTML (soit un équivalent de 10px, très pratique pour les conversions en rem)
|
||||
- taille de base des contenus de 1.4em (soit un équivalent de 14px) modifiable dans la configuration LESS / Sass
|
||||
- tailles de polices définies pour les niveaux de titres et des modificateurs tels que `.small`, `.smaller`, `.big`, `.bigger`, etc.
|
||||
|
||||
## 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.
|
||||
|
||||
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.
|
||||
|
||||
S'en suivent quelques mises à zéro de marges, alignements par défaut des images, et quelques spécificités sur des élements tels que `blockquote`, `figure`, `canvas`, `video` ou autres `svg`.
|
||||
|
||||
## Masquage
|
||||
|
||||
À noter que KNACSS prévoit une classe dédiée aux éléments devant être masqués sur écrans graphiques tout en demeurant accessibles aux assistances techniques. Il s'agit de la classe `.visually-hidden`, où le choix des hideux mots-clés `!important` se justifie :
|
||||
|
||||
```css
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
}
|
||||
```
|
||||
64
doc/02a-layout-alignements.md
Normal file
64
doc/02a-layout-alignements.md
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
# Alignements
|
||||
|
||||
Différentes classes utilitaires intégrées à KNACSS sont prévues pour gérer les alignements d'éléments.
|
||||
|
||||
- les textes et contenus "inline" sont gérés via les classes `.txtleft`, `.txtright` et `.txtcenter` qui agiront sur la propriété CSS `text-align`
|
||||
- les blocs sont alignés avec les classes `.left`, `.right` et `.center` qui affectent la valeur `auto` à la propriété `margin`
|
||||
- les flottements sont gérés via les classes `.fl` (pour `float: left`) et `.fr` (pour `float: right`)
|
||||
|
||||
## Cas des flottants et les .mod
|
||||
|
||||
Le positionnement flottant compte parmi les plus employés mais n'est pas exempt d'inconvénients. Le principal étant d'être un positionnement hors du flux qui nécessitera des ajustements (clearfix et autres anti-débordements).
|
||||
|
||||
KNACSS a prévu des classes spécifiques pour mieux vous en sortir avec les flottants :
|
||||
|
||||
- **le super élément `.mod`**. Il a plein d'avantages: il contient les flottants (ils ne débordent pas) et il ne s'écoule pas autour d'un frère flottant (il s'affiche proprement à côté) et il crée un [contexte "BFC"](http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html)
|
||||
- `.clearfix`. Les éléments disposant de cette classe contiennent les flottants, tel les `.mod`
|
||||
- les éléments `.clear`, `.line` et `.row` bénéficient d'un autre pouvoir : celui de toujours se pousser sous un flottant précédent. Il sont dédiés aux empilements verticaux des contenus.
|
||||
|
||||
## Concrètement : je veux faire quoi ?
|
||||
|
||||
### Centrer horizontalement
|
||||
|
||||
#### Du texte ou une image
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="txtcenter">
|
||||
<img src="licorne.png" alt="aïe ça pique">
|
||||
</div>
|
||||
```
|
||||
|
||||
#### Un bloc
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<section>
|
||||
<div class="center w50">centré horizontalement</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
### Centrer verticalement
|
||||
|
||||
|
||||
|
||||
Version table-cell (HTML) :
|
||||
```html
|
||||
<section class="col">
|
||||
<div class="w50 center">centré horizontalement et verticalement</div>
|
||||
</section>
|
||||
```
|
||||
|
||||
Version table-cell (CSS) :
|
||||
```css
|
||||
section {
|
||||
vertical-align: middle;
|
||||
}
|
||||
```
|
||||
|
||||
Version flexbox (HTML):
|
||||
```html
|
||||
<section class="flexbox-v">
|
||||
<div class="center w50">centré horizontalement et verticalement</div>
|
||||
</section>
|
||||
```
|
||||
172
doc/02b-layout-positionnement.md
Normal file
172
doc/02b-layout-positionnement.md
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
# Positionnements avec KNACSS
|
||||
|
||||
Au-delà des alignements d'éléments, KNACSS permet de positionner et d'architecturer vos gabarits à travers plusieurs solutions.
|
||||
|
||||
Dans cette page de documentation, nous étudierons en détail chaque cas concret auquel vous risquez d'être confronté et proposerons une réponse adaptée.
|
||||
|
||||
## Différents choix offerts
|
||||
|
||||
Les types de positionnements inclus nativement dans KNACSS sont les suivants :
|
||||
|
||||
- positionnement flottant
|
||||
- positionnement avec `display: inline-block`
|
||||
- positionnement avec `display: table-cell`
|
||||
- positionnement avec Flexbox
|
||||
|
||||
Il n'y a pas de mystère : chaque type de positionnement est capable de répondre à différents types de contraintes. Il n'y a pas de meilleur choix qu'un autre.
|
||||
|
||||
Votre décision pourra être guidée par les indices suivants :
|
||||
- il est généralement plus profitable de ne pas opter pour des positionnement hors-flux (`float`, `position: absolute`)
|
||||
- Flexbox est certainement le modèle le plus polyvalent et propre, mais n'est compatible qu'à partir de IE10+.
|
||||
|
||||
## Concrètement : je veux faire quoi ?
|
||||
|
||||
### Deux blocs voisins de largeur fixe
|
||||
|
||||
|
||||
|
||||
Les choix offerts avec KNACSS :
|
||||
|
||||
#### flottant et flottant
|
||||
|
||||
La classe `.fl` pour `float: left` permet à un élément d'être flottant à gauche.
|
||||
|
||||
Il vous suffit de faire flotter vos deux éléments et de leur attribuer la largeur souhaitée pour qu'ils s'affichent l'un à côté de l'autre :
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="fl w400p">premier</div>
|
||||
<div class="fl w400p">deuxième</div>
|
||||
```
|
||||
|
||||
- **Avantage :** simple, rapide, intuitif, hyper compatible
|
||||
- **Inconvénient :** positionnement hors du flux, nécessitera des ajustements (clearfix et autres anti-débordements)
|
||||
|
||||
#### inline-block et inline-block
|
||||
|
||||
La propriété `display: inline-block` (sous forme de classe `.inbl` chez KNACSS) permet à un élément de s'afficher tel un "inline" tout en étant dimensionné.
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="inbl w400p">premier</div>
|
||||
<div class="inbl w400p">deuxième</div>
|
||||
```
|
||||
|
||||
- **Avantage :** positionnement dans le flux, compatible dès IE8
|
||||
- **Inconvénient :** un espace "whitespace" apparaîtra entre les deux div et nécessitera de coller les balises ou de bidouiller en CSS pour être supprimé
|
||||
|
||||
#### table-cell et table-cell
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col w400p">premier</div>
|
||||
<div class="col w400p">deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
- **Avantage :** positionnement dans le flux, compatible dès IE8
|
||||
- **Inconvénient :** Le positionnement tabulaire observe [des règles parfois complexes](http://www.alsacreations.com/tuto/lire/1522-le-modele-tabulaire-en-css.html) et surprenantes pour les non habitués.
|
||||
|
||||
#### flexbox
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="flexbox">
|
||||
<div class="w400p">premier</div>
|
||||
<div class="w400p">deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
- **Avantage :** fluide, propre, simple
|
||||
- **Inconvénient :** compatibilité IE10 minimum
|
||||
|
||||
### Deux blocs voisins dont un fixe et un fluide
|
||||
|
||||
|
||||
|
||||
Les choix offerts avec KNACSS :
|
||||
|
||||
#### flottant et .mod
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="fl w400p">premier</div>
|
||||
<div class="mod">deuxième</div>
|
||||
```
|
||||
|
||||
#### inline-block et inline-block
|
||||
|
||||
Pas possible [Résolu]
|
||||
|
||||
#### table-cell et table-cell
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col w400p">premier</div>
|
||||
<div class="col">deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flexbox
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="flexbox">
|
||||
<div class="w400p">premier</div>
|
||||
<div class="flexitem-fluid">deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Deux blocs voisins de même hauteur
|
||||
|
||||
|
||||
|
||||
Les choix offerts avec KNACSS :
|
||||
|
||||
#### flottant et flottant
|
||||
|
||||
Pas possible [Résolu]
|
||||
|
||||
#### inline-block et inline-block
|
||||
|
||||
Pas possible [Résolu]
|
||||
|
||||
#### table-cell et table-cell
|
||||
|
||||
Par défaut, les éléments constituant des "cellules de tableau", donc `table-cell` ont automatiquement la même hauteur entre frères. Il n'y a donc rien à faire si l'on opte pour ce positionnement : ça marche tout seul.
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="row">
|
||||
<div class="col">premier</div>
|
||||
<div class="col">deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
#### flexbox
|
||||
|
||||
Là aussi c'est automatique : les enfants d'un conteneur `flexbox` ont tous par défaut la même hauteur.
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="flexbox">
|
||||
<div>premier</div>
|
||||
<div>deuxième</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Plusieurs blocs voisins de même taille
|
||||
|
||||
|
||||
|
||||
Si vous souhaitez réaliser des constructions de plusieurs éléments de même taille (fixe ou fluide) avec ou sans espace entre les éléments (gouttière), je vous invite à prendre connaissance des possibilités de **grilles** offertes par KNACSS.
|
||||
|
||||
Voir **[la Doc au point 03-grilles](https://github.com/raphaelgoetter/KNACSS/blob/master/doc/03-grilles.md)**.
|
||||
|
||||
### Schnaps.it, générateur de templates KNACSS
|
||||
|
||||
Alsacréations tient à jour un générateur de gabarits HTML/CSS basé sur le framework KNACSS, **[Schnaps.it](http://schnaps.it/)**, n'hésitez pas à en user et en abuser !
|
||||
|
||||
|
||||
222
doc/03-grilles.md
Normal file
222
doc/03-grilles.md
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
# Grilles de mise en page
|
||||
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 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.
|
||||
La bonne nouvelle est que Flexbox est plutôt bien reconnu par l'ensemble des navigateurs de la planète; la mauvaise est que certains anciens navigateurs (Android par exemple) ne reconnaissent que certaines versions précédentes des spécifications. Il est donc encore nécessaire d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, ...) pour être certain que vos grilles fonctionneront partout.
|
||||
|
||||
Au sein de la version CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier**.
|
||||
|
||||
**Par contre, dans 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/).
|
||||
|
||||
## Exemple concret
|
||||
|
||||
Pour vous faire une idée, et jouer avec les valeurs possibles, vous trouverez [un exemple "bac à sable"](http://codepen.io/raphaelgoetter/pen/BybOag?editors=110) sur CodePen.
|
||||
|
||||
**Exemple de grille de colonnes égales :**
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="grid-4"> <!-- parent div (ou autre) de 4 colonnes -->
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div>un 2è div ou n'importe quoi d'autre</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Résultat :
|
||||
|
||||
|
||||
**Exemple de grille de colonnes inégales (3/4 - 1/4) :**
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="grid-3-1"> <!-- parent div (ou autre) de 3-1 colonnes -->
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div>un 2è div ou n'importe quoi d'autre</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Résultat :
|
||||
|
||||
|
||||
## Mise en oeuvre
|
||||
|
||||
Il est très simple de construire une grille, il vous suffit :
|
||||
|
||||
- D'un **conteneur**
|
||||
- D'autant **d'enfants** que vous souhaitez
|
||||
|
||||
Le **conteneur** sera l'élément HTML que vous voulez (`div`, `section`, `ul`, ...). Il vous suffit simplement de le munir d'une classe selon votre choix de grille :
|
||||
|
||||
- `.grid-2`, `.grid-3`, `.grid-4`, ... `.grid-12` pour les grilles de largeur égale
|
||||
- `.grid-2-1`, `.grid-1-2`, `.grid-3-1`, `.grid-1-3`, `.grid-3-2`, `.grid-2-3`, `.grid-4-1`, `.grid-1-4` pour les grilles de largeurs inégales (`.grid-2-1` vaut pour "2/3 - 1/3" par exemple).
|
||||
|
||||
Par défaut, chaque colonne est séparée de sa voisine par une gouttière dont la largeur par défaut est `1em`. Pour modifier ce réglage, il sera nécessaire de passer par la version préprocesseur (LESS, Sass) de KNACSS (voir plus loin).
|
||||
|
||||
Les **enfants** directs d'un conteneur, quels qu'ils soient, se répartissent automatiquement au sein de la grille formée par leur conteneur. Par exemple, 6 enfants contenus dans un parent de classe `.grid-3` se répartiront en 3 colonnes de 2 lignes.
|
||||
|
||||
## Offsets
|
||||
|
||||
Il vous est très facile de "pousser" un élément à droite ou à gauche de sa ligne dans la grille, et créer ainsi un espacement volontaire, ce que l'on appelle "offset".
|
||||
|
||||
Pour cela, appliquez simplement l'une ou l'autre de ces déclarations sur l'élément :
|
||||
|
||||
- `margin-left: auto` pour le pousser à droite sur sa ligne (ou avec la classe `.left`)
|
||||
- `margin-right: auto` pour le pousser à gauche sur sa ligne (ou avec la classe `.right`)
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="grid-4">
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div class="right">je suis poussé à droite</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Résultat :
|
||||
|
||||
|
||||
## Mise en exergue
|
||||
|
||||
Il est possible de mettre un élément particulier en exergue, en **doublant sa taille** par rapport aux autres, tout en conservant un agencement parfait de la grille.
|
||||
|
||||
Pour ce faire, appliquez la classe `.flexitem-double` à cet élément.
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="grid-4">
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div class="flexitem-double">je suis deux fois plus large que mes frères</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Résultat :
|
||||
|
||||
|
||||
## Pousser au début ou à la fin
|
||||
|
||||
Vous pouvez modifier l'ordre d'affichage des éléments au sein d'une grille à l'aide des classes :
|
||||
|
||||
- `.flexitem-first` (l'élément apparaîtra avant tous les autres)
|
||||
- `.flexitem-last` (l'élément apparaîtra tout à la fin de la grille)
|
||||
|
||||
HTML :
|
||||
```html
|
||||
<div class="grid-4">
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div class="flexitem-first">je m'affiche avant tous mes frères</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
Résultat :
|
||||
|
||||
|
||||
## Plus loin avec les préprocesseurs
|
||||
|
||||
KNACSS est pensé pour être utilisé à l'aide de preprocesseurs tels que LESS ou Sass. Il existe par conséquent un fichier de variables de configuration et des mixins prévus pour étendre les possibilités des grilles notamment.
|
||||
|
||||
### Modifier les variables globales
|
||||
|
||||
Les variables de configuration des grilles se trouvent dans le fichier `less/_00-config.less` (pour les utilisateurs de LESS) et `sass/_00-config.scss` (en version Sass) :
|
||||
|
||||
```css
|
||||
@gutter: 1em;
|
||||
@number: 4; // for equal columns
|
||||
@left: 2; // left side of uneven columns
|
||||
@right: 1; // 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.
|
||||
|
||||
### 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
|
||||
- `.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
|
||||
|
||||
**Objectif : je souhaite que mon élément `.grid-container` crée une grille de 6 colonnes égales**
|
||||
|
||||
LESS (fichier de développement) :
|
||||
```css
|
||||
.grid-container {
|
||||
.grid(6);
|
||||
}
|
||||
```
|
||||
|
||||
CSS compilé (sans Autoprefixer) :
|
||||
|
||||
```css
|
||||
.grid-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -1em;
|
||||
}
|
||||
.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 */
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
#### Grille de colonnes inégales en LESS
|
||||
|
||||
**Objectif : je souhaite que mon élément `.grid-truc` crée une grille de 2 colonnes réparties en 2/3 et 1/3.**
|
||||
|
||||
LESS (fichier de développement) :
|
||||
|
||||
```css
|
||||
.grid-truc {
|
||||
.uneven-grid(2, 1);
|
||||
}
|
||||
```
|
||||
|
||||
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%;
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
## Article associé
|
||||
|
||||
Si vous voulez comprendre dans le détail le fonctionnement des grilles Flexbox de KNACSS, je vous invite à suivre l'article d'Alsacréations ["Une grille responsive avec CSS3 Flexbox et LESS (ou Sass)"](http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html).
|
||||
38
doc/04-tableaux.md
Normal file
38
doc/04-tableaux.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
# Tableaux de données
|
||||
|
||||
KNACSS propose une feuille de style minimale appliquée aux tableaux de données ainsi qu'aux éléments disposant d'une classe `.table`.
|
||||
|
||||
Pour débuter, KNACSS impose un modèle d'affichage fixé à tous les tableaux via `table-layout: fixed;`. Ainsi, ce ne sera plus le contenu qui décidera de la largeur des cellules, mais ce que vous aurez spécifié dans les tailles CSS.
|
||||
|
||||
```css
|
||||
table,
|
||||
.table {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
vertical-align: top;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
.table {
|
||||
display: table;
|
||||
}
|
||||
table#recaptcha_table,
|
||||
table.table-auto {
|
||||
table-layout: auto;
|
||||
}
|
||||
caption {
|
||||
padding: 10px;
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding: 0.3em 0.8em;
|
||||
border: 1px #aaa dotted;
|
||||
vertical-align: top;
|
||||
min-width: 20px;
|
||||
cursor: default;
|
||||
text-align: left;
|
||||
}
|
||||
```
|
||||
12
doc/05-formulaires.md
Normal file
12
doc/05-formulaires.md
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
# Formulaires
|
||||
|
||||
Afin d'harmoniser l'affichage par défaut des éléments de formulaires au sein de l'ensemble des navigateurs, un certain nombre de styles est prévu dans KNACSS.
|
||||
Pour constituer cette base de "bonnes pratiques", les crédits reviennent notamment aux ressources suivantes :
|
||||
|
||||
- [HTML5boilerplate](https://html5boilerplate.com/),
|
||||
- [github.com/nathansmith/formalize](http://github.com/nathansmith/formalize),
|
||||
- [sitepen.com](http://www.sitepen.com)
|
||||
|
||||
Le reset "formulaire" de KNACSS tient compte des éléments suivants : `form`, `input`, `fieldset`, `button`, `select`, `label`, `legend`, `textarea`, etc.
|
||||
|
||||
Notez également qu'en attribuant la classe `.btn` à un élément, vous le considérerez (et stylerez) tel un bouton de formulaire.
|
||||
148
doc/06-helpers.md
Normal file
148
doc/06-helpers.md
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
# Helpers
|
||||
|
||||
Les "Helpers" sont des classes purement visuelles et utilitaires (non "sémantiques"), pas très jolie mais rudement pratiques en production pour alléger vos feuilles de styles.
|
||||
|
||||
**Attention toutefois !** Ce type de classes conduit fréquemment [à des abus au sein de votre code HTML](http://blog.goetter.fr/2014/11/10/bien-utiliser-un-framework-css/).
|
||||
|
||||
Par exemple, Si vous avez 20 images au comportement identique dans la page, ne les affublez pas de classes visuelles multiples telles que `img class="mod clearfix left inbl w200p pas mb1 large-mb2 small-mbn"` mais optez plutôt pour une classe personnalisée : `img class="media"` par exemple.
|
||||
|
||||
**Méthode :** Limitez-vous à 4 noms de classes au grand maximum par élément HTML. Si vous pensez qu’il vous en faut davantage, il est temps d’envisager une classe personnalisée, ou de profiter des pré-processeurs CSS.
|
||||
|
||||
_Les valeurs de helpers peuvent être modifiées au sein du fichier de configuration LESS / Sass._
|
||||
|
||||
## les Helpers de largeur
|
||||
|
||||
Largeurs fluides (en pourcentage) :
|
||||
|
||||
```css
|
||||
.w10 {
|
||||
width: 10%;
|
||||
}
|
||||
.w20 {
|
||||
width: 20%;
|
||||
}
|
||||
.w25 {
|
||||
width: 25%;
|
||||
}
|
||||
...
|
||||
.w100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Largeurs fixes (en pixel) :
|
||||
|
||||
```css
|
||||
.w50p {
|
||||
width: 50px;
|
||||
}
|
||||
.w100p {
|
||||
width: 100px;
|
||||
}
|
||||
.w150p {
|
||||
width: 150px;
|
||||
}
|
||||
...
|
||||
.w960p {
|
||||
width: 960px;
|
||||
}
|
||||
.w1140p {
|
||||
width: 1140px;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Largeurs spéciales :
|
||||
|
||||
```css
|
||||
.mw960p {
|
||||
max-width: 960px;
|
||||
}
|
||||
.mw1140p {
|
||||
max-width: 1140px;
|
||||
}
|
||||
.wauto {
|
||||
width: auto;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## les Helpers d'espacement
|
||||
|
||||
Les herpers d'espacement comportent des classes dédiées aux marges externes (margin) et aux marges internes (padding).
|
||||
|
||||
Leur nommage est assez intuitif :
|
||||
|
||||
- p,m = padding, margin
|
||||
- a,t,r,b,l = all, top, right, bottom,left
|
||||
- s,m,l,n (ou 0) = small, medium, large, none (ou 0)
|
||||
|
||||
Exemples :
|
||||
|
||||
- `.prs` signifie "padding-right small" (où "small" est défini dans votre fichier de configuration, par défaut 5px)
|
||||
- `.man` signifie "margin all none" (fonctionne aussi avec la syntaxe `.ma0`)
|
||||
|
||||
### les marges externes (margin)
|
||||
|
||||
```css
|
||||
.man,
|
||||
.ma0 {
|
||||
margin: 0;
|
||||
}
|
||||
.mas {
|
||||
margin: 10px;
|
||||
}
|
||||
.mam {
|
||||
margin: 20px;
|
||||
}
|
||||
.mal {
|
||||
margin: 40px;
|
||||
}
|
||||
.mtn,
|
||||
.mt0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
.mts {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.mtm {
|
||||
margin-top: 20px;
|
||||
}
|
||||
.mtl {
|
||||
margin-top: 40px;
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
### les marges internes (padding)
|
||||
|
||||
```css
|
||||
.ptn,
|
||||
.pt0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
.pts {
|
||||
padding-top: 10px;
|
||||
}
|
||||
.ptm {
|
||||
padding-top: 20px;
|
||||
}
|
||||
.ptl {
|
||||
padding-top: 40px;
|
||||
}
|
||||
.prn,
|
||||
.pr0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
.prs {
|
||||
padding-right: 10px;
|
||||
}
|
||||
.prm {
|
||||
padding-right: 20px;
|
||||
}
|
||||
.prl {
|
||||
padding-right: 40px;
|
||||
}
|
||||
...
|
||||
```
|
||||
118
doc/07-responsive.md
Normal file
118
doc/07-responsive.md
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
# Responsive Webdesign
|
||||
|
||||
## Points de rupture
|
||||
|
||||
Par défaut, KNACSS tient compte des valeurs de points de rupture suivants :
|
||||
|
||||
- "tiny" : correspond à une fenêtre de 480px ou moins
|
||||
- "small" : correspond à une fenêtre entre 481px et 768px inclus
|
||||
- "medium"correspond à une fenêtre entre 769px et 1024px inclus
|
||||
- "large"correspond à une fenêtre entre 1025px et 1280px inclus
|
||||
- "extra-large"correspond à une fenêtre entre 1281px et 1600px inclus
|
||||
- "ultra-large"correspond à une fenêtre à partir de 1601px
|
||||
|
||||
_Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._
|
||||
|
||||
## Préfixes de classe
|
||||
|
||||
Pour les points de rupture "large", "medium", "small" et "tiny", des préfixes de classes ont été introduits dans KNACSS :
|
||||
|
||||
- `.large-*` : préfixe KNACSS destiné aux styles sur écrans larges
|
||||
- `.medium-*` : préfixe KNACSS destiné aux styles sur écrans medium
|
||||
- `.small-*` : préfixe KNACSS destiné aux styles sur écrans small
|
||||
- `.tiny-*` : préfixe KNACSS destiné aux styles sur écrans tiny
|
||||
|
||||
### Exemple : le point de rupture "tiny"
|
||||
|
||||
Voici quelques-unes des classes dédiées aux écrans de très petite taille… Le mot-clé `!important` est nécessaire pour être certain que les styles écrasent bien les styles appliqués par défaut.
|
||||
|
||||
Masquage / visibilité :
|
||||
|
||||
```css
|
||||
.tiny-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
.tiny-visible {
|
||||
display: block !important;
|
||||
}
|
||||
```
|
||||
|
||||
Modèles d'affichage :
|
||||
|
||||
```css
|
||||
.tiny-no-float {
|
||||
float: none;
|
||||
}
|
||||
.tiny-inbl {
|
||||
display: inline-block;
|
||||
float: none;
|
||||
vertical-align: top;
|
||||
}
|
||||
.tiny-row {
|
||||
display: table !important;
|
||||
table-layout: fixed !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
.tiny-col {
|
||||
display: table-cell !important;
|
||||
vertical-align: top !important;
|
||||
}
|
||||
```
|
||||
|
||||
Largeurs :
|
||||
|
||||
```css
|
||||
.tiny-w25 {
|
||||
width: 25% !important;
|
||||
}
|
||||
.tiny-w33 {
|
||||
width: 33.3333% !important;
|
||||
}
|
||||
.tiny-w50 {
|
||||
width: 50% !important;
|
||||
}
|
||||
.tiny-w66 {
|
||||
width: 66.6666% !important;
|
||||
}
|
||||
.tiny-w75 {
|
||||
width: 75% !important;
|
||||
}
|
||||
.tiny-w100,
|
||||
.tiny-wauto {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
```
|
||||
|
||||
Marges :
|
||||
|
||||
```css
|
||||
.tiny-man,
|
||||
.tiny-ma0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.tiny-pan,
|
||||
.tiny-pa0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## Règles de styles particulières
|
||||
|
||||
```css
|
||||
@media (min-width: 1025px) {
|
||||
/* rules for big resources and big screens like: background-images, font-faces, etc. */
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
|
||||
/* style adjustments for high density devices */
|
||||
}
|
||||
```
|
||||
77
doc/08-print.md
Normal file
77
doc/08-print.md
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
# Styles d'impression
|
||||
|
||||
KNACSS impose une mise en forme d'impression par défaut, à savoir :
|
||||
|
||||
- suppression des couleurs de fond des éléments
|
||||
- suppression des ombrages de boîte et de texte
|
||||
- largeur automatique à la page (body)
|
||||
- couleur de texte #333, couleur de page blanche, taille de texte 12 points, etc.
|
||||
|
||||
```css
|
||||
* {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
body {
|
||||
width: auto !important;
|
||||
margin: auto !important;
|
||||
font-family: serif;
|
||||
font-size: 12pt;
|
||||
background-color: #fff !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
```
|
||||
|
||||
KNACSS gère également les sauts de pages, les lignes veuves et orphelines :
|
||||
|
||||
```css
|
||||
/* no orphans, no widows */
|
||||
p,
|
||||
.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,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
caption {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
```
|
||||
|
||||
Une classe spécifique permet d'afficher ou de masquer du contenu sur imprimante :
|
||||
|
||||
```css
|
||||
.print {
|
||||
display: block;
|
||||
}
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
```
|
||||
|
||||
Bonus : par défaut, KNACSS décide de rendre toutes les images noir et blanc (sauvons les cartouches d'encre !) :
|
||||
|
||||
```css
|
||||
img {
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
```
|
||||
71
doc/09-misc.md
Normal file
71
doc/09-misc.md
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
# Divers
|
||||
|
||||
La feuille de style "fourre-tout" de KNACSS, où l'on retrouve des règles pratiques dans certains contextes, mais pas suffisamment universelles pour être appliquées par défaut dans un framework.
|
||||
|
||||
## Liens d'évitement
|
||||
|
||||
Les [liens d'évitement](http://www.alsacreations.com/tuto/lire/572-Les-liens-d-evitement.html) sont prévus pour faciliter la navigation au clavier, ils sont indispensable dans une optique de parfaite accessibilité.
|
||||
|
||||
KNACSS propose des styles par défaut pour ces liens : masqués au départ, ils deviennent visibles lorsque la touche `tab` est utilisée.
|
||||
|
||||
```css
|
||||
.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;
|
||||
}
|
||||
```
|
||||
|
||||
## Césures
|
||||
|
||||
KNACSS gère automatiquement les césures et les mots longs dès lors que le point de rupture "small" est atteint.
|
||||
|
||||
```css
|
||||
@media (max-width: 768px) {
|
||||
/* you shall not pass */
|
||||
div,
|
||||
textarea,
|
||||
table,
|
||||
td,
|
||||
th,
|
||||
code,
|
||||
pre,
|
||||
samp {
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Google maps
|
||||
|
||||
KNACSS règle les bugs d'affichage dans le cas spécifique des images google.
|
||||
|
||||
```css
|
||||
.gm-style img {
|
||||
height: 100%;
|
||||
}
|
||||
:not(.gm-style) img {
|
||||
height: auto;
|
||||
}
|
||||
.gm-style img,
|
||||
.gmnoscreen img,
|
||||
.gmnoprint img {
|
||||
max-width: none !important;
|
||||
}
|
||||
```
|
||||
11
doc/10-styling.md
Normal file
11
doc/10-styling.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
# Décorations diverses
|
||||
|
||||
Dans cette feuille de style, KNACSS apporte un minimum de décoration à divers éléments habituels.
|
||||
Il ne s'agit pas d'un "reset" mais bien d'une couche de design qu'il n'est bien entendu pas du tout indispensable de conserver.
|
||||
|
||||
- les élements de code (`code`, `pre`)
|
||||
- le surlignement (`mark`)
|
||||
- les contenus en exposant ou en indice (`sup`, `sup`)
|
||||
- les citations (`q`, `blockquote`)
|
||||
- les séparateurs (`hr`)
|
||||
- les tableaux de données
|
||||
5
doc/11-wordpress.md
Normal file
5
doc/11-wordpress.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
# Styles WordPress
|
||||
|
||||
Cette feuille de style, exclusivement dédiée au CMS WordPress, constitue en un "reset" de base pour cet outil que nous employons fréquemment au sein de l'agence Alsacréations.fr.
|
||||
|
||||
C'est Geoffrey Crofte qui a conçu ce fichier de bonnes pratiques (basée sur un socle proposé par Automattic), n'hésitez pas à le contacter sur son site perso [CreativeJuiz](http://www.creativejuiz.fr/) si vous avez la moindre question à son propos.
|
||||
BIN
doc/illust/02-layout.png
Normal file
BIN
doc/illust/02-layout.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
doc/illust/03-double.PNG
Normal file
BIN
doc/illust/03-double.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
doc/illust/03-first.PNG
Normal file
BIN
doc/illust/03-first.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
doc/illust/03-grid-even.png
Normal file
BIN
doc/illust/03-grid-even.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
doc/illust/03-grid-uneven.png
Normal file
BIN
doc/illust/03-grid-uneven.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
doc/illust/03-layout1.png
Normal file
BIN
doc/illust/03-layout1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
doc/illust/03-layout2.png
Normal file
BIN
doc/illust/03-layout2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
doc/illust/03-layout3.png
Normal file
BIN
doc/illust/03-layout3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
doc/illust/03-layout4.png
Normal file
BIN
doc/illust/03-layout4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
BIN
doc/illust/03-offset.png
Normal file
BIN
doc/illust/03-offset.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
doc/illust/schnapsit.png
Normal file
BIN
doc/illust/schnapsit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
|
|
@ -1,65 +1,57 @@
|
|||
// Config file : variables, mixins, ...
|
||||
/*!
|
||||
* www.KNACSS.com V4.1.1 (2015-03-30) @author: Raphael Goetter, Alsacreations
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
// Config file and project variables
|
||||
|
||||
// font sizes
|
||||
@base-font-size : 14px; // if "14px" then 1em = 14px
|
||||
@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"
|
||||
@base-font-size : 14px; // if "14px" then 1em = 14px
|
||||
@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 : Helvetica, Arial, sans-serif; // common font
|
||||
@font-stack-headings : Helvetica, Arial, sans-serif; // headings font
|
||||
@font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
|
||||
@font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
|
||||
@font-stack-common : Helvetica, Arial, sans-serif; // common font
|
||||
@font-stack-headings : Helvetica, Arial, sans-serif; // headings font
|
||||
@font-stack-monospace : Consolas, "DejaVu Sans Mono", Courier, monospace; // monospace font
|
||||
@font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
|
||||
|
||||
// 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
|
||||
@base-color-link : #333; // base links color
|
||||
@base-color-link-hover : #000; // base hovered/focused links color
|
||||
@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
|
||||
@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
|
||||
@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 : 5px; // tiny value for margins / paddings
|
||||
@small-value : 10px; // small value for margins / paddings
|
||||
@medium-value : 20px; // medium value for margins / paddings
|
||||
@large-value : 40px; // large value for margins / paddings
|
||||
@extra-large-value : 80px; // extra large value for margins / paddings
|
||||
@ultra-large-value : 160px; // ultra large value for margins / paddings
|
||||
@tiny-value : 5px; // tiny value for margins / paddings
|
||||
@small-value : 10px; // small value for margins / paddings
|
||||
@medium-value : 20px; // medium value for margins / paddings
|
||||
@large-value : 40px; // large value for margins / paddings
|
||||
@extra-large-value : 80px; // extra large value for margins / paddings
|
||||
@ultra-large-value : 160px; // ultra large value for margins / paddings
|
||||
|
||||
// breakpoints (choose unit you prefer)
|
||||
@tiny-screen : 480px; // tiny screens media query (less than 480px)
|
||||
@small-screen : 768px; // screens between 481px and 768px
|
||||
@medium-screen : 1024px; // screens between 769px and 1024px
|
||||
@large-screen : 1280px; // screens between 1025px and 1280px
|
||||
@extra-large-screen : 1600px; // screens between 1281px and 1600px
|
||||
@ultra-large-screen : 1920px; // ultra large screens
|
||||
@tiny-screen : 480px; // tiny screens media query (less than 480px)
|
||||
@small-screen : 768px; // screens between 481px and 768px
|
||||
@medium-screen : 1024px; // screens between 769px and 1024px
|
||||
@large-screen : 1280px; // screens between 1025px and 1280px
|
||||
@extra-large-screen : 1600px; // screens between 1281px and 1600px
|
||||
@ultra-large-screen : 1920px; // ultra large screens
|
||||
|
||||
// misc (choose unit you prefer)
|
||||
@gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
|
||||
// LESS mixins : don't touch or you'll be banned ;)
|
||||
// px to em/rem
|
||||
.rem(@size, @bf: @base-font-size){
|
||||
@rem: @size / 10;
|
||||
font-size: unit(round(@base-font-size * @size /10), px);
|
||||
font-size: unit(@rem, rem);
|
||||
}
|
||||
.em(@size, @bf: @base-font-size){
|
||||
@em: @size / @bf;
|
||||
font-size: unit(round(@em,2), em);
|
||||
}
|
||||
.px(@size, @bf: @base-font-size){
|
||||
@px: @size * @bf;
|
||||
font-size: unit(round(@px,2), px);
|
||||
}
|
||||
// grids variables (choose unit you prefer)
|
||||
@gutter: 1em; // 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
|
||||
|
|
|
|||
427
less/_01a-normalize.less
Normal file
427
less/_01a-normalize.less
Normal file
|
|
@ -0,0 +1,427 @@
|
|||
/*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
255
less/_01b-base.less
Normal file
255
less/_01b-base.less
Normal file
|
|
@ -0,0 +1,255 @@
|
|||
/* ----------------------------- */
|
||||
/* == soft reset */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* switching to border-box model for all elements */
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
ul.unstyled {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
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)';
|
||||
|
||||
/* disallow text zooming on orientation change (non standard property) */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
/* set body font-size in em (1.4em equiv "14px") */
|
||||
font-size: unit((@base-font-size / 10), em);
|
||||
|
||||
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,
|
||||
.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,
|
||||
.h1-like {
|
||||
font-size: @h1-size;
|
||||
font-family: @font-stack-headings;
|
||||
}
|
||||
|
||||
h2,
|
||||
.h2-like {
|
||||
font-size: @h2-size;
|
||||
font-family: @font-stack-headings;
|
||||
}
|
||||
|
||||
h3,
|
||||
.h3-like {
|
||||
font-size: @h3-size;
|
||||
}
|
||||
|
||||
h4,
|
||||
.h4-like {
|
||||
font-size: @h4-size;
|
||||
}
|
||||
|
||||
h5,
|
||||
.h5-like {
|
||||
font-size: @h5-size;
|
||||
}
|
||||
|
||||
h6,
|
||||
.h6-like {
|
||||
font-size: @h6-size;
|
||||
}
|
||||
|
||||
/* alternate font-sizing */
|
||||
.smaller {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.bigger {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.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,
|
||||
.italic,
|
||||
address,
|
||||
cite,
|
||||
i,
|
||||
var {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
small,
|
||||
sub,
|
||||
sup {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == hiding content */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* 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(1px, 1px, 1px, 1px) !important;
|
||||
}
|
||||
|
||||
@media (max-width: @small-screen) {
|
||||
.no-small-screen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @large-screen) {
|
||||
.no-large-screen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == browsers consistency */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* avoid top margins on first content element */
|
||||
p,
|
||||
.p-like,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
blockquote,
|
||||
pre,
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* avoid margins on nested elements */
|
||||
li p,
|
||||
li .p-like,
|
||||
li ul,
|
||||
li ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* max values */
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
code,
|
||||
pre,
|
||||
textarea,
|
||||
input,
|
||||
video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* margin-bottom on tables */
|
||||
table {
|
||||
margin-bottom: @medium-value;
|
||||
}
|
||||
|
||||
135
less/_02-layout.less
Normal file
135
less/_02-layout.less
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
/* ----------------------------- */
|
||||
/* ==layout and modules */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* blocks that needs to be placed under floats */
|
||||
.clear,
|
||||
.line,
|
||||
.row {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* blocks that must contain floats */
|
||||
.clearfix,
|
||||
.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: @small-value;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
img.fr {
|
||||
margin-left: @small-value;
|
||||
}
|
||||
|
||||
img.fl,
|
||||
img.fr {
|
||||
margin-bottom: @tiny-value;
|
||||
}
|
||||
|
||||
/* 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
|
||||
*/
|
||||
|
||||
.flexbox,
|
||||
.flexbox-h,
|
||||
.flexbox-v {
|
||||
display : flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flexbox-v {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flexitem-fluid {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flexitem-first {
|
||||
order : -1;
|
||||
}
|
||||
|
||||
.flexitem-medium {
|
||||
order : 0;
|
||||
}
|
||||
|
||||
.flexitem-last {
|
||||
order : 1;
|
||||
}
|
||||
|
||||
.flexitem-center {
|
||||
margin: auto;
|
||||
}
|
||||
|
|
@ -1,175 +1,151 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==classic grids */
|
||||
/* .. use it when gutter size matters */
|
||||
/* ==Grids */
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
||||
// WARNING : KNACSS grids are flexbox based and only supported by IE10+
|
||||
// Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html
|
||||
// Demo : http://codepen.io/raphaelgoetter/pen/zxBMLW
|
||||
|
||||
/* overall container of grids */
|
||||
.grid {
|
||||
overflow: hidden;
|
||||
}
|
||||
// Usage in vanilla CSS:
|
||||
// - <div class="grid-4"> for an equal fourth columns grid container
|
||||
// - <div class="grid-2-1"> for an uneven columns grid container
|
||||
|
||||
/* global styles for direct child ex. .grid3 */
|
||||
.grid > * {
|
||||
display: block;
|
||||
padding: 0;
|
||||
/* gutter value */
|
||||
// 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); }
|
||||
|
||||
[class*="grid-"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-left: -@gutter;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* global styles for each "cell" */
|
||||
.grid > * > * {
|
||||
display: inline-block;
|
||||
/* gutter value */
|
||||
padding-left: @gutter;
|
||||
margin-left: 0;
|
||||
vertical-align: top;
|
||||
[class*="grid-"] > * {
|
||||
flex: 0 0 auto;
|
||||
display: block; /* IE fix */
|
||||
width: ~'calc(100% * 1 / @{number} - @{gutter})';
|
||||
margin-left: @gutter;
|
||||
}
|
||||
|
||||
/* whitespace fixing for modern browsers including IE9+ */
|
||||
:root .grid {
|
||||
font-size: 0;
|
||||
/* fallback for IE9+ */
|
||||
text-justify: distribute-all-lines;
|
||||
// LESS mixins for *equal* columns grid container
|
||||
// example : .grid-perso { .grid(12); }
|
||||
.grid(@number:@number, @gutter:@gutter) {
|
||||
& > * {
|
||||
width: ~'calc(100% * 1 / @{number} - @{gutter})';
|
||||
}
|
||||
& > .flexitem-double {
|
||||
width: ~'calc(100% * 2 / @{number} - @{gutter})';
|
||||
}
|
||||
@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
|
||||
& > * {
|
||||
width: ~'calc(100% * 1 / 2 - @{gutter})';
|
||||
}
|
||||
& > .flexitem-double {
|
||||
width: ~'calc(100% - @{gutter})';
|
||||
}
|
||||
}
|
||||
@media (max-width: @tiny-screen) {
|
||||
& > * {
|
||||
width: ~'calc(100% - @{gutter})';
|
||||
}
|
||||
& > .flexitem-double {
|
||||
width: ~'calc(100% - @{gutter})';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root .grid > * > * {
|
||||
/* fallback for Opera Mini */
|
||||
font-size: @base-font-size;
|
||||
font-size: unit((@base-font-size / 10), rem);
|
||||
// Examples : will be compiled in CSS
|
||||
|
||||
.grid-2 {
|
||||
.grid(2);
|
||||
}
|
||||
|
||||
/* Opera hack */
|
||||
.opera:-o-prefocus,
|
||||
.grid > * {
|
||||
word-spacing: -0.43em;
|
||||
.grid-3 {
|
||||
.grid(3);
|
||||
}
|
||||
|
||||
.grid2 > * {
|
||||
width: 50%;
|
||||
.grid-4 {
|
||||
.grid(4);
|
||||
}
|
||||
|
||||
.grid3 > * {
|
||||
width: 33.333%;
|
||||
.grid-5 {
|
||||
.grid(5);
|
||||
}
|
||||
|
||||
.grid4 > * {
|
||||
width: 25%;
|
||||
.grid-6 {
|
||||
.grid(6);
|
||||
}
|
||||
|
||||
.grid5 > * {
|
||||
width: 20%;
|
||||
.grid-7 {
|
||||
.grid(7);
|
||||
}
|
||||
|
||||
.grid6 > * {
|
||||
width: 16.667%;
|
||||
.grid-8 {
|
||||
.grid(8);
|
||||
}
|
||||
|
||||
.grid8 > * {
|
||||
width: 12.5%;
|
||||
.grid-10 {
|
||||
.grid(10);
|
||||
}
|
||||
|
||||
.grid10 > * {
|
||||
width: 10%;
|
||||
.grid-12 {
|
||||
.grid(12);
|
||||
}
|
||||
|
||||
.grid12 > * {
|
||||
width: 8.333%;
|
||||
// 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})';
|
||||
}
|
||||
& > *:nth-child(even) {
|
||||
@size: (@right / (@left + @right)) * 100%;
|
||||
width: ~'calc(@{size} - @{gutter})';
|
||||
}
|
||||
@media (max-width: @tiny-screen) {
|
||||
& > *:nth-child(n) {
|
||||
width: ~'calc(100% - @{gutter})';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
|
||||
.grid2-1 > *:first-child,
|
||||
.grid1-2 > * + * {
|
||||
width: 66.666%;
|
||||
|
||||
// Examples : will be compiled in CSS
|
||||
|
||||
.grid-2-1 {
|
||||
.uneven-grid(2,1);
|
||||
}
|
||||
|
||||
.grid1-2 > *:first-child,
|
||||
.grid2-1 > * + * {
|
||||
width: 33.333%;
|
||||
.grid-1-2 {
|
||||
.uneven-grid(1,2);
|
||||
}
|
||||
|
||||
.grid1-3 > *:first-child,
|
||||
.grid3-1 > * + * {
|
||||
width: 25%;
|
||||
.grid-3-1 {
|
||||
.uneven-grid(3,1);
|
||||
}
|
||||
|
||||
.grid3-1 > *:first-child,
|
||||
.grid1-3 > * + * {
|
||||
width: 75%;
|
||||
.grid-1-3 {
|
||||
.uneven-grid(1,3);
|
||||
}
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ==autogrids */
|
||||
/* .. to automatically justify blocs */
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
|
||||
|
||||
/* container of autogrids */
|
||||
[class*="autogrid"] {
|
||||
text-align: justify;
|
||||
.grid-3-2 {
|
||||
.uneven-grid(3,2);
|
||||
}
|
||||
|
||||
[class*="autogrid"]:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
.grid-2-3 {
|
||||
.uneven-grid(2,3);
|
||||
}
|
||||
|
||||
[class*="autogrid"] > * {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
.grid-4-1 {
|
||||
.uneven-grid(4,1);
|
||||
}
|
||||
|
||||
/* whitespace fixing for modern browsers including IE9+ */
|
||||
:root [class*="autogrid"] {
|
||||
font-size: 0;
|
||||
/* fallback for IE9+ */
|
||||
text-justify: distribute-all-lines;
|
||||
}
|
||||
|
||||
:root [class*="autogrid"] > * {
|
||||
/* fallback for Opera Mini */
|
||||
font-size: @base-font-size;
|
||||
font-size: unit((@base-font-size / 10), rem);
|
||||
}
|
||||
|
||||
/* Opera hack */
|
||||
[class*="autogrid"]:-o-prefocus {
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
.autogrid2 > * {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.autogrid3 > * {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.autogrid4 > * {
|
||||
width: 23.6%;
|
||||
}
|
||||
|
||||
.autogrid5 > * {
|
||||
width: 19%;
|
||||
}
|
||||
|
||||
.autogrid6 > * {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.autogrid8 > * {
|
||||
width: 10.8%;
|
||||
}
|
||||
|
||||
.autogrid10 > * {
|
||||
width: 9%;
|
||||
}
|
||||
|
||||
.autogrid12 > * {
|
||||
width: 6.4%;
|
||||
}
|
||||
.grid-1-4 {
|
||||
.uneven-grid(1,4);
|
||||
}
|
||||
|
|
@ -24,7 +24,7 @@ table.table-auto {
|
|||
caption {
|
||||
padding: @small-value;
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
td,
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ label,
|
|||
font-size: inherit;
|
||||
}
|
||||
|
||||
label {
|
||||
label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
|
@ -46,19 +46,6 @@ textarea {
|
|||
resize: vertical;
|
||||
}
|
||||
|
||||
/* clickable input types in iOS */
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
/* if select styling bugs on WebKit */
|
||||
/* select { -webkit-appearance: none; } */
|
||||
|
||||
|
|
@ -79,11 +66,14 @@ textarea:-moz-placeholder {
|
|||
color: #777;
|
||||
}
|
||||
|
||||
/* Removes inner padding and border in FF3+ */
|
||||
button::-moz-focus-inner,
|
||||
input[type='button']::-moz-focus-inner,
|
||||
input[type='reset']::-moz-focus-inner,
|
||||
input[type='submit']::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
.btn:focus,
|
||||
input:focus,
|
||||
button:focus {
|
||||
outline: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
|
|||
297
less/_06-helpers.less
Normal file
297
less/_06-helpers.less
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==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: @small-value;
|
||||
}
|
||||
|
||||
.mam {
|
||||
margin: @medium-value;
|
||||
}
|
||||
|
||||
.mal {
|
||||
margin: @large-value;
|
||||
}
|
||||
|
||||
.pas {
|
||||
padding: @small-value;
|
||||
}
|
||||
|
||||
.pam {
|
||||
padding: @medium-value;
|
||||
}
|
||||
|
||||
.pal {
|
||||
padding: @large-value;
|
||||
}
|
||||
|
||||
.mtn,
|
||||
.mt0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mts {
|
||||
margin-top: @small-value;
|
||||
}
|
||||
|
||||
.mtm {
|
||||
margin-top: @medium-value;
|
||||
}
|
||||
|
||||
.mtl {
|
||||
margin-top: @large-value;
|
||||
}
|
||||
|
||||
.mrn,
|
||||
.mr0 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mrs {
|
||||
margin-right: @small-value;
|
||||
}
|
||||
|
||||
.mrm {
|
||||
margin-right: @medium-value;
|
||||
}
|
||||
|
||||
.mrl {
|
||||
margin-right: @large-value;
|
||||
}
|
||||
|
||||
.mbn,
|
||||
.mb0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mbs {
|
||||
margin-bottom: @small-value;
|
||||
}
|
||||
|
||||
.mbm {
|
||||
margin-bottom: @medium-value;
|
||||
}
|
||||
|
||||
.mbl {
|
||||
margin-bottom: @large-value;
|
||||
}
|
||||
|
||||
.mln,
|
||||
.ml0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mls {
|
||||
margin-left: @small-value;
|
||||
}
|
||||
|
||||
.mlm {
|
||||
margin-left: @medium-value;
|
||||
}
|
||||
|
||||
.mll {
|
||||
margin-left: @large-value;
|
||||
}
|
||||
|
||||
.ptn,
|
||||
.pt0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.pts {
|
||||
padding-top: @small-value;
|
||||
}
|
||||
|
||||
.ptm {
|
||||
padding-top: @medium-value;
|
||||
}
|
||||
|
||||
.ptl {
|
||||
padding-top: @large-value;
|
||||
}
|
||||
|
||||
.prn,
|
||||
.pr0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.prs {
|
||||
padding-right: @small-value;
|
||||
}
|
||||
|
||||
.prm {
|
||||
padding-right: @medium-value;
|
||||
}
|
||||
|
||||
.prl {
|
||||
padding-right: @large-value;
|
||||
}
|
||||
|
||||
.pbn,
|
||||
.pb0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.pbs {
|
||||
padding-bottom: @small-value;
|
||||
}
|
||||
|
||||
.pbm {
|
||||
padding-bottom: @medium-value;
|
||||
}
|
||||
|
||||
.pbl {
|
||||
padding-bottom: @large-value;
|
||||
}
|
||||
|
||||
.pln,
|
||||
.pl0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pls {
|
||||
padding-left: @small-value;
|
||||
}
|
||||
|
||||
.plm {
|
||||
padding-left: @medium-value;
|
||||
}
|
||||
|
||||
.pll {
|
||||
padding-left: @large-value;
|
||||
}
|
||||
372
less/_07-responsive.less
Normal file
372
less/_07-responsive.less
Normal file
|
|
@ -0,0 +1,372 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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 */
|
||||
.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: (@small-screen + 1)) and (max-width: @medium-screen) {
|
||||
|
||||
/* 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: (@tiny-screen + 1)) and (max-width: @small-screen) {
|
||||
|
||||
/* 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: @tiny-screen) {
|
||||
|
||||
/* quick tiny resolution reset */
|
||||
.mod,
|
||||
.col,
|
||||
fieldset {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
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 !important;
|
||||
width: auto !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
94
less/_08-print.less
Normal file
94
less/_08-print.less
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
/* quick print reset */
|
||||
@media print {
|
||||
|
||||
* {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
width: auto !important;
|
||||
margin: auto !important;
|
||||
font-family: serif;
|
||||
font-size: 12pt;
|
||||
background-color: #fff !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
p,
|
||||
.p-like,
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like,
|
||||
blockquote,
|
||||
ul,
|
||||
ol {
|
||||
color: #000 !important;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.print {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* no orphans, no widows */
|
||||
p,
|
||||
.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,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
caption {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000 !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
/* displaying URLs */
|
||||
a[href]::after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
a[href^="javascript:"]::after,
|
||||
a[href^="#"]::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
55
less/_09-misc.less
Normal file
55
less/_09-misc.less
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
/* ----------------------------- */
|
||||
/* ==misc rules */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* styling skip links */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Google Gmap3 bug fix on images */
|
||||
.gm-style img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:not(.gm-style) img {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.gm-style img,
|
||||
.gmnoscreen img,
|
||||
.gmnoprint img {
|
||||
max-width: none !important;
|
||||
}
|
||||
141
less/_10-styling.less
Normal file
141
less/_10-styling.less
Normal file
|
|
@ -0,0 +1,141 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding:2px 4px;
|
||||
background: #ff0;
|
||||
}
|
||||
|
||||
sup,
|
||||
sub {
|
||||
vertical-align: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
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,
|
||||
.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;
|
||||
}
|
||||
|
||||
/* alternate tables */
|
||||
.table-alternate {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.table-alternate tbody {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.table-alternate thead tr > * + * {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.table-alternate tbody tr > * + * {
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* alternate-vert tables */
|
||||
.table-alternate-v {
|
||||
border: 0;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.table-alternate-v tr > :first-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.table-alternate-v tr > * + * {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* striped tables */
|
||||
.table-striped tbody tr:nth-child(odd) {
|
||||
background: #eee;
|
||||
background: rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
/* striped-vert tables */
|
||||
.table-striped-v tr > :first-child {
|
||||
background: #eee;
|
||||
background: rgba(0, 0, 0, .05);
|
||||
}
|
||||
302
less/_11-wordpress.less
Normal file
302
less/_11-wordpress.less
Normal file
|
|
@ -0,0 +1,302 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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;
|
||||
}
|
||||
|
|
@ -1,23 +1,28 @@
|
|||
// LESS config file
|
||||
// (you should comment this line and move config file from vendor/knacss folder to your own folder)
|
||||
// -----------------
|
||||
|
||||
// (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 "_01-base"; // reset, config and basic layout
|
||||
@import "_01b-base"; // reset and basic styles
|
||||
|
||||
// LESS files : chose the ones you need
|
||||
@import "_02-helpers"; // width and spacers visually classes
|
||||
@import "_03-grids"; // grids and autogrids
|
||||
@import "_04-tables";
|
||||
@import "_05-forms";
|
||||
@import "_06-icons"; // UTF-8 icons
|
||||
@import "_07-flexbox";
|
||||
@import "_08-rwd"; // Responsive Web Design helpers
|
||||
@import "_09-print";
|
||||
@import "_10-booleans"; // skip links and hyphens
|
||||
@import "_11-gmaps"; // Google maps bugs fix
|
||||
@import "_12-ie"; // IE6, IE7, IE8 support
|
||||
@import "_13-styling"; // minor stylings
|
||||
@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 */
|
||||
|
|
|
|||
24
package.json
Normal file
24
package.json
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "knacss",
|
||||
"version": "4.1.1",
|
||||
"homepage": "http://www.knacss.com/",
|
||||
"bugs": "https://github.com/raphaelgoetter/KNACSS/issues",
|
||||
"author": [
|
||||
"Raphaël GOETTER, Alsacreations (http://goetter.fr)"
|
||||
],
|
||||
"contributors": [
|
||||
"Raphaël GOETTER, Alsacreations"
|
||||
],
|
||||
"description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
|
||||
"main": "css/knacss.css",
|
||||
"keywords": [
|
||||
"css", "framework", "reset", "responsive", "less", "sass", "rwd", "boilerplate", "workflow"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/raphaelgoetter/KNACSS"
|
||||
},
|
||||
"license": "WTFPL",
|
||||
"dependencies": {},
|
||||
"engines": {}
|
||||
}
|
||||
|
|
@ -1,80 +1,57 @@
|
|||
// Config file : variables, mixins, ...
|
||||
/*!
|
||||
* www.KNACSS.com V4.1.1 (2015-03-30) @author: Raphael Goetter, Alsacreations
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
|
||||
// Config file and project variables
|
||||
|
||||
// font sizes
|
||||
$base-font-size : 14px; // if "14px" then 1em = 14px
|
||||
$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"
|
||||
$base-font-size : 14px; // if "14px" then 1em = 14px
|
||||
$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 : Helvetica, Arial, sans-serif; // common font
|
||||
$font-stack-headings : Helvetica, Arial, sans-serif; // headings font
|
||||
$font-stack-monospace : Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
|
||||
$font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
|
||||
$font-stack-common : Helvetica, Arial, sans-serif; // common font
|
||||
$font-stack-headings : Helvetica, Arial, sans-serif; // headings font
|
||||
$font-stack-monospace : Consolas, DejaVu Sans Mono, Courier, monospace; // monospace font
|
||||
$font-stack-universal : FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
|
||||
|
||||
// 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
|
||||
$base-color-link : #333; // base links color
|
||||
$base-color-link-hover : #000; // base hovered/focused links color
|
||||
$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
|
||||
$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
|
||||
$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 : 5px; // tiny value for margins / paddings
|
||||
$small-value : 10px; // small value for margins / paddings
|
||||
$medium-value : 20px; // medium value for margins / paddings
|
||||
$large-value : 40px; // large value for margins / paddings
|
||||
$extra-large-value : 80px; // extra large value for margins / paddings
|
||||
$ultra-large-value : 160px; // ultra large value for margins / paddings
|
||||
$tiny-value : 5px; // tiny value for margins / paddings
|
||||
$small-value : 10px; // small value for margins / paddings
|
||||
$medium-value : 20px; // medium value for margins / paddings
|
||||
$large-value : 40px; // large value for margins / paddings
|
||||
$extra-large-value : 80px; // extra large value for margins / paddings
|
||||
$ultra-large-value : 160px; // ultra large value for margins / paddings
|
||||
|
||||
// breakpoints (choose unit you prefer)
|
||||
$tiny-screen : 480px; // tiny screens media query (less than 480px)
|
||||
$small-screen : 768px; // screens between 481px and 768px
|
||||
$medium-screen : 1024px; // screens between 769px and 1024px
|
||||
$large-screen : 1280px; // screens between 1025px and 1280px
|
||||
$extra-large-screen : 1600px; // screens between 1281px and 1600px
|
||||
$ultra-large-screen : 1920px; // ultra large screens
|
||||
$tiny-screen : 480px; // tiny screens media query (less than 480px)
|
||||
$small-screen : 768px; // screens between 481px and 768px
|
||||
$medium-screen : 1024px; // screens between 769px and 1024px
|
||||
$large-screen : 1280px; // screens between 1025px and 1280px
|
||||
$extra-large-screen : 1600px; // screens between 1281px and 1600px
|
||||
$ultra-large-screen : 1920px; // ultra large screens
|
||||
|
||||
// misc (choose unit you prefer)
|
||||
$gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
|
||||
// Sass mixins : don't touch or you'll be banned ;)
|
||||
// px to em/rem
|
||||
|
||||
@mixin rem($size) {
|
||||
@if unitless($size) {
|
||||
font-size: ($size * 1rem) / 1rem * $base-font-size;
|
||||
font-size: $size * 1rem;
|
||||
}
|
||||
@else {
|
||||
@warn "Please make sure `$size` is unitless."
|
||||
}
|
||||
}
|
||||
@mixin em($size) {
|
||||
@if unitless($size) {
|
||||
$bf: $base-font-size / 1px;
|
||||
font-size: $size / $bf * 1em;
|
||||
}
|
||||
@else {
|
||||
@warn "Please make sure `$size` is unitless."
|
||||
}
|
||||
}
|
||||
@mixin px($size) {
|
||||
@if unitless($size) {
|
||||
$bf: $base-font-size / 1px;
|
||||
font-size: $size * $bf * 1px;
|
||||
}
|
||||
@else {
|
||||
@warn "Please make sure `$size` is unitless."
|
||||
}
|
||||
}
|
||||
// grids variables (choose unit you prefer)
|
||||
$gutter: 1em; // 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
|
||||
427
sass/_01a-normalize.scss
Normal file
427
sass/_01a-normalize.scss
Normal file
|
|
@ -0,0 +1,427 @@
|
|||
/*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/**
|
||||
* 1. Set default font family to sans-serif.
|
||||
* 2. Prevent iOS text size adjust after orientation change, without disabling
|
||||
* user zoom.
|
||||
*/
|
||||
|
||||
html {
|
||||
font-family: sans-serif; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default margin.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* HTML5 display definitions
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Correct `block` display not defined for any HTML5 element in IE 8/9.
|
||||
* Correct `block` display not defined for `details` or `summary` in IE 10/11
|
||||
* and Firefox.
|
||||
* Correct `block` display not defined for `main` in IE 11.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `inline-block` display not defined in IE 8/9.
|
||||
* 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent modern browsers from displaying `audio` without controls.
|
||||
* Remove excess height in iOS 5 devices.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `[hidden]` styling not present in IE 8/9/10.
|
||||
* Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
|
||||
*/
|
||||
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Links
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the gray background color from active links in IE 10.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Improve readability when focused and also mouse hovered in all browsers.
|
||||
*/
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9/10/11, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in Safari and Chrome.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address variable `h1` font-size and margin within `section` and `article`
|
||||
* contexts in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address styling not present in IE 8/9.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent and variable font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove border when inside `a` element in IE 8/9/10.
|
||||
*/
|
||||
|
||||
img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct overflow not hidden in IE 9/10/11.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Address margin not present in IE 8/9 and Safari.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address differences between Firefox and other browsers.
|
||||
*/
|
||||
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Contain overflow in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address odd `em`-unit font size rendering in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Known limitation: by default, Chrome and Safari on OS X allow very limited
|
||||
* styling of `select`, unless a `border` property is set.
|
||||
*/
|
||||
|
||||
/**
|
||||
* 1. Correct color not being inherited.
|
||||
* Known issue: affects color of disabled elements.
|
||||
* 2. Correct font properties not being inherited.
|
||||
* 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
margin: 0; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Address `overflow` set to `hidden` in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
button {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address inconsistent `text-transform` inheritance for `button` and `select`.
|
||||
* All other form control elements do not inherit `text-transform` values.
|
||||
* Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
|
||||
* Correct `select` style inheritance in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
||||
* and `video` controls.
|
||||
* 2. Correct inability to style clickable `input` types in iOS.
|
||||
* 3. Improve usability and consistency of cursor style between image-type
|
||||
* `input` and others.
|
||||
*/
|
||||
|
||||
button,
|
||||
html input[type="button"], /* 1 */
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
cursor: pointer; /* 3 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Re-set default cursor for disabled elements.
|
||||
*/
|
||||
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and border in Firefox 4+.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
||||
* the UA stylesheet.
|
||||
*/
|
||||
|
||||
input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
/**
|
||||
* It's recommended that you don't attempt to style these elements.
|
||||
* Firefox's implementation doesn't respect box-sizing, padding, or width.
|
||||
*
|
||||
* 1. Address box sizing set to `content-box` in IE 8/9/10.
|
||||
* 2. Remove excess padding in IE 8/9/10.
|
||||
*/
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Fix the cursor style for Chrome's increment/decrement buttons. For certain
|
||||
* `font-size` values of the `input`, it causes the cursor style of the
|
||||
* decrement button to change from `default` to `text`.
|
||||
*/
|
||||
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Address `appearance` set to `searchfield` in Safari and Chrome.
|
||||
* 2. Address `box-sizing` set to `border-box` in Safari and Chrome
|
||||
* (include `-moz` to future-proof).
|
||||
*/
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box; /* 2 */
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove inner padding and search cancel button in Safari and Chrome on OS X.
|
||||
* Safari (but not Chrome) clips the cancel button when the search input has
|
||||
* padding (and `textfield` appearance).
|
||||
*/
|
||||
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define consistent border, margin, and padding.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct `color` not being inherited in IE 8/9/10/11.
|
||||
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
||||
*/
|
||||
|
||||
legend {
|
||||
border: 0; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove default vertical scrollbar in IE 8/9/10/11.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Don't inherit the `font-weight` (applied by a rule above).
|
||||
* NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
|
||||
*/
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Tables
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove most spacing between table cells.
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
}
|
||||
248
sass/_01b-base.scss
Normal file
248
sass/_01b-base.scss
Normal file
|
|
@ -0,0 +1,248 @@
|
|||
/* ----------------------------- */
|
||||
/* == soft reset */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* switching to border-box model for all elements */
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
ul.unstyled {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
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 * 0.625);
|
||||
|
||||
/* disallow text zooming on orientation change (non standard property) */
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
|
||||
/* set body font-size in em (1.4em equiv "14px") */
|
||||
font-size: ($base-font-size / 10px) + em;
|
||||
|
||||
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,
|
||||
.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, .h1-like {
|
||||
font-size: $h1-size;
|
||||
font-family: $font-stack-headings;
|
||||
}
|
||||
|
||||
h2, .h2-like {
|
||||
font-size: $h2-size;
|
||||
font-family: $font-stack-headings;
|
||||
}
|
||||
|
||||
h3, .h3-like {
|
||||
font-size: $h3-size;
|
||||
}
|
||||
|
||||
h4, .h4-like {
|
||||
font-size: $h4-size;
|
||||
}
|
||||
|
||||
h5, .h5-like {
|
||||
font-size: $h5-size;
|
||||
}
|
||||
|
||||
h6, .h6-like {
|
||||
font-size: $h6-size;
|
||||
}
|
||||
|
||||
/* alternate font-sizing */
|
||||
.smaller {
|
||||
font-size: 0.6em;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.big {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.bigger {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.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,
|
||||
.italic,
|
||||
address,
|
||||
cite,
|
||||
i,
|
||||
var {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
small,
|
||||
sub,
|
||||
sup {
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == hiding content */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* hidden but not for assistance tools, Yahoo! method */
|
||||
.visually-hidden {
|
||||
position: absolute !important;
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
padding: 0 !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(1px, 1px, 1px, 1px) !important;
|
||||
}
|
||||
|
||||
@media (max-width: $small-screen) {
|
||||
.no-small-screen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $large-screen) {
|
||||
.no-large-screen {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------- */
|
||||
/* == browsers consistency */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* avoid top margins on first content element */
|
||||
p,
|
||||
.p-like,
|
||||
ul,
|
||||
ol,
|
||||
dl,
|
||||
blockquote,
|
||||
pre,
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* avoid margins on nested elements */
|
||||
li p,
|
||||
li .p-like,
|
||||
li ul,
|
||||
li ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* max values */
|
||||
img,
|
||||
table,
|
||||
td,
|
||||
blockquote,
|
||||
code,
|
||||
pre,
|
||||
textarea,
|
||||
input,
|
||||
video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* margin-bottom on tables */
|
||||
table {
|
||||
margin-bottom: $medium-value;
|
||||
}
|
||||
135
sass/_02-layout.scss
Normal file
135
sass/_02-layout.scss
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
/* ----------------------------- */
|
||||
/* ==layout and modules */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* module, gains superpower "BFC" Block Formating Context */
|
||||
.mod {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* blocks that needs to be placed under floats */
|
||||
.clear,
|
||||
.line,
|
||||
.row {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* blocks that must contain floats */
|
||||
.clearfix,
|
||||
.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: $small-value;
|
||||
}
|
||||
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
|
||||
img.fr {
|
||||
margin-left: $small-value;
|
||||
}
|
||||
|
||||
img.fl,
|
||||
img.fr {
|
||||
margin-bottom: $tiny-value;
|
||||
}
|
||||
|
||||
/* 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
|
||||
*/
|
||||
|
||||
.flexbox,
|
||||
.flexbox-h,
|
||||
.flexbox-v {
|
||||
display : flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.flexbox-v {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.flexitem-fluid {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.flexitem-first {
|
||||
order : -1;
|
||||
}
|
||||
|
||||
.flexitem-medium {
|
||||
order : 0;
|
||||
}
|
||||
|
||||
.flexitem-last {
|
||||
order : 1;
|
||||
}
|
||||
|
||||
.flexitem-center {
|
||||
margin: auto;
|
||||
}
|
||||
|
|
@ -1,175 +1,151 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==classic grids */
|
||||
/* .. use it when gutter size matters */
|
||||
/* ==Grids */
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* grids inspired from SUIT https://github.com/suitcss/suit */
|
||||
// WARNING : KNACSS grids are flexbox based and only supported by IE10+
|
||||
// Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html
|
||||
// Demo : http://codepen.io/raphaelgoetter/pen/ZYjwEB
|
||||
|
||||
/* overall container of grids */
|
||||
.grid {
|
||||
overflow: hidden;
|
||||
}
|
||||
// Usage in vanilla CSS:
|
||||
// - <div class="grid-4"> for an equal fourth columns grid container
|
||||
// - <div class="grid-2-1"> for an uneven columns grid container
|
||||
|
||||
/* global styles for direct child ex. .grid3 */
|
||||
.grid > * {
|
||||
display: block;
|
||||
padding: 0;
|
||||
/* gutter value */
|
||||
// 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) / gutter (default = 1em)
|
||||
// example : .grid-perso { @include uneven-grid(2, 1, 10px); }
|
||||
|
||||
[class*="grid-"] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-left: -$gutter;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/* global styles for each "cell" */
|
||||
.grid > * > * {
|
||||
display: inline-block;
|
||||
/* gutter value */
|
||||
padding-left: $gutter;
|
||||
margin-left: 0;
|
||||
vertical-align: top;
|
||||
[class*="grid-"] > * {
|
||||
flex: 0 0 auto;
|
||||
display: block; /* IE fix */
|
||||
width: calc(100% * 1 / #{$number} - #{$gutter});
|
||||
margin-left: $gutter;
|
||||
}
|
||||
|
||||
/* whitespace fixing for modern browsers including IE9+ */
|
||||
:root .grid {
|
||||
font-size: 0;
|
||||
/* fallback for IE9+ */
|
||||
text-justify: distribute-all-lines;
|
||||
// Sass mixins for *equal* columns grid container
|
||||
// example : .grid-perso { @include grid(12); }
|
||||
@mixin grid($number:$number,$gutter:$gutter) {
|
||||
& > * {
|
||||
width: calc(100% * 1 / #{$number} - #{$gutter});
|
||||
}
|
||||
& > .flexitem-double {
|
||||
width: calc(100% * 2 / #{$number} - #{$gutter});
|
||||
}
|
||||
@media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
|
||||
& > * {
|
||||
width: calc(100% * 1 / 2 - #{$gutter});
|
||||
}
|
||||
& > .flexitem-double {
|
||||
width: calc(100% - #{$gutter});
|
||||
}
|
||||
}
|
||||
@media (max-width: $tiny-screen) {
|
||||
& > * {
|
||||
width: calc(100% - #{$gutter});
|
||||
}
|
||||
& > .flexitem-double {
|
||||
width: calc(100% - #{$gutter});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:root .grid > * > * {
|
||||
/* fallback for Opera Mini */
|
||||
font-size: $base-font-size;
|
||||
font-size: ($base-font-size / 10px) + rem;
|
||||
// Examples : will be compiled in CSS
|
||||
|
||||
.grid-2 {
|
||||
@include grid(2);
|
||||
}
|
||||
|
||||
/* Opera hack */
|
||||
.opera:-o-prefocus,
|
||||
.grid > * {
|
||||
word-spacing: -0.43em;
|
||||
.grid-3 {
|
||||
@include grid(3);
|
||||
}
|
||||
|
||||
.grid2 > * {
|
||||
width: 50%;
|
||||
.grid-4 {
|
||||
@include grid(4);
|
||||
}
|
||||
|
||||
.grid3 > * {
|
||||
width: 33.333%;
|
||||
.grid-5 {
|
||||
@include grid(5);
|
||||
}
|
||||
|
||||
.grid4 > * {
|
||||
width: 25%;
|
||||
.grid-6 {
|
||||
@include grid(6);
|
||||
}
|
||||
|
||||
.grid5 > * {
|
||||
width: 20%;
|
||||
.grid-7 {
|
||||
@include grid(7);
|
||||
}
|
||||
|
||||
.grid6 > * {
|
||||
width: 16.667%;
|
||||
.grid-8 {
|
||||
@include grid(8);
|
||||
}
|
||||
|
||||
.grid8 > * {
|
||||
width: 12.5%;
|
||||
.grid-10 {
|
||||
@include grid(10);
|
||||
}
|
||||
|
||||
.grid10 > * {
|
||||
width: 10%;
|
||||
.grid-12 {
|
||||
@include grid(12);
|
||||
}
|
||||
|
||||
.grid12 > * {
|
||||
width: 8.333%;
|
||||
// LESS mixins for *unequal* columns grid container
|
||||
// example : .grid-perso { @include uneven-grid(2, 1); }
|
||||
@mixin uneven-grid($left:$left, $right:$right, $gutter:$gutter) {
|
||||
& > *:nth-child(odd) {
|
||||
$size: ($left / ($left + $right)) * 100%;
|
||||
width: calc(#{$size} - #{$gutter});
|
||||
}
|
||||
& > *:nth-child(even) {
|
||||
$size: ($right / ($left + $right)) * 100%;
|
||||
width: calc(#{$size} - #{$gutter});
|
||||
}
|
||||
@media (max-width: $tiny-screen) {
|
||||
& > *:nth-child(n) {
|
||||
width: calc(100% - #{$gutter});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
|
||||
.grid2-1 > *:first-child,
|
||||
.grid1-2 > * + * {
|
||||
width: 66.666%;
|
||||
|
||||
// Examples : will be compiled in CSS
|
||||
|
||||
.grid-2-1 {
|
||||
@include uneven-grid(2,1);
|
||||
}
|
||||
|
||||
.grid1-2 > *:first-child,
|
||||
.grid2-1 > * + * {
|
||||
width: 33.333%;
|
||||
.grid-1-2 {
|
||||
@include uneven-grid(1,2);
|
||||
}
|
||||
|
||||
.grid1-3 > *:first-child,
|
||||
.grid3-1 > * + * {
|
||||
width: 25%;
|
||||
.grid-3-1 {
|
||||
@include uneven-grid(3,1);
|
||||
}
|
||||
|
||||
.grid3-1 > *:first-child,
|
||||
.grid1-3 > * + * {
|
||||
width: 75%;
|
||||
.grid-1-3 {
|
||||
@include uneven-grid(1,3);
|
||||
}
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ==autogrids */
|
||||
/* .. to automatically justify blocs */
|
||||
/* ---------------------------------- */
|
||||
|
||||
/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
|
||||
|
||||
/* container of autogrids */
|
||||
[class*="autogrid"] {
|
||||
text-align: justify;
|
||||
.grid-3-2 {
|
||||
@include uneven-grid(3,2);
|
||||
}
|
||||
|
||||
[class*="autogrid"]:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
.grid-2-3 {
|
||||
@include uneven-grid(2,3);
|
||||
}
|
||||
|
||||
[class*="autogrid"] > * {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
.grid-4-1 {
|
||||
@include uneven-grid(4,1);
|
||||
}
|
||||
|
||||
/* whitespace fixing for modern browsers including IE9+ */
|
||||
:root [class*="autogrid"] {
|
||||
font-size: 0;
|
||||
/* fallback for IE9+ */
|
||||
text-justify: distribute-all-lines;
|
||||
}
|
||||
|
||||
:root [class*="autogrid"] > * {
|
||||
/* fallback for Opera Mini */
|
||||
font-size: $base-font-size;
|
||||
font-size: ($base-font-size / 10px) + rem;
|
||||
}
|
||||
|
||||
/* Opera hack */
|
||||
[class*="autogrid"]:-o-prefocus {
|
||||
word-spacing: -0.43em;
|
||||
}
|
||||
|
||||
.autogrid2 > * {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
.autogrid3 > * {
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
.autogrid4 > * {
|
||||
width: 23.6%;
|
||||
}
|
||||
|
||||
.autogrid5 > * {
|
||||
width: 19%;
|
||||
}
|
||||
|
||||
.autogrid6 > * {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.autogrid8 > * {
|
||||
width: 10.8%;
|
||||
}
|
||||
|
||||
.autogrid10 > * {
|
||||
width: 9%;
|
||||
}
|
||||
|
||||
.autogrid12 > * {
|
||||
width: 6.4%;
|
||||
}
|
||||
.grid-1-4 {
|
||||
@include uneven-grid(1,4);
|
||||
}
|
||||
|
|
@ -24,7 +24,7 @@ table.table-auto {
|
|||
caption {
|
||||
padding: $small-value;
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
td,
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ label,
|
|||
font-size: inherit;
|
||||
}
|
||||
|
||||
label {
|
||||
label {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
|
|
@ -46,19 +46,6 @@ textarea {
|
|||
resize: vertical;
|
||||
}
|
||||
|
||||
/* clickable input types in iOS */
|
||||
button,
|
||||
input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
}
|
||||
|
||||
/* if select styling bugs on WebKit */
|
||||
/* select { -webkit-appearance: none; } */
|
||||
|
||||
|
|
@ -79,11 +66,14 @@ textarea:-moz-placeholder {
|
|||
color: #777;
|
||||
}
|
||||
|
||||
/* Removes inner padding and border in FF3+ */
|
||||
button::-moz-focus-inner,
|
||||
input[type='button']::-moz-focus-inner,
|
||||
input[type='reset']::-moz-focus-inner,
|
||||
input[type='submit']::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
.btn:focus,
|
||||
input:focus,
|
||||
button:focus {
|
||||
outline: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background-image: none;
|
||||
}
|
||||
|
|
|
|||
296
sass/_06-helpers.scss
Normal file
296
sass/_06-helpers.scss
Normal file
|
|
@ -0,0 +1,296 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==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: $small-value;
|
||||
}
|
||||
|
||||
.mam {
|
||||
margin: $medium-value;
|
||||
}
|
||||
|
||||
.mal {
|
||||
margin: $large-value;
|
||||
}
|
||||
|
||||
.pas {
|
||||
padding: $small-value;
|
||||
}
|
||||
|
||||
.pam {
|
||||
padding: $medium-value;
|
||||
}
|
||||
|
||||
.pal {
|
||||
padding: $large-value;
|
||||
}
|
||||
|
||||
.mtn,
|
||||
.mt0 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.mts {
|
||||
margin-top: $small-value;
|
||||
}
|
||||
|
||||
.mtm {
|
||||
margin-top: $medium-value;
|
||||
}
|
||||
|
||||
.mtl {
|
||||
margin-top: $large-value;
|
||||
}
|
||||
|
||||
.mrn,
|
||||
.mr0 {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.mrs {
|
||||
margin-right: $small-value;
|
||||
}
|
||||
|
||||
.mrm {
|
||||
margin-right: $medium-value;
|
||||
}
|
||||
|
||||
.mrl {
|
||||
margin-right: $large-value;
|
||||
}
|
||||
|
||||
.mbn,
|
||||
.mb0 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.mbs {
|
||||
margin-bottom: $small-value;
|
||||
}
|
||||
|
||||
.mbm {
|
||||
margin-bottom: $medium-value;
|
||||
}
|
||||
|
||||
.mbl {
|
||||
margin-bottom: $large-value;
|
||||
}
|
||||
|
||||
.mln,
|
||||
.ml0 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.mls {
|
||||
margin-left: $small-value;
|
||||
}
|
||||
|
||||
.mlm {
|
||||
margin-left: $medium-value;
|
||||
}
|
||||
|
||||
.mll {
|
||||
margin-left: $large-value;
|
||||
}
|
||||
|
||||
.ptn,
|
||||
.pt0 {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.pts {
|
||||
padding-top: $small-value;
|
||||
}
|
||||
|
||||
.ptm {
|
||||
padding-top: $medium-value;
|
||||
}
|
||||
|
||||
.ptl {
|
||||
padding-top: $large-value;
|
||||
}
|
||||
|
||||
.prn,
|
||||
.pr0 {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.prs {
|
||||
padding-right: $small-value;
|
||||
}
|
||||
|
||||
.prm {
|
||||
padding-right: $medium-value;
|
||||
}
|
||||
|
||||
.prl {
|
||||
padding-right: $large-value;
|
||||
}
|
||||
|
||||
.pbn,
|
||||
.pb0 {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.pbs {
|
||||
padding-bottom: $small-value;
|
||||
}
|
||||
|
||||
.pbm {
|
||||
padding-bottom: $medium-value;
|
||||
}
|
||||
|
||||
.pbl {
|
||||
padding-bottom: $large-value;
|
||||
}
|
||||
|
||||
.pln,
|
||||
.pl0 {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.pls {
|
||||
padding-left: $small-value;
|
||||
}
|
||||
|
||||
.plm {
|
||||
padding-left: $medium-value;
|
||||
}
|
||||
|
||||
.pll {
|
||||
padding-left: $large-value;
|
||||
}
|
||||
371
sass/_07-responsive.scss
Normal file
371
sass/_07-responsive.scss
Normal file
|
|
@ -0,0 +1,371 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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 */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------------------------------- */
|
||||
/* ==Responsive medium */
|
||||
/* ---------------------------------- */
|
||||
|
||||
@media (min-width: ($small-screen + 1)) and (max-width: $medium-screen) {
|
||||
|
||||
/* 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: ($tiny-screen + 1)) and (max-width: $small-screen) {
|
||||
|
||||
/* 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: $tiny-screen) {
|
||||
|
||||
/* quick small resolution reset */
|
||||
.mod,
|
||||
.col,
|
||||
fieldset {
|
||||
display: block !important;
|
||||
float: none !important;
|
||||
clear: none !important;
|
||||
width: auto !important;
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.flexbox {
|
||||
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 !important;
|
||||
width: auto !important;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
93
sass/_08-print.scss
Normal file
93
sass/_08-print.scss
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
/* quick print reset */
|
||||
@media print {
|
||||
* {
|
||||
background: transparent !important;
|
||||
box-shadow: none !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
width: auto !important;
|
||||
margin: auto !important;
|
||||
font-family: serif;
|
||||
font-size: 12pt;
|
||||
background-color: #fff !important;
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
p,
|
||||
.p-like,
|
||||
h1,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
h4,
|
||||
.h4-like,
|
||||
h5,
|
||||
.h5-like,
|
||||
h6,
|
||||
.h6-like,
|
||||
blockquote,
|
||||
ul,
|
||||
ol {
|
||||
color: #000 !important;
|
||||
margin: auto !important;
|
||||
}
|
||||
|
||||
.print {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* no orphans, no widows */
|
||||
p,
|
||||
.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,
|
||||
.h1-like,
|
||||
h2,
|
||||
.h2-like,
|
||||
h3,
|
||||
.h3-like,
|
||||
caption {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000 !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
/* displaying URLs */
|
||||
a[href]::after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
a[href^="javascript:"]::after,
|
||||
a[href^="#"]::after {
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
55
sass/_09-misc.scss
Normal file
55
sass/_09-misc.scss
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
/* ----------------------------- */
|
||||
/* ==misc rules */
|
||||
/* ----------------------------- */
|
||||
|
||||
/* styling skip links */
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Google Gmap3 bug fix on images */
|
||||
.gm-style img {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
:not(.gm-style) img {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.gm-style img,
|
||||
.gmnoscreen img,
|
||||
.gmnoprint img {
|
||||
max-width: none !important;
|
||||
}
|
||||
139
sass/_10-styling.scss
Normal file
139
sass/_10-styling.scss
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding:2px 4px;
|
||||
background: #ff0;
|
||||
}
|
||||
|
||||
sup,
|
||||
sub {
|
||||
vertical-align: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
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,
|
||||
.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;
|
||||
}
|
||||
|
||||
/* alternate tables */
|
||||
.table-alternate {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.table-alternate tbody {
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.table-alternate thead tr > * + * {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
.table-alternate tbody tr > * + * {
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* alternate-vert tables */
|
||||
.table-alternate-v {
|
||||
border: 0;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.table-alternate-v tr > :first-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.table-alternate-v tr > * + * {
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
/* striped tables */
|
||||
.table-striped tbody tr:nth-child(odd) {
|
||||
background: #eee;
|
||||
background: rgba(0, 0, 0, .05);
|
||||
}
|
||||
|
||||
/* striped-vert tables */
|
||||
.table-striped-v tr > :first-child {
|
||||
background: #eee;
|
||||
background: rgba(0, 0, 0, .05);
|
||||
}
|
||||
302
sass/_11-wordpress.scss
Normal file
302
sass/_11-wordpress.scss
Normal file
|
|
@ -0,0 +1,302 @@
|
|||
/* ----------------------------- */
|
||||
/* ==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;
|
||||
}
|
||||
|
|
@ -1,23 +1,28 @@
|
|||
// Sass config file
|
||||
// (you should comment this line and move config file from vendor/knacss folder to your own folder)
|
||||
// -----------------
|
||||
|
||||
// (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
|
||||
|
||||
// Sass base styles
|
||||
@import "_01-base";
|
||||
@import "_01b-base"; // reset and basic styles
|
||||
|
||||
// Sass files : chose the ones you need
|
||||
@import "_02-helpers"; // width and spacers visually classes
|
||||
@import "_03-grids"; // grids and autogrids
|
||||
@import "_04-tables";
|
||||
@import "_05-forms";
|
||||
@import "_06-icons"; // UTF-8 icons
|
||||
@import "_07-flexbox";
|
||||
@import "_08-rwd"; // Responsive Web Design helpers
|
||||
@import "_09-print";
|
||||
@import "_10-booleans"; // skip links and hyphens
|
||||
@import "_11-gmaps"; // Google maps bugs fix
|
||||
@import "_12-ie"; // IE6, IE7, IE8 support
|
||||
@import "_13-styling"; // minor stylings
|
||||
@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 */
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue