A collection of front end web resources.
19 April 2024
Add Fluid Typography classes #943
Fluid Typography font sizes increase linearly with browser width from 360px up to the 2XL breakpoint where it stays at a max value
See this link for the concept https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
HSTS set max-age to 31536000 #944
7 November 2023
#939
#936
#932
12e22c4
12 July 2023
#919
11 July 2023
#918
26 June 2023
#909
10 April 2023
#906
28 February 2023
#905
16 May 2022
#879
11 May 2022
#878
29 April 2022
#875
#874
#871
#859
2723ef5
263c621
15 October 2021
#857
#854
#853
17 September 2021
#851
#843
e75069d
13 July 2021
#841
15 June 2021
21 May 2021
#827
21 May 2021
21 May 2021
#830
#829
#828
#825
#826
#821
#820
#818
d784988
13 April 2021
#814
#812
#813
#810
#809
#808
#806
#805
24 February 2021
#803
#804
#802
#801
#799
#800
#796
#795
#794
#792
#790
#786
#787
#765
#764
1c4dd81
0596ef7
02352a9
19 October 2023
#926
5 October 2023
#927
/* eslint-disable no-undef */
/**
* Decanter 6 - Webpack Example Configuration
*/
// Requires / Dependencies
const path = require('path');
const FileManagerPlugin = require('filemanager-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const WebpackAssetsManifest = require('webpack-assets-manifest');
const TerserPlugin = require('terser-webpack-plugin');
// Paths
const npmPackage = 'node_modules';
const srcDir = path.resolve(__dirname, 'src');
const outputDir = path.resolve(__dirname, 'dist');
// process.env.NODE_ENV is NOT set, so use the name of the npm script as the clue.
const devMode = process.env.npm_lifecycle_event !== 'publish';
// Module Exports.
module.exports = {
name: 's',
// Define the entry points for which webpack builds a dependency graph.
entry: {
"my-styles": "/src/scss/my-styles.scss",
"my-js": "/src/js/my-js.js",
},
// Where should I output the assets.
output: {
filename: '[name].js',
path: path.resolve(__dirname, outputDir + '/js'),
clean: true,
assetModuleFilename: '../assets/[name][ext]'
},
// Allows for map files.
devtool: 'source-map',
resolve: {
alias: {
'./@fortawesome': path.resolve(__dirname, npmPackage, '@fortawesome'),
'decanter-assets': path.resolve(__dirname, npmPackage, 'decanter/core/src/img'),
'fa-fonts': path.resolve(__dirname, npmPackage, '@fortawesome/fontawesome-free/webfonts')
}
},
// Optimizations that are triggered by production mode.
optimization: {
moduleIds: 'deterministic',
minimize: !devMode,
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin()
]
},
plugins: [
// A webpack plugin to manage files before or after the build.
// Used here to:
// - clean all generated files (js AND css) prior to building
// - copy generated files to the styleguide after building
// Copying to the styleguide must happen in this build because the 2 configs
// run asynchronously, and the kss build finishes before this build generates
// the assets that need to be copied.
// https://www.npmjs.com/package/filemanager-webpack-plugin
new FileManagerPlugin({
events: {
onStart: {
delete: [outputDir + '/**/*']
},
onEnd: {
copy: [
{
source: npmPackage + "/decanter/core/src/templates/**/*.twig",
destination: outputDir + "/templates/decanter/"
},
]
}
}
}),
// This plugin extracts CSS into separate files. It creates a CSS file per
// JS file which contains CSS. It supports On-Demand-Loading of CSS and
// SourceMaps.
// https://github.com/webpack-contrib/mini-css-extract-plugin
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '../css/[name].css',
chunkFilename: '../css/[id].css'
}),
// This Webpack plugin will generate a JSON file that matches the original
// filename with the hashed version.
// https://github.com/webdeveric/webpack-assets-manifest
new WebpackAssetsManifest({
output: 'assets.json'
})
],
module: {
rules: [
// Apply babel ES6 compilation to JavaScript files.
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
// Apply Plugins to SCSS/SASS files.
{
test: /\.s[ac]ss$/,
use: [
MiniCssExtractPlugin.loader,
// CSS Loader. Generate sourceMaps.
{
loader: 'css-loader',
options: {
sourceMap: true,
url: true
}
},
// Post CSS. Run autoprefixer plugin.
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
// SASS Loader. Add compile paths to include bourbon.
{
loader: 'sass-loader',
options: {
sassOptions: {
sourceMap: true,
lineNumbers: true,
outputStyle: 'nested',
precision: 10,
includePaths: [
path.resolve(__dirname, npmPackage, 'bourbon/core'),
path.resolve(__dirname, srcDir, 'scss'),
path.resolve(__dirname, npmPackage)
]
}
}
}
]
},
// Apply plugins to image assets.
{
test: /\.(png|jpg|gif)$/i,
type: "asset/resource",
generator: {
filename: '../assets/img/[name][ext][query]',
},
},
// Apply plugins to svg assets.
{
test: /\.(svg)$/i,
type: "asset/resource",
generator: {
filename: '../assets/svg/[name][ext][query]',
},
},
// Apply plugins to font assets.
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
generator: {
filename: '../assets/fonts/[name][ext][query]',
},
},
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
}
};
6 September 2023
#923
2 August 2023
#921
27 July 2023
browserslist
support to defaults
(no more IE support); minor updates #920
29 June 2023
#917
29 June 2023
#916
31 May 2023
#910
23 February 2023
#904
17 February 2023
#903
17 February 2023
17 February 2023
#897
#896
#895
#894
#893
#892
f05055c
14 September 2022
24 June 2022
#881
6 April 2022
#869
6 April 2022
#870
#868
#867
#865
14 October 2021
#856
#855
#807
#816
#849
13 August 2021
13 April 2021
#817
#798
#776
e5bb7bb
20 January 2021
#789
#784
#768
161bf9f
30 November 2020
5 November 2020
#704
#767
#617
#763
#762
#690
#761
a41b662
de37e13
23 September 2020
#759
#756
#732
#716
433786f
9 September 2020
3 September 2020
#730
#729
6917861
1 September 2020
#725
#717
#693
#703
#698
#699
#688
7833391
09d6f03
27 May 2020
#678
#681
#642
#644
#676
#641
2283856
27 February 2020
21 February 2020
#630
#627
#616
26c493a
6 February 2020
6 February 2020
#614
#613
#609
#608
b02d114
13 January 2020
#605
#601
20 December 2019
#599
#597
#593
#595
#561
#537
flex-container
#535
#532
#509
#533
#531
#528
#530
c107ca1
2e812df
7fee3c4
30 October 2019
#521
#510
#421
bc185c4
45b4c6d
c3ee0a1
20 December 2019
#600
#560
#591
#451
#536
flex-container
#535
#509
#533
#531
30 October 2019
#530
#527
#522
#523
#517
#526
#448
#518
#513
#445
#500
#504
#506
#507
#498
#503
#452
#496
#479
#476
#473
#470
#466
#458
#457
#373
#444
#439
#450
#441
#440
#425
#426
#427
#438
#420
#416
#415
2359738
77be408
22 May 2019
#417
#413
#388
#387
#379
#380
#377
#370
#371
#369
27 March 2019
#368
#367
#363
#366
#364
#362
#334
#360
#354
#359
#350
#348
#332
#347
#343
#344
#345
#331
#342
#289
#330
#304
#309
#303
#264
#301
#302
#299
#295
#294
#293
#291
#290
#286
#287
#285
#284
#271
#278
#275
#252
#272
#263
#262
#267
#258
#260
#259
#248
#257
#256
#250
#255
#241
#253
#251
#243
#244
#240
#239
#212
#213
#211
#208
#186
#206
#90
327df94
fcc4f17
440f297
16 August 2018
#204
#203
#187
6a4725a
56dc6eb
efa6d2d
9 August 2018
9 August 2018
#176
#173
#175
#172
#154
#116
#117
#118
c244c67
577080c
0bea3b4
16 May 2018
7 May 2018
#111
#104
#101
#108
#106
#105
#100
#97
#95
#94
#92
#87
4bcd989
376a2bf
85c5498
21 December 2017
#64
d586b2e
bf13ac4
7f16174
18 December 2017
20 June 2017
#50
20 May 2017
#48
#47
#46
#44
#45
#42
#43
#41
#39
#37
#36
#35
#32
#33
#30
#29
#28
#26
#21
#23
#20
#16
#12
#11
#10
#4
#9
#6
#5
#3
#2
#1
104ede1
8f2120d
d78192d