Source: Set twig variable to json file as an include.
Fichier _data/test.json:
|
1 |
{ "name":"John", "age":30, "car":null } |
Fichier template.twig:
|
1 2 3 4 5 6 7 |
{% set json %} {% include "_data/test.json" %} {% endset %} [...] <h1>{{ json }}</h1> |
Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0). Source principale: TWIG + WEBPACK sur dgrigg.com (version PDF).
Les fichiers assets source à placer à la racine de votre projet (Pimcore dans mon cas).
Exécuter les commandes de récupération et de sauvegarde des paquets twig-html-loader et html-webpack-plugin:
|
1 2 3 |
yarn add twig-html-loader --save yarn add html-webpack-plugin --save yarn add fs --save |
webpack.config.js:
|
1 2 3 4 |
const Encore = require('@symfony/webpack-encore'); [...] const HtmlWebpackPlugin = require('html-webpack-plugin'); const fs = require('fs'); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// create a list of twig files to generate // filter out anything that starts with an underscore or is not a twig file function walk(dir) { let results = []; const list = fs.readdirSync(dir); list.forEach(file => { file = `${dir}/${file}`; const stat = fs.statSync(file); if (stat && stat.isDirectory() && path.basename(file).indexOf('_') !== 0) { /* Recurse into a subdirectory */ results = results.concat(walk(file)); } else if ( stat && !stat.isDirectory() && path.extname(file) === '.twig' && path.basename(file).indexOf('_') !== 0 ) { /* Is a file */ results.push(file); } }); return results; } //start looking in the main twig folder const files = walk('./assets/twig'); // generate html plugins to export const htmlPlugins = files.map( file => // Create new HTMLWebpackPlugin with options Encore.addPlugin(new HtmlWebpackPlugin({ filename: '../html/' + file.replace('./assets/twig/', '').replace('.twig', '.html'), template: path.resolve(__dirname, file), publicPath: '../build/', hash: true, })) ); |
|
1 2 3 4 5 6 7 8 |
Encore [...] .addLoader({ test: /\.twig$/, type: 'asset/source', loader: 'twig-html-loader' }) ; |
Résultat:
Fichiers source:
Fichiers destination:
js/utils.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const executeOnlyOnce = ( function( callbackFunction ) { let alreadyExecuted = false; return function( callbackFunction ) { if ( !alreadyExecuted ) { alreadyExecuted = true; // Execute only once! callbackFunction(); } }; })(); export { executeOnlyOnce } |
|
1 2 3 4 5 6 7 8 |
import { executeOnlyOnce } from './js/utils'; let hadPreviousBreakpointChanges = false; console.log( hadPreviousBreakpointChanges ); // "false" const onBreakpointChange = function(){ hadPreviousBreakpointChanges = true; }; |
|
1 2 |
executeOnlyOnce(onBreakpointChange); console.log(hadPreviousBreakpointChanges); // "true" |
Testé fonctionnel UIkit v3.6.19. Documentation officielle.
L’astuce consiste à initialiser le composant toggle d’UIkit sur une classe (.is-toggle dans mon exemple) relative à un ID (#filter---CustomizationTechniques dans mon exemple) placé dans le DOM sur un élément parent/englobant:
|
1 2 3 4 5 6 7 8 9 10 |
<div id="filter---CustomizationTechniques" class="uk-form-controls"> [...] <div class="is-toggle" hidden> [...] </div> <a class="" href="#" uk-toggle="target: #filter---CustomizationTechniques .is-toggle"> <span class="is-toggle">Voir plus</span> <span class="is-toggle" hidden>Voir moins</span> </a> </div> |
Code complet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<div class="uk-margin"> <div class="uk-form-label">Technique de personnalisation</div> <div id="filter---CustomizationTechniques" class="uk-form-controls"> <label><input class="uk-checkbox" type="checkbox"> Tampographie</label><br> <label><input class="uk-checkbox" type="checkbox"> Sérigraphie</label><br> <label><input class="uk-checkbox" type="checkbox"> Transfert sérigraphique</label><br> <label><input class="uk-checkbox" type="checkbox"> Transfert numérique</label><br> <label><input class="uk-checkbox" type="checkbox"> Impression numérique directe</label><br> <div class="is-toggle" hidden> <label><input class="uk-checkbox" type="checkbox"> Broderie</label><br> <label><input class="uk-checkbox" type="checkbox"> Ecussons brodés</label><br> <label><input class="uk-checkbox" type="checkbox"> Sublimation</label><br> <label><input class="uk-checkbox" type="checkbox"> Gravure laser</label><br> <label><input class="uk-checkbox" type="checkbox"> Doming</label><br> <label><input class="uk-checkbox" type="checkbox"> Autocollants</label><br> <label><input class="uk-checkbox" type="checkbox"> Laser sur polaire et microfibre</label> </div> <a class="" href="#" uk-toggle="target: #filter---CustomizationTechniques .is-toggle"> <span class="is-toggle">Voir plus</span> <span class="is-toggle" hidden>Voir moins</span> </a> </div> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
import bph from 'breakpoint-helper'; // UIkit v3.6.19 CSS breakpoints // $breakpoint-small: 640px !default; // $breakpoint-medium: 960px !default; // $breakpoint-large: 1200px !default; // $breakpoint-xlarge: 1600px !default; const instance = bph({ small: '640px', medium: '960px', large: '1200px', xlarge: '1600px', }); |
listen() avec un breakpoint unique(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.
La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const { listen } = instance; const currentBreakpoint = listen( { name: 'large', useMax: true, }, ({ matches }) => { if (matches) { // Execute code for Mobile devices console.log('Current breakpoint is: (max-width: 1199px)'); } else { // Execute code for Desktop devices console.log('Current breakpoint is: (min-width: 1200px)'); } } ); |
Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const bpMobile = listen( { name: 'large', useMax: true, }, ({ matches }) => { if (matches) { // Initialiser console.log('EXECUTE code for: Mobile!'); } else { // Nettoyer console.log('DESTROY code for: Mobile!'); } } ); const bpDesktop = listen('large', ({ matches }) => { if (matches) { // Initialiser console.log('EXECUTE code for: Desktop!'); } else { // Nettoyer console.log('DESTROY code for: Desktop!'); } }); |
Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0).
Source: blog de PHP Roberto – Integrating Purgecss with Symfony Encore (version PDF: phproberto.com-Integrating Purgecss with Symfony Encore).
Quelques ressources en ligne:
Oui, le tree shaking est activé par défaut en mode « production » dans Webpack Encore. C’est juste que la documentation officielle sur symfony.com oublie de le mentionner (grrr…)!
Vous pouvez effectuer le test qui est décrit ici (aka « le tree shaking dans Webpack Encore expliqué en 30 secondes ») pour vous en assurer.
Pour exemple, si vous avez les deux fichiers suivants:
|
1 2 3 4 5 6 7 8 |
// src/imports.js export function testA() { console.log('Test A'); } export function testB() { console.log('Test B'); } |
|
1 2 3 4 |
// src/index.js (entry point) import { testA } from './imports'; testA(); |
Exécuter la commande yarn encore dev devrait générer quelque chose de similaire à ceci:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/***/ "./src/imports.js": /*!************************!*\ !*** ./src/imports.js ***! \************************/ /*! exports provided: testA, testB */ /*! exports used: testA */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; /* harmony export (immutable) */ __webpack_exports__["a"] = testA; /* unused harmony export testB */ function testA() { console.log('Test A'); } function testB() { console.log('Test B'); } /***/ }), |
Cependant, en exécutant la commande yarn encore production le commentaire /* unused harmony export testB */ présent avec la précédente commande sera pris en compte par UglifyJs qui va en conséquence supprimer l’export en relation lors de la phase de minification. Dans ce cas, on ne devrait pas retrouver la chaîne de caractère « Test B » dans le fichier généré:
|
1 |
!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s="lVK7")}({dxJD:function(e,t,n){"use strict";function r(){console.log("Test A")}t.a=r},lVK7:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n("dxJD");Object(r.a)()}}); |
/* unused harmony export */ en développement avec le paramètre config.optimization.usedExports = true;Ceci vous permettra de vérifier avec du code humainement lisible quels sont les parties de votre code qui ne sont pas exploitées et qui seront supprimées dans le bundle minifié de production.
Tout à la fin de votre fichier webpack.config.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
[...] ; // fetch the config, then modify it! const config = Encore.getWebpackConfig(); config.optimization.usedExports = true; // export the final config module.exports = config; // was: // module.exports = Encore.getWebpackConfig(); |
Vous pouvez tout-à-fait laisser cette config activée. Elle ne portera pas préjudice au poids final de votre build de production.
Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0).
Source: blog de YOANDEV – Utiliser Tailwind CSS 2, PurgeCSS avec Symfony et Webpack Encore (version PDF: yoandev.co-Utiliser Tailwind CSS 2 PurgeCSS avec Symfony et Webpack Encore).
Source: blog de PHP Roberto – Integrating Purgecss with Symfony Encore (version PDF: phproberto.com-Integrating Purgecss with Symfony Encore).
Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0).
Installer image-webpack-loader:
|
1 |
npm install image-webpack-loader --save-dev |
Dans webpack.config.js:
Attention au chemin renseigné pour la méthode .setOutputPath(): c’est là que vos SVG optimisés seront consignés.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
// directory where compiled assets will be stored .setOutputPath('web/build/') [..] // https://webpack.js.org/guides/asset-modules/#custom-output-filename .addRule({ test: /\.svg$/, type: 'asset/resource', use: [ // https://www.npmjs.com/package/image-webpack-loader // https://github.com/tcoopman/image-webpack-loader { loader: 'image-webpack-loader', options: { // https://github.com/svg/svgo svgo: { // configFile: './svgo.config.js' removeViewBox: true, } } } ] }) ; // export the final config module.exports = Encore.getWebpackConfig(); |
Dans assets/app.js
|
1 |
import svgIcon from './images/icons/film.svg'; |
Solution alternative avec le module svgo-loader (mais ne prend en charge que le format SVG):
Dans webpack.config.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// directory where compiled assets will be stored .setOutputPath('web/build/') [..] // https://webpack.js.org/guides/asset-modules/#custom-output-filename .addRule({ test: /\.svg$/, type: 'asset/resource', use: [ // https://github.com/svg/svgo-loader { loader: 'svgo-loader', options: { // configFile: './svgo.config.js' removeViewBox: true } } ] }) ; // export the final config module.exports = Encore.getWebpackConfig(); |
Testé fonctionnel UIkit v3.6.19!
Voir aussi: la méthode la plus simple, mais extrêmement limitée en terme de choix des composants qu’on souhaite importer (embarque tous les composants JS du core, embarque les styles d’absolument tous les composants).
Suite à différents tests de génération d’un bundle entièrement à la carte des composants d’UIkit v3 que j’ai effectué et à quelques soucis rencontrés avec l’affichage des icônes, je me suis rendu à l’évidence que le framework open-source développé par YOOTheme n’allait pas pouvoir être intégré à mon projet Symfony dans les règles de l’art.
Pour pouvoir sélectionner à la carte les composants et les icônes qui doivent figurer dans notre bundle (et surtout: retirer tous ceux qui ne vont pas servir!!!) tout en consignant les informations sur notre sélection directement dans le Git de notre projet, nous allons notamment devoir:
./node_modules/uikit/*) dans le dossier qui contient le code spécifique à notre projet (dossier ./assets/uikit/* dans mon cas).assets/uikit/src/scss/theme/_import.scss et assets/uikit/src/scss/components/_import.scss (mirroirs de ceux du dossier source ./node_modules/uikit/src/scss/*).assets/uikit/src/js/core/index.js et assets/uikit/src/js/components/index.js (mirroirs de ceux du dossier source ./node_modules/uikit/src/js/*)../node_modules/uikit/src/images/*./node_modules/uikit/* par leurs versions mirroirs consignées dans ./assets/uikit/* (et ajouter les nouveaux fichiers si il y en a)../node_modules/uikit, les commandes de build fournies dans les sources d’UIkit pour notre sélection de composants et d’icônes.yarn encore dev).Cette technique s’inspire du concept de fork, à la différence qu’ici nous n’aurons pas à maintenir un fork à chaque montée de version d’UIkit (un nouveau tag tous les 15 jours au moment où j’écris ces lignes).
Ici, les modifications relatives aux sources d’UIkit sont également versionnées directement dans les sources de notre projet custom alors qu’avec un fork doit avoir par définition son propre dépôt (donc un seul repository à gérer au lieu de deux).
Il s’agit de générer de nouvelles sources « dist » d’UIkit, taillées sur-mesure sur la base de notre propre sélection de composants et d’icônes.
C’est la source présente dans le dossier ./node_modules/uikit/dist qui est importée par défaut par Webpack lorsque nous déclarons la ligne import UIkit from 'uikit'; dans le fichier assets/app.js.
Note: en procédant ainsi il devrait (je n’ai pas encore testé) être possible d’ajouter également vos propres composants, développés sur les bases d’UIkit, au build custom.
webpack.config.jsDans la configuration de Webpack, ajouter l’alias pour le chemin vers les sources SCSS d’UIkit dans le dossier ./node_modules:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const Encore = require('@symfony/webpack-encore'); const path = require('path'); [...] Encore .addAliases({ // UIkit: '@uk-scss': path.resolve(__dirname, './node_modules/uikit/src/scss') }) [...] // enables Sass/SCSS support .enableSassLoader() |
Note: le build standard des styles d’UIkit (format de sortie/dist CSS) a ceci de particulier qu’il est réalisé à partir des sources LESS. Le framework est bien fourni avec une version SCSS des styles, mais il s’agit juste d’une conversion faite à partir des sources LESS et générée via un script.
En d’autres termes, si nous souhaitons travailler à partir du format SCSS, le build pour cette partie devra être réalisé côté Webpack.
assets/styles/app.scss|
1 2 |
/* Import your custom selection of UIkit components here: */ @import '_uikit-explicit-pieces'; |
Note: selon votre propre organisation de vos fichiers SCSS, l’import de _uikit-explicit-pieces.scss devrait intervenir très tôt (en tout premier?) dans votre chaîne d’imports.
assets/styles/_uikit-explicit-pieces.scssCréer un fichier _uikit-explicit-pieces.scss qui suit à la lettre les directives de mise en place des styles relatifs au framework front-end UIkit.
L’alias @uk-scss déclaré plus haut dans le fichier webpack.config.js est utilisé ici comme racine du chemin vers les fichiers sources.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* * Based on: UIkit v3.6.19 * Source: https://github.com/uikit/uikit/tree/v3.6.19 * Documentation: https://getuikit.com/docs/sass#how-to-build */ /* 1. Your custom variables and variable overwrites. */ //$global-link-color: tomato; /* 2. Import default variables and available mixins. */ @import "@uk-scss/variables-theme.scss"; @import "@uk-scss/mixins-theme.scss"; /* 3. Your custom mixin overwrites. */ //@mixin hook-card() { color: tomato; } /* 4. Import UIkit here: */ //@import "@uk-scss/theme/_import.scss"; // Comment if you don't want to include theme specific styles. @import "@uk-scss/components/_import.scss"; |
Attention: les styles propres à la grille d’UIkit comportent des déclarations de type .uk-child-width-1-4@m. L’arobase n’étant pas présent dans la regex du defaultExtractor de PurgeCSS, il faudra faire comme moi dans le code ci-dessous et le rajouter si vous voulez éviter que les styles de la grille soient considérés comme non-utilisés et dégagés du bundle.
En effet, plus besoin d’éditer les fichiers _import.scss des sources d’UIkit pour commenter les composants dont nous n’avons pas besoin! PurgeCSS se charge de faire le boulot à notre place en scannant les chemins et fichiers que nous allons pointer dans sa configuration pour repérer les IDs et classes que nous utilisons et purement et simplement supprimer toutes les autres de notre bundle!
Voici un exemple à rajouter à la toute fin de votre fichier webpack.config.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
[...] // PurgeCSS // if (Encore.isProduction()) { Encore.addPlugin(new PurgeCssPlugin({ paths: glob.sync([ path.join(__dirname, './app/Resources/views/**/*.html.twig'), path.join(__dirname, './web/build/**/*.js') ]), defaultExtractor: (content) => { return content.match(/[\w-/:@]+(?<!:)/g) || []; } })); // } ; // export the final config module.exports = Encore.getWebpackConfig(); |
Cette technique reste une suggestion, mais reconnaissez que c’est tout-de-même bien pratique!
assets/uikit/src/scss/theme/_import.scssCe fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/src/scss/theme/_import.scss.
Commenter tous les composants dont vous n’aurez pas besoin pour votre build custom (où commenter carrément l’import de ce fichier dans assets/styles/_uikit-explicit-pieces.scss si vous pensez que rien ne va vous servir):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
// Base @import "variables.scss"; @import "base.scss"; // Elements @import "link.scss"; @import "heading.scss"; @import "divider.scss"; @import "list.scss"; @import "description-list.scss"; @import "table.scss"; @import "icon.scss"; @import "form-range.scss"; @import "form.scss"; @import "button.scss"; @import "progress.scss"; // Layout @import "section.scss"; @import "container.scss"; @import "tile.scss"; @import "card.scss"; // Common @import "close.scss"; @import "spinner.scss"; @import "marker.scss"; @import "totop.scss"; @import "alert.scss"; @import "placeholder.scss"; @import "badge.scss"; @import "label.scss"; @import "overlay.scss"; @import "article.scss"; @import "comment.scss"; @import "search.scss"; // JavaScript @import "accordion.scss"; @import "drop.scss"; @import "dropdown.scss"; @import "modal.scss"; @import "slider.scss"; @import "sticky.scss"; @import "offcanvas.scss"; @import "leader.scss"; @import "notification.scss"; @import "tooltip.scss"; @import "sortable.scss"; @import "countdown.scss"; @import "grid.scss"; // Navs @import "nav.scss"; @import "navbar.scss"; @import "subnav.scss"; @import "breadcrumb.scss"; @import "pagination.scss"; @import "tab.scss"; @import "slidenav.scss"; @import "dotnav.scss"; @import "thumbnav.scss"; @import "iconnav.scss"; @import "lightbox.scss"; // Utilities @import "animation.scss"; @import "width.scss"; @import "height.scss"; @import "text.scss"; @import "column.scss"; @import "background.scss"; @import "align.scss"; @import "utility.scss"; @import "margin.scss"; @import "padding.scss"; @import "position.scss"; @import "transition.scss"; @import "inverse.scss"; |
assets/uikit/src/scss/components/_import.scssCe fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/scss/components/_import.scss.
Commenter tous les composants dont vous n’aurez pas besoin pour votre build custom:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
// Base @import "variables.scss"; @import "mixin.scss"; @import "base.scss"; // Elements @import "link.scss"; //@import "heading.scss"; //@import "divider.scss"; //@import "list.scss"; //@import "description-list.scss"; //@import "table.scss"; @import "icon.scss"; //@import "form-range.scss"; //@import "form.scss"; // After: Icon, Form Range @import "button.scss"; //@import "progress.scss"; // Layout //@import "section.scss"; //@import "container.scss"; //@import "tile.scss"; //@import "card.scss"; // Common @import "close.scss"; // After: Icon //@import "spinner.scss"; // After: Icon //@import "totop.scss"; // After: Icon //@import "marker.scss"; // After: Icon //@import "alert.scss"; // After: Close //@import "placeholder.scss"; //@import "badge.scss"; //@import "label.scss"; //@import "overlay.scss"; // After: Icon //@import "article.scss"; //@import "comment.scss"; //@import "search.scss"; // After: Icon // JavaScript @import "accordion.scss"; //@import "drop.scss"; // After: Card //@import "dropdown.scss"; // After: Card //@import "modal.scss"; // After: Close //@import "slideshow.scss"; //@import "slider.scss"; //@import "sticky.scss"; //@import "offcanvas.scss"; //@import "switcher.scss"; //@import "leader.scss"; @import "notification.scss"; //@import "tooltip.scss"; //@import "sortable.scss"; @import "countdown.scss"; // Scrollspy // Toggle // Scroll @import "grid.scss"; // Navs //@import "nav.scss"; //@import "navbar.scss"; // After: Card, Grid, Nav, Icon, Search //@import "subnav.scss"; //@import "breadcrumb.scss"; //@import "pagination.scss"; //@import "tab.scss"; //@import "slidenav.scss"; // After: Icon //@import "dotnav.scss"; //@import "thumbnav.scss"; //@import "iconnav.scss"; //@import "lightbox.scss"; // After: Close, Slidenav // Utilities //@import "animation.scss"; //@import "width.scss"; //@import "height.scss"; //@import "text.scss"; //@import "column.scss"; //@import "cover.scss"; //@import "background.scss"; //@import "align.scss"; //@import "svg.scss"; //@import "utility.scss"; //@import "flex.scss"; // After: Utility //@import "margin.scss"; //@import "padding.scss"; //@import "position.scss"; //@import "transition.scss"; //@import "visibility.scss"; //@import "inverse.scss"; // Need to be loaded last //@import "print.scss"; |
assets/app.jsapp.scss. C’est celui qui va concentrer l’ensemble des @import des différents composants.import UIkit from 'uikit';.import Icons from 'uikit/dist/js/uikit-icons'; UIkit.use(Icons);*: j’explique ça juste en-dessous.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// Styles import './styles/app.scss'; // JS (from custom build generated in ./node_modules/uikit/dist/ folder) import UIkit from 'uikit'; // Icons must be imported separately (from custom build generated in ./node_modules/uikit/dist/ folder) import Icons from 'uikit/dist/js/uikit-icons'; UIkit.use(Icons); // Exemple of Notification component inititalization UIkit.notification("Hello World!"); |
assets/uikit/src/js/core/index.jsCe fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/src/js/core/index.js.
Commenter tous les composants dont vous n’aurez pas besoin pour votre build custom:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
export {default as Accordion} from './accordion'; // export {default as Alert} from './alert'; // export {default as Cover} from './cover'; // export {default as Drop, default as Dropdown} from './drop'; // export {default as FormCustom} from './form-custom'; // export {default as Gif} from './gif'; // export {default as Grid} from './grid'; // export {default as HeightMatch} from './height-match'; // export {default as HeightViewport} from './height-viewport'; export {default as Icon} from './icon'; // export {default as Img} from './img'; // export {default as Leader} from './leader'; // export {default as Margin} from './margin'; // export {default as Modal} from './modal'; // export {default as Nav} from './nav'; // export {default as Navbar} from './navbar'; // export {default as Offcanvas} from './offcanvas'; // export {default as OverflowAuto} from './overflow-auto'; // export {default as Responsive} from './responsive'; // export {default as Scroll} from './scroll'; // export {default as Scrollspy} from './scrollspy'; // export {default as ScrollspyNav} from './scrollspy-nav'; // export {default as Sticky} from './sticky'; // export {default as Svg} from './svg'; // export {default as Switcher} from './switcher'; // export {default as Tab} from './tab'; // export {default as Toggle} from './toggle'; // export {default as Video} from './video'; // Icon components export {Close} from './icon'; // export {Spinner} from './icon'; // export {Slidenav as SlidenavNext} from './icon'; // export {Slidenav as SlidenavPrevious} from './icon'; // export {Search as SearchIcon} from './icon'; // export {IconComponent as Marker} from './icon'; // export {IconComponent as NavbarToggleIcon} from './icon'; // export {IconComponent as OverlayIcon} from './icon'; // export {IconComponent as PaginationNext} from './icon'; // export {IconComponent as PaginationPrevious} from './icon'; // export {IconComponent as Totop} from './icon'; |
assets/uikit/src/js/components/index.jsCe fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/src/js/components/index.js.
Commenter tous les composants dont vous n’aurez pas besoin pour votre build custom:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
export {default as Countdown} from './countdown'; // export {default as Filter} from './filter'; // export {default as Lightbox} from './lightbox'; // export {default as LightboxPanel} from './lightbox-panel'; export {default as Notification} from './notification'; // export {default as Parallax} from './parallax'; // export {default as Slider} from './slider'; // export {default as SliderParallax} from './slider-parallax'; // export {default as Slideshow} from './slideshow'; // export {default as SlideshowParallax} from './slideshow-parallax'; // export {default as Sortable} from './sortable'; // export {default as Tooltip} from './tooltip'; // export {default as Upload} from './upload'; |
Attention: la documentation d’UIkit vous explique comment remplacer des icônes existantes ou ajouter de nouvelles icônes à votre projet.
Cependant, cette dernière fait mention d’un dossier custom/ dans lequel placer les nouvelles icônes à ajouter à votre projet (avant d’effectuer votre build)… sans préciser à quel endroit de l’arborescence des fichiers du framework celui-ci devrait se trouver (edit: dans src/custom/icons/)!
La manipulation des icônes fonctionnera très bien si vous déposez vos fichiers de remplacement et vos nouveaux fichiers dans l’un des 3 dossiers suivants:
./assets/uikit/src/images/backgrounds/./assets/uikit/src/images/components/./assets/uikit/src/images/icons/Note: dans le cas où une même icône est utilisée pour un ou plusieurs composants ET dans la bibliothèque (la croix de fermeture par exemple, présente au minimum dans le composant Notification ET dans la bibliothèque), le fichier doit être présent dans les deux dossiers ./assets/uikit/src/images/components/close-icon.svg et ./assets/uikit/src/images/icons/close.svg (libellé différent, et le code peut-être différent également pour une même icône, cf. ici (components/close-icon.svg) et là (icons/close.svg)).
assets/uikit/build/util.jsCe fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/build/util.js.
Je ne donne ci-dessous que la constante const svgo = new SVGO qui est à modifier avec l’ajout de deux nouveaux paramètres, mais l’intégralité du code issu du fichier source est, bien entendu, à conserver!:
removeAttrs qui va s’occuper de nettoyer le fichier SVG source en supprimant des attributs, inutiles pour nous, qu’on va par exemple retrouver dans les icônes issues de la populaire bibliothèque Font Awesome.addAttributesToSVGElement qui va s’occuper d’ajouter les attributs width="20" et height="20", nécessaires au bon fonctionnement de la bibliothèque d’icônes UIkit, là où ils manquent. Attention: si ces attributs existent déjà avec des valeurs similaires ou d’autres valeurs, ils ne seront pas écrasés par ce paramètre!|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
[...] exports.icons = async function (src) { const svgo = new SVGO({ plugins: [ {removeViewBox: false}, { cleanupNumericValues: { floatPrecision: 3 } }, {convertPathData: false}, {convertShapeToPath: false}, {mergePaths: false}, {removeDimensions: false}, {removeStyleElement: false}, {removeScriptElement: false}, {removeUnknownsAndDefaults: false}, {removeUselessStrokeAndFill: false}, // Remove unwanted attributes // https://github.com/svg/svgo/blob/v1.3.2/examples/test.js#L75 {removeAttrs: {attrs: '(id|class|aria-hidden|focusable|data-prefix|data-icon|role)'}}, // Add "width" and "height" attributes (where missing) with a value of "20" // /!\ Needs to be an array! // /!\ Existant "width" and "height" attributes WON'T be replaced! // https://github.com/svg/svgo/issues/583#issuecomment-275941582 {addAttributesToSVGElement: {attributes: ['width="20"', 'height="20"']}} ] }); [...] |
…sous forme de capture d’écran.
Dans le fichier package.json qui devrait se trouver à la racine de votre projet, nous allons ajouter un script qui va générer automatiquement les sources dist optimisées d’UIkit:
|
1 2 3 4 5 6 7 8 9 |
{ "scripts": { "uk": "./build/build-uikit.sh" }, "devDependencies": { [...] } |
Nous allons ensuite créer un fichier build/build-uikit.sh qui va contenir le script en question:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
#!/usr/bin/env bash # Rendre ce script exécutable: # chmod +x ./build/build-uikit.sh # Générer les sources JS et le sprite d'icônes SVG: # $ yarn run uk # Générer uniquement les sources JS: # $ yarn run uk uikit # Générer uniquement le sprite d'icônes SVG: # $ yarn run uk icons cp -r assets/uikit/* node_modules/uikit/ cd node_modules/uikit # Si le dossier "node_modules" n'existe pas: if [ ! -d "node_modules" ] then npm install fi # Possibilité de passer des arguments: array=("$@") # Si pas d'arguments, on execute la commande par défaut: if [ $# -eq 0 ] then node build/build uikit icons -d # Sinon, on exécute la commande en fonction des arguments passés: else node build/build $@ -d fi |
ATTENTION: afin de rendre ce script exécutable, il faut lancer depuis la racine de votre projet la commande chmod +x ./build/build-uikit.sh!
Désormais, vous pourrez lancer différentes commandes pour générer votre build à la carte d’UIkit:
yarn run uk: générer les sources JS et le sprite d’icônes SVG d’UIkityarn run uk uikit: générer uniquement les sources JS d’UIkityarn run uk icons: générer uniquement le sprite d’icônes SVG d’UIkitNote: nous n’avons bien sûr pas de commande relative aux styles car ils sont générés directement via Webpack Encore.
Attention: les sources du framework front-end UIkit consignées dans le dossier node_modules/ de votre projet ont leur propre fichier package.json. Pour exécuter les différents scripts de build, il convient donc d’avoir au préalable déployé les dépendances Node au sein du dossier à l’aide de la commande npm install. En d’autres termes, si le dossier node_modules n’est pas présent dans le dossier ./node_modules/uikit/, les commandes de build vont vous péter à la tronche :D.
Depuis la racine de votre projet:
On copie nos fichiers custom d’UIkit vers le dossier où sont consignées les sources issues du Git officiel (les fichiers initiaux existants seront écrasés par les nôtres; c’est ce qu’on veut):
|
1 |
cp -r assets/uikit/* node_modules/uikit/ |
On se rend dans le dossier où sont consignées les sources d’UIkit:
|
1 |
cd node_modules/uikit |
La manipulation suiffante n’est à effectuer que dans deux cas:
npm install depuis ce dossier et le dossier node_modules n’est donc pas présent à la racine de ./node_modules/uikit/../node_modules/uikit/package.json (vérifier que ce fichier est présent dans ./assets/uikit/; ça peut être une bonne indication du fait qu’il faille lancer les deux commandes ci-dessous).|
1 2 |
rm -rf node_modules npm install |
Effectuer un build non-minifié (paramètre -d – c’est Webpack Encore qui assurera la minification par la suite) des sources JS d’UIkit qui contient uniquement notre sélection de composants et la bibliothèque d’icônes:
|
1 |
node build/build uikit icons -d |
Note: voir les autres paramètres possibles pour la commande node build/build.
On retourne à la racine de notre projet et on lance la commande de build propre à Webpack Encore:
|
1 2 |
cd ../.. yarn encore dev|yarn encore production |
Vos sources pour afficher votre site dans le navigateur sont prêtes!
./node_modules/uikit/* et d’effectuer un build.ATTENTION: plusieurs limitations au niveau des icônes avec cette méthode de bundle:
M’affiche l’erreur suivante en console:
fastdom.js:67 TypeError: Cannot read property ‘cloneNode’ of undefined
at getIcon (icon.js:186)
at UIkitComponent.getSvg (icon.js:63)
at UIkitComponent.connected (svg.js:38)
at hooks.js:10
at Array.forEach ()
at UIkitComponent.UIkit._callHook (hooks.js:10)
at UIkitComponent.UIkit._callConnected (hooks.js:31)
at UIkitComponent.UIkit.$mount (instance.js:28)
at UIkitComponent.UIkit._init (state.js:23)
at new UIkitComponent (global.js:30)
Les icônes des composants sont générées séparément du sprite d’icônes utilisables à la carte (et qui, lui, fonctionne!).
Lorsque je compare aux sources JS fournies dans le dossier dist, je remarque l’absence du code suivant dans mon bundle Webpack:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
var closeIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"1\" y1=\"1\" x2=\"13\" y2=\"13\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"13\" y1=\"1\" x2=\"1\" y2=\"13\"/></svg>"; var closeLarge = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"1\" y1=\"1\" x2=\"19\" y2=\"19\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"19\" y1=\"1\" x2=\"1\" y2=\"19\"/></svg>"; var marker = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"9\" y=\"4\" width=\"1\" height=\"11\"/><rect x=\"4\" y=\"9\" width=\"11\" height=\"1\"/></svg>"; var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect y=\"9\" width=\"20\" height=\"2\"/><rect y=\"3\" width=\"20\" height=\"2\"/><rect y=\"15\" width=\"20\" height=\"2\"/></svg>"; var overlayIcon = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"19\" y=\"0\" width=\"1\" height=\"40\"/><rect x=\"0\" y=\"19\" width=\"40\" height=\"1\"/></svg>"; var paginationNext = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 1 6 6 1 11\"/></svg>"; var paginationPrevious = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"6 1 1 6 6 11\"/></svg>"; var searchIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"9\" cy=\"9\" r=\"7\"/><path fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" d=\"M14,14 L18,18 L14,14 Z\"/></svg>"; var searchLarge = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" cx=\"17.5\" cy=\"17.5\" r=\"16.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" x1=\"38\" y1=\"39\" x2=\"29\" y2=\"30\"/></svg>"; var searchNavbar = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"10.5\" cy=\"10.5\" r=\"9.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"23\" y1=\"23\" x2=\"17\" y2=\"17\"/></svg>"; var slidenavNext = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"1.225,23 12.775,12 1.225,1 \"/></svg>"; var slidenavNextLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"4.002,38.547 22.527,20.024 4,1.5 \"/></svg>"; var slidenavPrevious = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"12.775,1 1.225,12 12.775,23 \"/></svg>"; var slidenavPreviousLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"20.527,1.5 2,20.024 20.525,38.547 \"/></svg>"; var spinner = "<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" cx=\"15\" cy=\"15\" r=\"14\"/></svg>"; var totop = "<svg width=\"18\" height=\"10\" viewBox=\"0 0 18 10\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 9 9 1 17 9 \"/></svg>"; |
Pas de résolution à ce jour.
assets/app.js|
1 2 3 4 5 6 7 |
// Styles import './uikit-explicit-pieces.scss' // JS import UIkit from './uikit-explicit-pieces'; // UIkit UIkit.notification("Hello World!"); |
webpack.config.js:|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const Encore = require('@symfony/webpack-encore'); const path = require('path'); [...] Encore .addAliases({ // UIkit JS: 'uikit-util': path.resolve(__dirname, './node_modules/uikit/src/js/util'), '@uk-js': path.resolve(__dirname, './node_modules/uikit/src/js'), '@uk-scss': path.resolve(__dirname, './node_modules/uikit/src/scss') }) [...] // enables Sass/SCSS support .enableSassLoader() |
assets/uikit-explicit-pieces.js:|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 |
/* * Based on: UIkit v3.6.19 * Source: https://github.com/uikit/uikit/tree/v3.6.19 * Documentation: https://getuikit.com/docs/javascript */ /* * Overrides: * ./node_modules/uikit/src/js/uikit-core.js * ./node_modules/uikit/src/js/uikit.js */ // import UIkit from 'uikit/src/js/api/index'; /* * Overrides: * ./node_modules/uikit/src/js/api/index.js * * Override needed because of the "UIkit.version = VERSION;" line that generates an * "Uncaught ReferenceError: VERSION is not defined" error in browser console! */ import globalAPI from '@uk-js/api/global'; import hooksAPI from '@uk-js/api/hooks'; import stateAPI from '@uk-js/api/state'; import instanceAPI from '@uk-js/api/instance'; import componentAPI from '@uk-js/api/component'; import * as util from 'uikit-util'; const UIkit = function (options) { this._init(options); }; UIkit.util = util; UIkit.data = '__uikit__'; UIkit.prefix = 'uk-'; UIkit.options = {}; // UIkit.version = VERSION; globalAPI(UIkit); hooksAPI(UIkit); stateAPI(UIkit); componentAPI(UIkit); instanceAPI(UIkit); /* END: Overrides: ./node_modules/uikit/src/js/api/index.js */ import Core from '@uk-js/core/core'; import boot from '@uk-js/api/boot'; // import * as components from 'uikit/src/js/core/index'; /* * Overrides: * ./node_modules/uikit/src/js/core/index.js */ import {Accordion, Alert, Cover, Drop, Dropdown, FormCustom, Gif, Grid, HeightMatch, HeightViewport, Icon, Img, Leader, Margin, Modal, Nav, Navbar, Offcanvas, OverflowAuto, Responsive, Scroll, Scrollspy, ScrollspyNav, Sticky, Svg, Switcher, Tab, Toggle, Video} from '@uk-js/core/index'; // Icon components import {Close, Spinner, Slidenav as SlidenavNext, Slidenav as SlidenavPrevious, Search as SearchIcon, IconComponent as Marker, IconComponent as NavbarToggleIcon, IconComponent as OverlayIcon, IconComponent as PaginationNext, IconComponent as PaginationPrevious, IconComponent as Totop} from '@uk-js/core/icon'; /* END: Overrides: ./node_modules/uikit/src/js/core/index.js */ /* From: ./node_modules/uikit/src/js/uikit.js */ // import * as components from 'uikit/src/js/components/index'; /* * Overrides: * ./node_modules/uikit/src/js/components/index.js */ import {Countdown, Filter, Lightbox, LightboxPanel, Notification, Parallax, Slider, SliderParallax, Slideshow, SlideshowParallax, Sortable, Tooltip, Upload} from '@uk-js/components/index'; /* END: Overrides: ./node_modules/uikit/src/js/components/index.js */ import {each} from '@uk-js/util/lang'; // register components /* Declare your selection of UIkit components to be included in the Webpack build and registered here: */ const components = { /* Core components */ Accordion, Alert, Cover, Drop, Dropdown, FormCustom, Gif, Grid, HeightMatch, HeightViewport, Icon, Img, Leader, Margin, Modal, Nav, Navbar, Offcanvas, OverflowAuto, Responsive, Scroll, Scrollspy, ScrollspyNav, Sticky, Svg, Switcher, Tab, Toggle, Video, /* Core components: icon */ Close, Spinner, SlidenavNext, SlidenavPrevious, SearchIcon, Marker, NavbarToggleIcon, OverlayIcon, PaginationNext, PaginationPrevious, Totop, /* Additional components */ Countdown, Filter, Lightbox, LightboxPanel, Notification, Parallax, Slider, SliderParallax, Slideshow, SlideshowParallax, Sortable, Tooltip, Upload }; each(components, (component, name) => UIkit.component(name, component) ); // core functionality UIkit.use(Core); /* Icons must be imported separately, from node_modules/uikit/dist/ folder */ import Icons from 'uikit/dist/js/uikit-icons'; UIkit.use(Icons); boot(UIkit); /* END: Overrides: ./node_modules/uikit/src/js/uikit-core.js, ./node_modules/uikit/src/js/uikit.js */ /* FINALLY, export everything into 'UIkit' object. */ export default UIkit; |
uikit-explicit-pieces.scss:|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 |
/* * Based on: UIkit v3.6.19 * Source: https://github.com/uikit/uikit/tree/v3.6.19 * Documentation: https://getuikit.com/docs/sass */ /* 1. Your custom variables and variable overwrites. */ //$global-link-color: #DA7D02; /* 2. Import default variables and available mixins. */ @import "@uk-scss/variables-theme.scss"; @import "@uk-scss/mixins-theme.scss"; /* 3. Your custom mixin overwrites. */ //@mixin hook-card() { color: #000; } /* 4. Import UIkit here: */ /* * Overrides: * ./node_modules/uikit/src/scss/uikit-theme.scss */ // // Theme // //@import "@uk-scss/theme/theme/_import.scss"; /* * Overrides: * ./node_modules/uikit/src/scss/theme/_import.scss */ /* * [DEV NOTE] Sachant que les fichiers importés ci-dessous sont relatifs au thème, ils devraient: * - N'être importés qu'à la condition qu'on souhaite personnaliser le rendu graphique du composant en question * - N'être importés de node_modules qu'à la condition qu'ils nous conviennent en l'état... * - ...sinon, être surchargés (en partant impérativement d'un copier-coller de l'original) et modifiés dans le thème */ // Base //@import "@uk-scss/theme/variables.scss"; //@import "@uk-scss/theme/base.scss"; // Elements //@import "@uk-scss/theme/link.scss"; //@import "@uk-scss/theme/heading.scss"; //@import "@uk-scss/theme/divider.scss"; //@import "@uk-scss/theme/list.scss"; //@import "@uk-scss/theme/description-list.scss"; //@import "@uk-scss/theme/table.scss"; //@import "@uk-scss/theme/icon.scss"; //@import "@uk-scss/theme/form-range.scss"; //@import "@uk-scss/theme/form.scss"; //@import "@uk-scss/theme/button.scss"; //@import "@uk-scss/theme/progress.scss"; // Layout //@import "@uk-scss/theme/section.scss"; //@import "@uk-scss/theme/container.scss"; //@import "@uk-scss/theme/tile.scss"; //@import "@uk-scss/theme/card.scss"; // Common //@import "@uk-scss/theme/close.scss"; //@import "@uk-scss/theme/spinner.scss"; //@import "@uk-scss/theme/marker.scss"; //@import "@uk-scss/theme/totop.scss"; //@import "@uk-scss/theme/alert.scss"; //@import "@uk-scss/theme/placeholder.scss"; //@import "@uk-scss/theme/badge.scss"; //@import "@uk-scss/theme/label.scss"; //@import "@uk-scss/theme/overlay.scss"; //@import "@uk-scss/theme/article.scss"; //@import "@uk-scss/theme/comment.scss"; //@import "@uk-scss/theme/search.scss"; // JavaScript //@import "@uk-scss/theme/accordion.scss"; //@import "@uk-scss/theme/drop.scss"; //@import "@uk-scss/theme/dropdown.scss"; //@import "@uk-scss/theme/modal.scss"; //@import "@uk-scss/theme/slider.scss"; //@import "@uk-scss/theme/sticky.scss"; //@import "@uk-scss/theme/offcanvas.scss"; //@import "@uk-scss/theme/leader.scss"; //@import "@uk-scss/theme/notification.scss"; //@import "@uk-scss/theme/tooltip.scss"; //@import "@uk-scss/theme/sortable.scss"; //@import "@uk-scss/theme/countdown.scss"; //@import "@uk-scss/theme/grid.scss"; // Navs //@import "@uk-scss/theme/nav.scss"; //@import "@uk-scss/theme/navbar.scss"; //@import "@uk-scss/theme/subnav.scss"; //@import "@uk-scss/theme/breadcrumb.scss"; //@import "@uk-scss/theme/pagination.scss"; //@import "@uk-scss/theme/tab.scss"; //@import "@uk-scss/theme/slidenav.scss"; //@import "@uk-scss/theme/dotnav.scss"; //@import "@uk-scss/theme/thumbnav.scss"; //@import "@uk-scss/theme/iconnav.scss"; //@import "@uk-scss/theme/lightbox.scss"; // Utilities //@import "@uk-scss/theme/animation.scss"; //@import "@uk-scss/theme/width.scss"; //@import "@uk-scss/theme/height.scss"; //@import "@uk-scss/theme/text.scss"; //@import "@uk-scss/theme/column.scss"; //@import "@uk-scss/theme/background.scss"; //@import "@uk-scss/theme/align.scss"; //@import "@uk-scss/theme/utility.scss"; //@import "@uk-scss/theme/margin.scss"; //@import "@uk-scss/theme/padding.scss"; //@import "@uk-scss/theme/position.scss"; //@import "@uk-scss/theme/transition.scss"; //@import "@uk-scss/theme/inverse.scss"; /* END: Overrides: ./node_modules/uikit/src/scss/theme/_import.scss */ //@import "@uk-scss/theme/components/_import.scss"; /* * Overrides: * ./node_modules/uikit/src/scss/components/_import.scss */ // Base @import "@uk-scss/components/variables.scss"; @import "@uk-scss/components/mixin.scss"; @import "@uk-scss/components/base.scss"; // Elements @import "@uk-scss/components/link.scss"; @import "@uk-scss/components/heading.scss"; @import "@uk-scss/components/divider.scss"; @import "@uk-scss/components/list.scss"; @import "@uk-scss/components/description-list.scss"; @import "@uk-scss/components/table.scss"; @import "@uk-scss/components/icon.scss"; @import "@uk-scss/components/form-range.scss"; @import "@uk-scss/components/form.scss"; // After: Icon, Form Range @import "@uk-scss/components/button.scss"; @import "@uk-scss/components/progress.scss"; // Layout @import "@uk-scss/components/section.scss"; @import "@uk-scss/components/container.scss"; @import "@uk-scss/components/tile.scss"; @import "@uk-scss/components/card.scss"; // Common @import "@uk-scss/components/close.scss"; // After: Icon @import "@uk-scss/components/spinner.scss"; // After: Icon @import "@uk-scss/components/totop.scss"; // After: Icon @import "@uk-scss/components/marker.scss"; // After: Icon @import "@uk-scss/components/alert.scss"; // After: Close @import "@uk-scss/components/placeholder.scss"; @import "@uk-scss/components/badge.scss"; @import "@uk-scss/components/label.scss"; @import "@uk-scss/components/overlay.scss"; // After: Icon @import "@uk-scss/components/article.scss"; @import "@uk-scss/components/comment.scss"; @import "@uk-scss/components/search.scss"; // After: Icon // JavaScript @import "@uk-scss/components/accordion.scss"; //@import "@uk-scss/components/drop.scss"; // After: Card //@import "@uk-scss/components/dropdown.scss"; // After: Card //@import "@uk-scss/components/modal.scss"; // After: Close //@import "@uk-scss/components/slideshow.scss"; //@import "@uk-scss/components/slider.scss"; //@import "@uk-scss/components/sticky.scss"; //@import "@uk-scss/components/offcanvas.scss"; //@import "@uk-scss/components/switcher.scss"; //@import "@uk-scss/components/leader.scss"; @import "@uk-scss/components/notification.scss"; //@import "@uk-scss/components/tooltip.scss"; //@import "@uk-scss/components/sortable.scss"; @import "@uk-scss/components/countdown.scss"; // Scrollspy // Toggle // Scroll @import "@uk-scss/components/grid.scss"; // Navs @import "@uk-scss/components/nav.scss"; @import "@uk-scss/components/navbar.scss"; // After: Card, Grid, Nav, Icon, Search @import "@uk-scss/components/subnav.scss"; @import "@uk-scss/components/breadcrumb.scss"; @import "@uk-scss/components/pagination.scss"; @import "@uk-scss/components/tab.scss"; @import "@uk-scss/components/slidenav.scss"; // After: Icon @import "@uk-scss/components/dotnav.scss"; @import "@uk-scss/components/thumbnav.scss"; @import "@uk-scss/components/iconnav.scss"; @import "@uk-scss/components/lightbox.scss"; // After: Close, Slidenav // Utilities @import "@uk-scss/components/animation.scss"; @import "@uk-scss/components/width.scss"; @import "@uk-scss/components/height.scss"; @import "@uk-scss/components/text.scss"; @import "@uk-scss/components/column.scss"; @import "@uk-scss/components/cover.scss"; @import "@uk-scss/components/background.scss"; @import "@uk-scss/components/align.scss"; @import "@uk-scss/components/svg.scss"; @import "@uk-scss/components/utility.scss"; @import "@uk-scss/components/flex.scss"; // After: Utility @import "@uk-scss/components/margin.scss"; @import "@uk-scss/components/padding.scss"; @import "@uk-scss/components/position.scss"; @import "@uk-scss/components/transition.scss"; @import "@uk-scss/components/visibility.scss"; @import "@uk-scss/components/inverse.scss"; // Need to be loaded last @import "@uk-scss/components/print.scss"; /* END: Overrides: ./node_modules/uikit/src/scss/components/_import.scss */ /* END: Overrides: ./node_modules/uikit/src/scss/uikit-theme.scss */ |
Expérience réalisée avec .
Attention: je vais mettre en garde par rapport à un certain nombre de défauts de conception du projet qu’il convient de rattacher au contexte d’utilisation dans lequel je souhaite l’intégrer. Je recherche une bibliothèque de composants front-end:
Si vous recherchez une bibliothèque front-end proposant un choix large de composants, qui soit légère et facile à poser et que vous ne l’utiliserez que depuis des pages en HTML (i.e.: sans chercher à l’étendre vous-même), UIkit dans sa version 3 est un bon challenger.
Dans un cas plus proche du mien, voir ci-dessous.
UIkit a beau se targuer d’être bundle-able via Webpack dans sa documentation officielle, à y regarder d’un peu plus près sa conception va poser un certain nombre de problèmes:
Sans modifier ou surcharger (encore faut-il pouvoir le faire!) directement des fichiers du framework (oui, oui, ceux qui sont dans votre dossier node_modules et par définition pas modifiables) pour commenter les composants JS et CSS qu’on ne souhaite pas utiliser dans notre projet et lancer une compilation avec les scripts fournis par UIkit, impossible de faire un build vraiment à la carte…
Personellement, après avoir été séduit par la documentation et les démos en ligne d’UIkit v3, mais après quelques tests d’intégration à mon projet, je me sens un peu refroidi à l’idée d’utiliser UIkit dans sa version 3…
Si les sources JS n’ont bien recours à aucun framework tiers, il convient de noter que les développeurs d’UIkit on repris un certain nombre de méthodes et de logiques issues de jQuery qu’ils ont converti en fonctions.
Vous rencontrez le système d'import/export propre aux modules E6+. Mais si vous êtes familier avec jQuery, vous retrouverez notamment un certain nombre d’événements (.on()) et de méthodes pour traverser le DOM (.empty(), .html(), .prepend(), .append(), .before(), etc…) qui vous seront familières.
Vous retrouverez aussi le fameux dollar $ de jQuery.
Chacun trouvera du pour et du contre à cette philosophie. Pour ma part:
© 2021 devfrontend.info
Theme by Anders Norén — Up ↑