Cipher Bliss

Mot-clé - front-end

Fil des billets - Fil des commentaires

mardi 29 mars 2016

gulpifie ton prestashop

<p>Vous êtes dev front end et aimeriez avoir du livereload quand vous bossez sur un thème prestashop? Gulpifiez votre prestashop! &nbsp;(ou en fait non, fuyez tant qu'il en est encore temps)</p> <p>dans votre terminal favori, dans la racine de votre projet prestashop faites ceci: Installons localement gulp et browser-sync avec node package manager:</p> <p>&nbsp;npm i --save-dev gulp browser-sync</p> <p>ça mouline quelques temps, ensuite créez un fichier Gulpfile.js toujours à la racine de votre projet et remplissez le de ceci:</p> <pre><code>/**

gulpify script of tykayn
https://github.com/tykayn/blog.artlemoine.com
http://artlemoine.com
to run this you need bash to install dependencies:
npm i -D gulp browser-sync --save-dev;
gulp
**/

var serverName = 'latrotteuse.lan'; // you NEED to have a vhost of this name setup var gulp = require('gulp'); var browserSync = require('browser-sync');

// Static server. gulp.task('browser-sync', function () {

   // init server
   browserSync.init({
       proxy: serverName + "/"
   });
   // the server will automatically reload on change
   var filesToWatch = ["themes/**/*.tpl",
       "themes/**/*.js",
       "themes/**/*.css",
       "themes/**/*.html",
       "src/**/*.php"];
   gulp.watch(filesToWatch)
     .on('change', browserSync.reload);

});

gulp.task('default', 'browser-sync'); </code></pre> il vous faudra définir un virtual host pour que ça fonctionne. on a donc un fichier minimal, avec une tâche par défaut qui lance un serveur web local sur le port 3000 et qui recharge le browser à la modification d'un fichier dans le répertoire de thèmes. wouala, enjoyez!&lt;/span&gt; &lt;/pre&gt;</p>

mercredi 22 juillet 2015

les couleurs de la RATP dans SASS

si vous avez dans l'idée de faire un petit projet web incluant les couleurs des lignes de métro / RER / Tram parisien, voici les codes couleurs choppées à coup de pipette (on peut aussi trouver ces codes hexadécimaux sur wikipedia). Vous pouvez les utiliser dans votre css avec ces variables faites pour le language de preprocessing SASS.

Vous pouvez voir ce que donnent les compilations sass en ligne et vous exercer sur sassmeister.com

/**variables for lines colors**/ $metro_1: #fdce00; $metro_2: #0267af; $metro_3: #a1971b; $metro_3BIS: #96d7dd; $metro_4: #b74288; $metro_5: #de8b53; $metro_6: #79bb92; $metro_7: #e8a8b8; $metro_7BIS: #7cc485; $metro_8: #cfa9d0; $metro_9: #cec92b; $metro_10: #dfb039; $metro_11: #8e6538; $metro_12: #328e5b; $metro_13: #a0cccb; $metro_14: #612684; $tram_1: #0564b1; $tram_2: #c74896; $tram_3: #90613b; $tram_3a: #90613b; $tram_3b: #ec8a42; $tram_4: #fcc11b; $tram_5: #0564b1; $tram_6: #ec5738; $tram_7: #90613b; $tram_8: #999738; $rer_a: #cf532e; $rer_b: #5191cd;

ensuite il vous faudra des classes pour appliquer ces couleurs sur vos lignes.

