var Phenix = function () {
Troll du Web depuis 1996

Foundation

Un fichier sourcemap SASS pour Foundation

Un de mes collègues a trouvé une solution pour avoir un fichier source map quand on compile Foundation.

Son fichier fait d’autres trucs, je n’ai extrait que la partie source map.

On commence par installer gulp-sourcemap :

  1. npm install gulp-sourcemaps --save-dev

Ensuite on adapte le fichier gulpfile.js pour qu’il génère le sourcemap :

  1. var gulp = require('gulp');
  2. var $ = require('gulp-load-plugins')();
  3.  
  4. var sassPaths = [
  5. 'bower_components/foundation-sites/scss',
  6. 'bower_components/motion-ui/src'
  7. ];
  8.  
  9. gulp.task('sass', function() {
  10. return gulp.src('scss/app.scss')
  11. .pipe($.sourcemaps.init())
  12. .pipe($.sass({
  13. includePaths: sassPaths,
  14. outputStyle: 'compressed' // if css compressed **file size**
  15. }).on('error', $.sass.logError))
  16. .pipe($.autoprefixer({
  17. browsers: ['last 2 versions', 'ie >= 9']
  18. }))
  19. .pipe($.sourcemaps.write('../css'))
  20. .pipe(gulp.dest('css'));
  21. });
  22.  
  23. gulp.task('default', ['sass'], function() {
  24. gulp.watch(['scss/**/*.scss'], ['sass']);
  25. });

Menu responsive avec foundation

Depuis la version 6 du framework SASS/CSS Foundation, le composant qui sert à créer le menu principal du site, à savoir la « top bar » n’est plus un menu responsif « out of the box ».

C’est a vous d’en construire un avec les composants, comme l’explique la documentation.

Voici une structure html qui devrait couvrir la majorité des besoins. N’ont pas que c’est bien compliqué à réaliser, mais j’en ai marre de la refaire encore et toujours.

  1. <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  2. <button class="menu-icon" type="button" data-toggle></button>
  3. <div class="title-bar-title">Menu</div>
  4. </div>
  5. <div class="top-bar" id="main-menu">
  6. <div class="top-bar-left">
  7. <ul class="vertical medium-horizontal menu dropdown" data-responsive-menu="drilldown medium-dropdown" data-parent-link="true">
  8. <li>
  9. <a href="#">Lien</a>
  10. <ul class="menu vertical">
  11. <li>
  12. <a href="">Lien</a>
  13. <ul class="menu vertical">
  14. <li>
  15. <a href="">Lien</a>
  16. </li>
  17. <li>
  18. <a href="">Lien</a>
  19. </li>
  20. <li>
  21. <a href="">Lien</a>
  22. </li>
  23. </ul>
  24. </li>
  25. <li>
  26. <a href="">Lien</a>
  27. </li>
  28. <li>
  29. <a href="">Lien</a>
  30. </li>
  31. </ul>
  32. </li>
  33. <li><a href="#">Lien</a></li>
  34. <li><a href="#">Lien</a></li>
  35. <li><a href="#">Lien</a></li>
  36. <li><a href="#">Lien</a></li>
  37. <li><a href="#">Lien</a></li>
  38. </ul>
  39. </div>
  40. </div>

Foundation

Foundation est un framework CSS et Javascript très complet pour réaliser des sites sur une grille propre et homogène. Mais surtout, il permet de rendre un site responsive très facilement !

Ce plugin ajoute le framework Foundation sur l’espace public de SPIP. Les éléments Javascripts sont désactivés par défaut.