modifs de .flexbox-v et .flexbox-h
This commit is contained in:
parent
fbd1d829d5
commit
95e8334fee
5 changed files with 34 additions and 25 deletions
23
README.md
23
README.md
|
@ -6,26 +6,35 @@ KNACSS, c'est un peu comme une feuille de style CSS "reset" sur-vitaminée qui p
|
||||||
|
|
||||||
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 !
|
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 !
|
||||||
|
|
||||||
is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects.
|
|
||||||
|
|
||||||
Conçu par l'agence web [Alsacreations.fr](http://alsacreations.fr) et pensé pour être employé 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.
|
Conçu par l'agence web [Alsacreations.fr](http://alsacreations.fr) et pensé pour être employé 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
|
## Installation
|
||||||
|
|
||||||
La version courte est "il n'y a rien à installer".
|
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._
|
||||||
|
|
||||||
|
## 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 :
|
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">
|
<link rel="stylesheet" href="knacss.css">
|
||||||
|
|
||||||
You can also install KNACSS with [Bower](http://bower.io/) : ```bower install knacss```
|
Il est également possible de l'installer (toutes versions) via [Bower](http://bower.io/) : ```bower install knacss```
|
||||||
|
|
||||||
… Or you can also choose the KNACSS Builder : http://knacss.com/builder/
|
## 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.
|
||||||
|
|
||||||
## Usage
|
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.
|
||||||
|
|
||||||
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
|
## Préprocesseurs
|
||||||
|
|
||||||
|
|
|
@ -319,7 +319,7 @@ body > script {
|
||||||
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||||
*/
|
*/
|
||||||
.flexbox,
|
.flexbox,
|
||||||
.flexbox-v {
|
.flexbox-h {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
|
@ -327,19 +327,19 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||||
-webkit-flex-wrap: wrap;
|
-webkit-flex-wrap: wrap;
|
||||||
-ms-flex-wrap: wrap;
|
-ms-flex-wrap: wrap;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
-webkit-box-orient: vertical;
|
|
||||||
-webkit-box-direction: normal;
|
|
||||||
-webkit-flex-direction: column;
|
|
||||||
-ms-flex-direction: column;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.flexbox-h {
|
|
||||||
-webkit-box-orient: horizontal;
|
-webkit-box-orient: horizontal;
|
||||||
-webkit-box-direction: normal;
|
-webkit-box-direction: normal;
|
||||||
-webkit-flex-direction: row;
|
-webkit-flex-direction: row;
|
||||||
-ms-flex-direction: row;
|
-ms-flex-direction: row;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
.flexbox-v {
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-box-direction: normal;
|
||||||
|
-webkit-flex-direction: column;
|
||||||
|
-ms-flex-direction: column;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
.flexitem-fluid {
|
.flexitem-fluid {
|
||||||
-webkit-box-flex: 1;
|
-webkit-box-flex: 1;
|
||||||
-webkit-flex: 1;
|
-webkit-flex: 1;
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -103,14 +103,14 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.flexbox,
|
.flexbox,
|
||||||
.flexbox-v {
|
.flexbox-h {
|
||||||
display : flex;
|
display : flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexbox-h {
|
.flexbox-v {
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexitem-fluid {
|
.flexitem-fluid {
|
||||||
|
|
|
@ -103,14 +103,14 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.flexbox,
|
.flexbox,
|
||||||
.flexbox-v {
|
.flexbox-h {
|
||||||
display : flex;
|
display : flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexbox-h {
|
.flexbox-v {
|
||||||
flex-direction: row;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flexitem-fluid {
|
.flexitem-fluid {
|
||||||
|
|
Loading…
Reference in a new issue