# webdev-ui Lightweight CSS/JS framework β€” modular, CDN-ready, no dependencies. - πŸ“¦ **GitHub** : [github.com/laurent-webdev/webdev-ui](https://github.com/laurent-webdev/webdev-ui) - πŸš€ **CDN** : [jsDelivr](https://www.jsdelivr.com/package/gh/laurent-webdev/webdev-ui) --- ## Installation rapide via CDN ### Bundle complet (recommandΓ©) ```html ``` ### Versions minifiΓ©es ```html ``` ### Γ€ la carte β€” charger uniquement ce dont vous avez besoin ```html ``` ### Surcharger les variables ```css :root { --color-primary: #ff6600; --border-radius: 0.25rem; } ``` > Remplace `@v1` par `@latest` pour toujours avoir la derniΓ¨re version (dΓ©conseillΓ© en production). --- ## Build System Mini framework CSS/JS compilΓ© via Docker + Gulp + esbuild. Aucune installation locale de Node/npm requise. --- ## PrΓ©requis - [Docker Desktop](https://www.docker.com/products/docker-desktop/) installΓ© et lancΓ© --- ## Structure du projet ``` project/ β”œβ”€β”€ src/ β”‚ β”œβ”€β”€ scss/ β”‚ β”‚ β”œβ”€β”€ abstracts/ # variables.scss, colors.scss, breakpoints.scss β”‚ β”‚ β”œβ”€β”€ base/ # base.scss, reset.scss β”‚ β”‚ β”œβ”€β”€ components/ # button.scss, card.scss, ... β”‚ β”‚ β”œβ”€β”€ layouts/ # grid.scss, container.scss, ... β”‚ β”‚ └── utilities/ # spacing.scss, display.scss, ... β”‚ └── js/ β”‚ β”œβ”€β”€ alert.js β”‚ β”œβ”€β”€ collapse.js β”‚ β”œβ”€β”€ dialog.js β”‚ └── ... β”œβ”€β”€ app.js # Point d'entrΓ©e JS (bundle) β”œβ”€β”€ dist/ # GΓ©nΓ©rΓ© automatiquement β”‚ β”œβ”€β”€ css/ β”‚ └── js/ β”œβ”€β”€ Dockerfile β”œβ”€β”€ docker-compose.yml β”œβ”€β”€ package.json └── gulpfile.js ``` --- ## Fichiers de config ### `Dockerfile` ```dockerfile FROM node:20-alpine WORKDIR /app COPY package.json . RUN npm install COPY . . ``` ### `docker-compose.yml` ```yaml services: builder: build: . volumes: - ./src:/app/src - ./dist:/app/dist ``` ### `package.json` ```json { "name": "simplecss", "version": "1.0.0", "scripts": { "build": "gulp build" }, "devDependencies": { "gulp": "^4.0.2", "gulp-sass": "^6.0.0", "sass": "^1.79.0", "gulp-clean-css": "^4.3.0", "gulp-rename": "^2.0.0", "esbuild": "^0.25.0", "glob": "^10.0.0" } } ``` ### `gulpfile.js` ```javascript const gulp = require('gulp'); const sass = require('sass'); const gulpSass = require('gulp-sass')(sass); const cleanCSS = require('gulp-clean-css'); const rename = require('gulp-rename'); const esbuild = require('esbuild'); const glob = require('glob'); const IGNORE = ['!src/scss/**/_*.scss']; // ── CSS individuel ──────────────────────────────────── function buildCSS() { return gulp.src(['src/scss/**/*.scss', ...IGNORE]) .pipe(gulpSass({ api: 'modern' }).on('error', gulpSass.logError)) .pipe(gulp.dest('dist/css')); } function buildCSSMin() { return gulp.src(['src/scss/**/*.scss', ...IGNORE]) .pipe(gulpSass({ api: 'modern' }).on('error', gulpSass.logError)) .pipe(cleanCSS()) .pipe(rename({ suffix: '.min' })) .pipe(gulp.dest('dist/css')); } // ── JS individuel ───────────────────────────────────── async function buildJS() { const files = glob.sync('src/js/**/*.js'); await Promise.all(files.map(file => { return esbuild.build({ entryPoints: [file], outfile: file.replace('src/js', 'dist/js'), bundle: false, format: 'esm', }); })); } async function buildJSMin() { const files = glob.sync('src/js/**/*.js'); await Promise.all(files.map(file => { return esbuild.build({ entryPoints: [file], outfile: file.replace('src/js', 'dist/js').replace('.js', '.min.js'), bundle: false, minify: true, format: 'esm', }); })); } // ── JS bundle (app.js) ──────────────────────────────── async function buildJSBundle() { await esbuild.build({ entryPoints: ['src/app.js'], outfile: 'dist/js/bundle.js', bundle: true, format: 'esm', }); } async function buildJSBundleMin() { await esbuild.build({ entryPoints: ['src/app.js'], outfile: 'dist/js/bundle.min.js', bundle: true, minify: true, format: 'esm', }); } exports.build = gulp.parallel( buildCSS, buildCSSMin, buildJS, buildJSMin, buildJSBundle, buildJSBundleMin ); ``` --- ## Commandes ### 1. PremiΓ¨re installation (une seule fois) ```bash docker compose build ``` > Γ€ relancer uniquement si tu modifies `package.json`, `Dockerfile` ou `gulpfile.js`. ### 2. Compiler le projet ```bash docker compose run --rm builder npm run build ``` > `--rm` supprime le conteneur aprΓ¨s l'exΓ©cution (Γ©vite l'accumulation de conteneurs morts). --- ## RΓ©sultat dans `dist/` ``` dist/ β”œβ”€β”€ css/ β”‚ β”œβ”€β”€ abstracts/ β”‚ β”‚ └── variables.css / variables.min.css β”‚ β”œβ”€β”€ base/ β”‚ β”‚ β”œβ”€β”€ base.css / base.min.css β”‚ β”‚ └── reset.css / reset.min.css β”‚ β”œβ”€β”€ components/ β”‚ β”‚ β”œβ”€β”€ button.css / button.min.css β”‚ β”‚ └── ... β”‚ β”œβ”€β”€ layouts/ β”‚ └── utilities/ └── js/ β”œβ”€β”€ alert.js / alert.min.js β”œβ”€β”€ collapse.js / collapse.min.js β”œβ”€β”€ ... β”œβ”€β”€ bundle.js ← tout le JS en un seul fichier └── bundle.min.js ``` --- ## Utilisation comme CDN Voir la section **Installation rapide via CDN** en haut du README. --- ## Ordre de chargement CSS ⚠️ L'ordre est **obligatoire** si tu charges les fichiers Γ  la carte. Chaque couche dΓ©pend de la prΓ©cΓ©dente. ```html ``` > **RΓ¨gle simple Γ  retenir :** `variables` β†’ `base` β†’ `layouts` β†’ `components` β†’ `utilities` > Tu peux sauter des couches entiΓ¨res ou des fichiers individuels, mais jamais inverser l'ordre. --- ## RΓ¨gles SCSS importantes - Les fichiers commenΓ§ant par `_` (ex: `_mixins.scss`) sont **ignorΓ©s** β€” ce sont des partiels. - Les fichiers `abstracts/` sans `_` (ex: `variables.scss`) **sont compilΓ©s** car ils contiennent des CSS custom properties. - Les fichiers `abstracts/` avec `_` (ex: `_breakpoints.scss`) sont ignorΓ©s car ils ne contiennent que des variables SCSS ou mixins.