modifs de .flexbox-v et .flexbox-h

This commit is contained in:
raphaelgoettter 2015-03-06 16:22:20 +01:00
parent fbd1d829d5
commit 95e8334fee
5 changed files with 34 additions and 25 deletions

View file

@ -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```
&hellip; 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 doesnt always suit beginners needs since a little thing can have big consequences.
## Préprocesseurs ## Préprocesseurs

View file

@ -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

View file

@ -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 {

View file

@ -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 {