/** metros**/ .metro_1 { background: $metro_1 !important; } .metro_2 { background: $metro_2; } .metro_3 { background: $metro_3; } .metro_3BIS { background: $metro_3BIS; } .metro_4 { background: $metro_4; } .metro_5 { background: $metro_5; } .metro_6 { background: $metro_6; } .metro_7 { background: $metro_7; } .metro_7BIS { background: $metro_7BIS; } .metro_8 { background: $metro_8; } .metro_9 { background: $metro_9; } .metro_10 { background: $metro_10; } .metro_11 { background: $metro_11; } .metro_12 { background: $metro_12; } .metro_13 { background: $metro_13; } .metro_13BIS { background: $metro_13; } .metro_14 { background: $metro_14; } /** trams **/ .tram_1 { color: $tram_1; border: solid 3px $tram_1; } .tram_2 { color: $tram_2; border-color: $tram_2; } .tram_3 { color: $tram_3; border-color: $tram_3; } .tram_4 { color: $tram_4; border-color: $tram_4; } .tram_5 { color: $tram_5; border-color: $tram_5; } .tram_6 { color: $tram_6; border-color: $tram_6; } .tram_7 { color: $tram_7; border-color: $tram_7; } .tram_8 { color: $tram_8; border-color: $tram_8; } Et si vous voulez personnaliser tout ça dans un mixin pour choisir que colorer avec vos variables, c'i possible!
Admettons que, comme ci dessus l'on veuille une classe pour chaque ligne afin de colorer une bordure.
Pour ça on va utiliser des tableaux associatifs(clé: valeur), sta dire des maps,
et des tableaux non associatifs, des listes (élément1, élément2).
On définit une map de famille de transport (métro, tram, rer), puis une couleur pour chaque ligne.
Puis on définit notre @mixin qui fait une classe avec bordure correspondante.
grâce à l'interpolation de variable on peut faire des noms de classe css (et d'autres choses) dynamiques.
exemple:
$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; }
Allez donc voir les quelques fonctions existantes sur les maps. Ici on se servira uniquement de celle qui retourne la valeur pour une clé donnée.
Avec @each on va parcourir notre map et créer des classes en conséquence avec notre mixin, appelé par la directive @include.
Ensuite si on veut que nos classes soient différentes pour les métros et les trams on a plus qu'a faire un autre mixin, et voilà!
// variables de couleurs $metro_1: #fdce00; $metro_2: #0267af; $metro_3: #a1971b; $metro_3BIS: #96d7dd; $metro_4: #b74288; $metro_5: #de8b53; $metro_6: #79bb92; $metro_7: #e8a8b8; $metro_7BIS: #7cc485; $metro_8: #cfa9d0; $metro_9: #cec92b; $metro_10: #dfb039; $metro_11: #8e6538; $metro_12: #328e5b; $metro_13: #a0cccb; $metro_14: #612684; $tram_1: #0564b1; $tram_2: #c74896; $tram_3: #90613b; $tram_3a: #90613b; $tram_3b: #ec8a42; $tram_4: #fcc11b; $tram_5: #0564b1; $tram_6: #ec5738; $tram_7: #90613b; $tram_8: #999738; $rer_a: #cf532e; $rer_b: #5191cd; // maps de couleurs $metro_colors: ( '1' : $metro_1, '2': $metro_2, '3':$metro_3, // etc ); $tram_colors: ( '1' : $tram_1, '2': $tram_2, // etc ); $rer_colors: ('a' : $rer_a, 'b': $rer_b); // map de famille $sisi_la_famille: ( 'metro' : $metro_colors, 'tram' : $tram_colors, 'rer' : $rer_colors, ); // mettre une bordure à gauche selon la famille et le numéro de ligne @mixin lineBorder($famille,$nom) { $famille_map: map-get($sisi_la_famille, $famille); .#{$famille}_#{$nom} { border-left: 3px solid map-get($famille_map, $nom); } } // faire un style différent pour les trams @mixin tram($nom,$color) { .tram_#{$nom} { color: $color; border-color: $color; } } @warn "yeah"; // boucle-ception @each $famille, $list in $sisi_la_famille { @each $key, $val in $list { // traitement différent pour les trams @if ($famille == 'tram') { @include tram($key, $val); } @else { @include lineBorder($famille, $key); } } }
Enjoy!