Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/rigon/rigon.github.io

Ricardo Gonçalves homepage
https://github.com/rigon/rigon.github.io

Last synced: 4 months ago
JSON representation

Ricardo Gonçalves homepage

Awesome Lists containing this project

README 

          
# Bootstrap 5 + WebPack 5 = Boilerplate



This is a professional front-end template for building web apps and sites faster, without having to create the basic

setup on your own, every time you start a new project.



The template is based on the [Bootstrap Framework](http://getbootstrap.com/) in version 5 and

uses [Webpack](https://webpack.js.org/) in version 5 as a flexible and modern module bundler. All common features for

front-end projects (like SCSS compilation, minifying of Assets, etc.) are included out of the box.



In addition to the basic front-end project setup, I added some cool features like a configurable image resizing command

to make generating responsive images a breeze.



## Table of Contents



1. [Requirements](#1-requirements)

1. [Quick Start](#2-quick-start)

1. [Environment Configuration](#3-environment-configuration)

1. [Adding Google Fonts](#4-adding-google-fonts)

1. [Adding Responsive Images](#5-adding-responsive-images)

1. [Image Credits](#6-image-credits)



## 1. Requirements



The boilerplate needs [Node.js](https://nodejs.org/en/) to be installed on your system. It was tested with version 12

and newer.



## 2. Quick Start



1. Clone the repository into a new folder for your new project.



   ```bash

   git clone git@github.com:noreading/bootstrap5-webpack-boilerplate.git my-project

   ```

2. Remove the .git directory to add your own CVS later.



   ```bash

   rm -rf .git

   ```



3. Update the package.json.



   ```JSON

      {

        "name": "my-project",

        "description": "A description of my new project",

        "author": "Your Name",

        "license": "MIT"

      }

   ```



4. Install needed dependencies



   ```bash

   npm install

   ```



5. Run webpack



   ```bash

   npm run dev

   ```



   The dev command will start Webpack and tell it to watch for changes in JS and SCSS files, to recompile the needed

   assets.



   If you want to compile all assets for production usage, run the following command.



   ```bash

   npm run build

   ```



   This command tells webpack to run in production mode and compiles all of the assets in a minified version, to deliver

   smaller files for your users.



## 3. Environment Configuration



If you use sensitive information in your code, like API keys or encryption tokens, you should never store those in your

code repository. This could lead to a security issue, especially if the repository is public.



Therefore, I included the [dotenv-webpack](https://github.com/mrsteele/dotenv-webpack) plugin in this boilerplate, that

enables you to store all your sensitive information in a `.env` file, that is ignored by git.



The `.env.default` file should contain all the variables that your application needs, but without the real data and

should contain either empty variables or default values that can be used by everyone. The variables will get replaced

during asset compilation so that only those variables are added, that are referenced in your code.



It is a common scheme to use an uppercase syntax for environment variables, as you can see in the example below.

Comments inside of .env files start with a hash.



```

# GOOGLE APIs



GOOGLE_MAPS_API_KEY=vEVmihkWZ2fqedyHQT***************

YOUTUBE_API_KEY=TnJ8YOfVuL9bbFH83T13N****************



# CACHING

CACHE_ENABLED=false

CACHE_TIMEOUT=3600

```



You can test the usage of environment variables by editing the `.envt` file and changing the value of `HELLO`. After

re-compiling the assets you should see a message in the developer console, as soon as you visit the demo page.



**Important:**



After each change of the `.env` file you need to reload Webpack, as the environment is only loaded once per runtime. If

you've got an active `npm run dev` command, you need to stop and re-run it, for the changes to take effect.



## 4. Adding Google Fonts



If you want to add fonts from [fonts.google.com](https://fonts.google.com/), you should follow a few easy steps.   

The boilerplate uses the [Roboto](https://fonts.google.com/specimen/Roboto) as an example.



1. Download the required font families as ZIP files from [fonts.google.com](https://fonts.google.com/).

2. Extract the files and copy the folders to `/fonts/` in the theme directory.

3. Generate the formats "eot", "woff" and "woff2" using [transfonter.org](https://transfonter.org/) and save them.

4. Open the file `src/scss/_fonts.scss` and use the mixin `googleFont()` to add the fonts.



The mixin has 4 parameters.



| Name | Type | Description  |

|:-----|:-----|:-------------|

| name | `String` | The name of the font, used as value for `font-family` properties. |

| folder | `String` | The name of the folder, that is extracted from the ZIP file. |

| files | `String` | The first part of font filenames. |

| weights | `List` | The list of weights, that should be loaded. |



Example:



```scss

@include googleFont((

  "name": "IBM Plex Sans",

  "folder": "IBM_Plex_Sans",

  "files": "IBMPlexSans",

  "weights": (300, 400, 700)

));

```



There is also a second mixin, that can handle multiple fonts at once. This reduces the amount of code needed, if your

website or application requires multiple fonts to be loaded.



Example:



```scss

@include googleFonts((

  (

    "name": "Roboto",

    "folder": "Roboto",

    "files": "Roboto",

    "weights": (300, 400, 700)

  ),

  (

    "name": "Besley",

    "folder": "Besley",

    "files": "Besley",

    "weights": (300, 400, 700)

  ),

));

```



## 5. Adding Responsive Images



### 5.1 What is it?



This boilerplate includes a command to resize images based on a configuration file, to get rid of the hassle to care

about the responsive image sizes manually. One of the benefits of this process is that it works on all major operating

systems, without the need to do any manual installations.



If you want to use the resizing feature, please edit the file `images.config.js` in the root directory and change all

settings to your needs. You can add multiple collections with different configurations for greatest flexibility.



In order for this command to work properly you need to have "clean" filenames for your images, that don't match the

patterns used to create the resized filenames automatically. The filenames get a postfix, based on the resizing settings

for the images width and height.



Filenames, that will be recognized as original images, are as follows.



  

    

      Allowed Filename

      Description

    

  

  

    

      my-image.jpg

      Simple filenames

    

    

      my-image-1982-to-2018.jpg

      Filenames including numbers, also at the end.

    

    

      my-image-400x200-tablet.jpg

      Filenames including dimensions, but not at the end.

    

    

      my-image_400x200.jpg

      Filenames including dimensions, but using an underscore.

    

  



Filenames, that will **not** be recognized as original images, are as follows.



  

    

      Prohibited Filename

      Description

      Pattern

    

  

  

    

      your-image-w200.jpg

      Resized using a fixed width only

      {filename}-w{width}.{extension}

    

    

      your-image-h400.jpg

      Resized using a fixed height only

      {filename}-h{height}.{extension}

    

    

      your-image-200x400.jpg

      Resized using a fixed width and height

      {filename}-{width}x{height}.{extension}

    

  



You can use a [test tool](https://regex101.com/r/6f2cEu/4) to check if your filenames will work correctly, by adding one

filename per line into the "Test Strings" field. This helps to ensure that none of your images will be deleted.



You can use the regular expression to test files on your local machine, too. On Linux and Mac operating systems you can

check if any image in a folder would conflict with the resizing tool by using the following command:



```bash

find ./ | grep -E ".*\-([0-9]+x[0-9]+|w[0-9]+|h[0-9]+)\.[a-z]+$"

```



All files that are listed should get renamed, following the rules you can see in the tables above.



---



### 5.2 The Configuration



The responsive image configuration is saved in the `images.config.js` file, located in the root directory of the

project.



#### 5.2.1 Global Settings



The configuration has some global settings, that you should set to your personal preferences.



  

    

      Option

      Description

      Default

    

  

  

    

      useTrash

      Moves files to the trash instead of deleting them directly, when using the "recreate" or "remove" argument.

      false

    

  



#### 5.2.2 Collections



The configuration uses **collections** which include a set of configuration options to resize images. This allows you to

define different resizing rules for multiple directories.



Each collection has the following options.



  

    

      Option

      Description

      Required

      Default

    

  

  

    

      name

      The name of the collection, to identify it in error messages, etc.

      yes

      -

    

    

      source

      The source directory of the image files that should get resized.

      yes

      -

    

    

      recursive

      Resize images in subdirectories, too?

      no

      true

    

    

      sizes

      The configurations for image sizes that get created.

      yes

      -

    

  



#### 5.2.3 Sizes



Each collection has the option "sizes" which includes a set of configurations for different image sizes that will be

generated. Width and height are optional, if at least one of them is set.



Each size has the following options.



  

    

      Option

      Type

      Description

      Required

      Default

    

  

  

    

      name

      {string}

      The name of the size, to identify it in error messages, etc.

      yes

      -

    

    

      width

      {number}

      The width of the resized image.

      no

      -

    

    

      height

      {number}

      The height of the resized image.

      no

      -

    

    

      fit

      {string}

      The method by which the image should fit.



        cover
Crop to cover both provided dimensions.

contain
Embed within both provided dimensions.

file
Ignore the aspect ratio of the input and stretch to both provided dimensions.

inside
Preserving aspect ratio, resize the image to be as large as possible while ensuring its dimensions are less than or equal to both those specified.

outside
Preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to both those specified.

      

      no

      cover

    

    

      position

      {string}

      The position When using a fit of "cover" or "contain"

left, right, top, bottom, center, left top, right top, left bottom, right bottom

      no

      center

    

  



---



### 5.3 The Command Line Arguments



The resizing command supports different arguments to remove resized images, recreate all images, etc.



  

    

      Command

      Description

    

  

  

    

      npm run images

      Creates all resized versions of a file that are missing.

    

    

      npm run images recreate

      Removes the resized versions of all files and recreates them.

    

    

      npm run images remove

      Removes the resized versions of all files.

    

  



**Important:**



The recreation and removal arguments will force the command to remove all images it detects as being resized versions (

by their filename). If you use other tools for your images that add postfixes to the filenames, this might lead to false

positives, so please backup your files before you run this.



```bash

npm run images remove

```



---



## 6. Image Credits



All placeholder images used in the `index.html` file are downloaded from [pexels.com](https://www.pexels.com/),

and [pixabay.com](https://pixabay.com/). Those are two fantastic collections of free stock photos from photographers

around the globe.



If you're one of the photographers and would like to change the linked website or get an image removed from the

boilerplate, please shoot me an email to code@dominik-hanke.de and I'll update it as soon as possible.



  

    

      Carousel Image

      Photographer

      Website

      Image Source

    

  

  

    

      1

      

        kailash kumar

      

      

        facebook page

      

      

        pexels.com

      

    

    

      2

      

        Cleverpix

      

      

        cleverpix.com.au

      

      

        pixabay.com

      

    

    

      3

      

        GregMontani

      

      

        -

      

      

        pixabay.com

      

    

  







  

    Album Photo

    Photographer

    Website

    Image Source

  

  

    

      1

      

        skeeze

      

      

        -

      

      

        pixabay.com

      

    

    

      2

      

        shottrotter

      

      

        shottrotter.be

      

      

        pexels.com

      

    

    

      3

      

        sasint

      

      

        pixartasia.com

      

      

        pixabay.com

      

    

    

      4

      

        Walkerssk

      

      

        walkers.sk

      

      

        pixabay.com

      

    

    

      5

      

        Marcocarli

      

      

        -

      

      

        pixabay.com

      

    

    

      6

      

        Jaymantri

      

      

        jaymantri.com

      

      

        pexels.com

      

    

    

      7

      

        veeterzy

      

      

        instagram profile

      

      

        pexels.com

      

    

    

      8

      

        Pok Rie

      

      

        -

      

      

        pexels.com