Commit fe3fa288 authored by Stéphane Bouvry's avatar Stéphane Bouvry
Browse files

Support de formation suite

parent ae92ccaf

.gitignore

+1 −0
Original line number Diff line number Diff line
@@ -2,3 +2,4 @@ node_modules 
dist

src/**/*.html

**.*~

.idea

gulpfile.js

+71 −16
Original line number Diff line number Diff line 
var gulp = require('gulp'),

    shell = require('gulp-shell'),

    sass = require('gulp-sass'),

    fs = require('fs'),

    exec = require('child_process').exec;





var src = './src/',

    articles = src +'articles/'

    articles = src + 'articles/';



gulp.task('default', function(){

gulp.task('articles', function () {

    if (!fs.existsSync('dist/articles')) fs.mkdirSync('dist/articles');

    gulp.src(articles + '**/*.md', {read: false})

        .pipe(shell(

      ['pandoc --template=./src/templates/unicaen.html --standalone <%= file.path %> -o <%= f(file.path) %>'],

            ['pandoc --template=./src/templates/article.html --standalone <%= file.path %> -o <%= f(file.path) %>'],

            {

                templateData: {

                    f: function (s) {

            return s.replace(/\.md/, '.html')

                        return s.replace(/\.md/, '.html').replace(/src\//, 'dist/');

                    }

                }

            }

        ))

});



gulp.task('watch', function(){

  gulp.watch('src/articles/**/*.md', ['default']);

  gulp.watch('src/templates/unicaen.html', ['default']);

gulp.task('images', function () {

    gulp.src('src/images/**.*')

        .pipe(gulp.dest('dist/images'))

});



gulp.task('slides', function () {

  if (!fs.existsSync('dist/slides')) fs.mkdirSync('dist/slides');

  gulp.src('./src/slides/*.md', {read: false})

      .pipe(shell(

          ['pandoc --variable revealjs-url="../libs/reveal.js" --template=src/templates/slide.html --standalone --section-divs --variable theme="simple" --variable transition="default" -s -i -t revealjs <%= file.path %> -o <%= f(file.path) %>'],

          {

              templateData: {

                  f: function (s) {

                      return s.replace(/\.md/, '.html').replace(/src\//, 'dist/');

                  }

              }

          }

      ))

  //pandoc -t revealjs -s -o myslides.html myslides.md -V revealjs-url=http://lab.hakim.se/reveal-js

});



gulp.task('index', function () {

    gulp.src('src/*.md', {read: false})

        .pipe(shell(

            ['pandoc --template=./src/templates/index.html --standalone <%= file.path %> -o <%= f(file.path) %>'],

            {

                templateData: {

                    f: function (s) {

                        return s.replace(/\.md/, '.html').replace(/src\//, 'dist/');

                    }

                }

            }

        ))

});





gulp.task('sass', function () {

    gulp.src('src/styles/**/*.scss')

    //.pipe(cached('sass'))

        .pipe(sass())

        .pipe(gulp.dest('dist/styles'));

});





gulp.task('default', ['articles', 'slides', 'index', 'images', 'sass']);



gulp.task('watch', ['default'], function () {

    gulp.watch('src/slides/*.md', ['slides']);

    gulp.watch('src/templates/slide.html', ['slides']);

    gulp.watch('src/index.md', ['index']);

    gulp.watch('src/templates/index.html', ['index']);

    gulp.watch('src/articles/*.md', ['articles']);

    gulp.watch('src/templates/article.html', ['articles']);

    gulp.watch('src/styles/*.scss', ['sass']);

    gulp.watch('src/images/*.*', ['images']);

})

package.json

+2 −1
Original line number Diff line number Diff line
@@ -14,6 +14,7 @@ 
    "gulp-shell": "^0.6.5"

  },

  "dependencies": {

    "gulp-md-docs": "^0.1.8"

    "gulp-md-docs": "^0.1.8",

    "gulp-sass": "^4.0.1"

  }

}

src/articles/integration-web/css3-flexbox.md→src/articles/css3-flexbox.md

+13 −13
Original line number Diff line number Diff line
@@ -47,7 +47,7 @@ de rendre le résultat plus 'visuel' */ 
```



Ce qui donne :

![Rendu de base](../../images/css3-flexbox-rendu-001.png)

![Rendu de base](../images/css3-flexbox-rendu-001.png)



## Les bases
@@ -62,7 +62,7 @@ Le modèle de boîte doit s'activer **sur l'élément conteneur** (celui qui con 
}

```



![Rendu avec la valeur flex](../../images/css3-flexbox-rendu-002.png)

![Rendu avec la valeur flex](../images/css3-flexbox-rendu-002.png)



La valeur `inline-flex` ajoute un compotement **inline** au conteneur :
@@ -73,7 +73,7 @@ La valeur `inline-flex` ajoute un compotement **inline** au conteneur : 
}

```



![Rendu avec la valeur flex](../../images/css3-flexbox-rendu-003.png)

![Rendu avec la valeur flex](../images/css3-flexbox-rendu-003.png)



L'activation des *flexbox* se déclenche en utilisant les valeurs :
@@ -107,7 +107,7 @@ A noter que la valeur `column-reverse` justify les éléments en bas du conteneu 
  height: 250px;

}

```

![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-004.png)

![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-004.png)



### Réorganiser les éléments avec `order`
@@ -121,7 +121,7 @@ La propriété `order` permet de modifier l'ordre d'affichage d'un élément sp 
    order: -1;

}

```

![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-005.png)

![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-005.png)



Vous pouvez ainsi complètement modifier la disposition des éléments dans le conteneur.
@@ -143,7 +143,7 @@ Ajouter un peu de contenu dans les éléments HTML : 


Puis réduisez la largeur de la fenêtre en largeur, vous verrez le contenu disparaître vers la droite : 



![Sans flex-wrap, le contenu dépasse sur la droite](../../images/css3-flexbox-rendu-006.png)

![Sans flex-wrap, le contenu dépasse sur la droite](../images/css3-flexbox-rendu-006.png)



La propriétés `flex-wrap` (*nowrap*, `wrap`, `wrap-reverse`) va forcer la *flexbox* à adapter l'embalage.
@@ -155,7 +155,7 @@ La valeur `wrap` va autoriser la flexbox à ajouter des lignes (ou des colonnes) 
  flex-wrap: wrap;

}

```

![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-007.png)

![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-007.png)



La valeur wrap-reverse inverse la disposition des lignes.
@@ -194,7 +194,7 @@ En mettant la valeur 1 à tout les éléments, la *flexbox* va recalculer la lar 
  flex-grow: 1;

}

```

![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-008.png)

![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-008.png)



En jouant sur la largeur de la fenêtre, vous verrez la largeur des éléments s'adapter en fonction de l'espace disponible. Vous pouvez constater que la largeur est identique pour chaques éléments, peut importe son contenu.
@@ -218,7 +218,7 @@ Vous pouvez ensuite jouer avec la valeur de `flex-grow` (qui doit être un entie 
}

```



![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-009.png)

![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-009.png)



Pour observer le résultat avec un direction en colonne avec `flex-direction:column`, pensez à ajouter une hauteur au conteneur :
@@ -241,7 +241,7 @@ Pour observer le résultat avec un direction en colonne avec `flex-direction:col 
  flex-grow: 0;

}

```

![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-010.png)

![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-010.png)



### Taille initale avec flex-basis
@@ -263,7 +263,7 @@ Par exemple, nous pouvons indiquer comme largeur optimale 200px, et interdire le 
    flex-basis: 200px;

}

```

![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-011.png)

![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-011.png)



En jouant sur la largeur de la fenêtre, vous constaterez que la zone orange peut rétrécir, mais ne dépasse pas les 200 pixels en largeur lorsque l'on élargi la fenêtre.
@@ -287,7 +287,7 @@ La propriétés `flex-shrink`permet quand à elle de configurer le rétrécissem 
}

```



![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-012.png)

![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-012.png)



### Forme compacte avec `flex`
@@ -303,7 +303,7 @@ La propriété `justify-content` permet de définir la façon ton les éléments 


Petit récap des valeurs possibles : 



![Rendu de column-reverse avec une hauteur fixée](../../images/css3-flexbox-rendu-013.png)

![Rendu de column-reverse avec une hauteur fixée](../images/css3-flexbox-rendu-013.png)



##### flex-start

src/articles/index.md

deleted100644 → 0
+0 −13
Original line number Diff line number Diff line 
# Note de développement



## Intégration web



 - [Présentation des technologies du web](integration-web/presentation-html5.html)

 - [Première page web](integration-web/premiere-page-web.html)

 - [Structurer du contenu avec HTML](integration-web/structurer-avec-html.html)

 - [Les bases du CSS](integration-web/introduction-au-css.html)

 - [Mise en forme CSS](integration-web/mise-en-forme-css.html)

 - [Modèle de boîte](integration-web/modele-de-boite.html)

 - [Mise en page avec FLOAT](integration-web/mise-en-page-float.html)

 - [Mise en page avec les **Flexbox**](integration-web/css3-flexbox.html)

 - [Design réactif : Responsive Design](integration-web/responsive-design.html)