mrrayures / frontend-starter Goto Github PK

je n'ai pas réussi à faire fonctionner le webp
voici le message d'errreur :

$ gulp webp [11:54:15] Using gulpfile D:xxx\gulpfile.js
[11:54:15] Starting 'webp'...
[11:54:16] 'webp' errored after 235 ms
[11:54:16] ReferenceError: gulp is not defined
at webp (D:xxx\gulpfile.js:227:11)
at taskWrapper (D:xxx\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:301:14)
at runBound (domain.js:314:12)
at asyncRunner (D:xxx\node_modules\async-done\index.js:55:18)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickCallback (internal/process/next_tick.js:180:9)

pour integrer jquery à mon projet , j'ai du mettre le dossier jquery dans vendor, sinon en mettant jquery.min à la racine de vendor la compilation se faisait mal -->erreur

j'ai ajouté ça

.u-fs13{font-size:1.3rem}
.u-fs14{font-size:1.4rem}
.u-fs16{font-size:1.6rem}
.u-fs18{font-size:1.8rem}
.u-fs20{font-size:2.0rem}

@each $size , $bp in (lg, $large),
(md, $medium),
(sm, $small) {
@include mq(#{$bp}) {
.u-fs13@#{$size} {font-size:1.3rem; }
.u-fs14@#{$size} {font-size:1.4rem; }
.u-fs15@#{$size} {font-size:1.5rem; }
.u-fs16@#{$size} {font-size:1.6rem; }
.u-fs17@#{$size} {font-size:1.7rem; }
.u-fs18@#{$size} {font-size:1.8rem; }
}
}

Describe the bug
attention il reste un "m-grid" à la place de "o-grid"

pour le probleme sur les icone svg en local ou sur serveur, on peux corriger sur sprite-svg.html en supprimant le premier /

{% if svg.title %}
<title class="u-sr-only">{{svg.title}}</title>
{% endif %}

pb avec vendor.js surement
pour éviter ça directement ajouter le dosssier dans le dist/js

retirer - 0.01px à chaque calcul de width sur les col

je propose ça

/-----------------------------------------------------------------------------------------------------
[utilities:spacing]
-------------------------------------------------------------------------------------------------------/

/*

• Spacing : Margin & padding
• Default $spacing : 0.8rem > 8px;
• Edit : Change global '$spacing' in settings/_global
  /
  @each $size , $size_value in (xs , $spacing/2),
  (sm , $spacing),
  (md , $spacing2),
  (lg , $spacing4),
  (xlg, $spacing8),
  (xxlg, $spacing12),
  (xxxlg, $spacing16),
  (auto, auto),
  (none, 0) {
  .u-mt-#{$size} { margin-top: $size_value; }
  .u-mr-#{$size} { margin-right: $size_value; }
  .u-mb-#{$size} { margin-bottom: $size_value; }
  .u-ml-#{$size} { margin-left: $size_value; }
  .u-m-#{$size} { margin: $size_value; }
  .u-mt-neg-#{$size} { margin-top: -$size_value; }
  .u-mr-neg-#{$size} { margin-right: -$size_value; }
  .u-mb-neg-#{$size} { margin-bottom: -$size_value; }
  .u-ml-neg-#{$size} { margin-left: -$size_value; }
  .u-m-neg-#{$size} { margin: -$size_value; }
  .u-pt-#{$size} { padding-top: $size_value; }
  .u-pr-#{$size} { padding-right: $size_value; }
  .u-pb-#{$size} { padding-bottom: $size_value; }
  .u-pl-#{$size} { padding-left: $size_value; }
  .u-p-#{$size} { padding: $size_value; }
  }

@each $screensize , $bp in (lg, $large),
(md, $medium),
(sm, $small) {
@include mq(#{$bp}) {
@each $size , $size_value in (xs , $spacing/2),
(sm , $spacing),
(md , $spacing2),
(lg , $spacing3),
(xlg, $spacing4),
(xxlg, $spacing5),
(xxxlg, $spacing*6),
(auto, auto),
(none, 0) {
.u-mt-#{$size}@#{$screensize} { margin-top: $size_value; }
.u-mr-#{$size}@#{$screensize} { margin-right: $size_value; }
.u-mb-#{$size}@#{$screensize} { margin-bottom: $size_value; }
.u-ml-#{$size}@#{$screensize} { margin-left: $size_value; }
.u-m-#{$size}@#{$screensize} { margin: $size_value; }
.u-mt-neg-#{$size}@#{$screensize} { margin-top: -$size_value; }
.u-mr-neg-#{$size}@#{$screensize} { margin-right: -$size_value; }
.u-mb-neg-#{$size}@#{$screensize} { margin-bottom: -$size_value; }
.u-ml-neg-#{$size}@#{$screensize} { margin-left: -$size_value; }
.u-m-neg-#{$size}@#{$screensize} { margin: -$size_value; }
.u-pt-#{$size}@#{$screensize} { padding-top: $size_value; }
.u-pr-#{$size}@#{$screensize} { padding-right: $size_value; }
.u-pb-#{$size}@#{$screensize} { padding-bottom: $size_value; }
.u-pl-#{$size}@#{$screensize} { padding-left: $size_value; }
.u-p-#{$size}@#{$screensize} { padding: $size_value; }
}
}
}

j'ai mis un fichier sprite-svg.html dans styleguide/component

{% if svg.title %}
<title class="u-sr-only">{{svg.title}}</title>
{% endif %}


et dans icons.html j'appelle {% include "styleguide/components/sprite-svg.html" %}

les liens absolu ne marche pas donc j'ai mis devant chaque lien
{% if css_sub_folder %}../{% endif %}styleguide/moncfichier.html

si on met

le mixin ajoute un espace de trop avant les "::placeholder"
je n'ai pas réussi à resoudre le problème