You are here: start » web » new

Web

Setting up a new website

  • node modules: issue following commands in root of website:
    • Bootstrap: npm install bootstrap@5.3.2
    • JQuery: npm install jquery
    • iziToast: npm install izitoast IziToast
    • js-cookie: npm install js-cookie js-cookie
    • luxon: npm install luxon luxon API
    • formvalidation: formvalidation.io
      • npm install @form-validation/bundle
      • npm install @form-validation/locales
      • npm install @form-validation/styles
      • npm install @form-validation/plugin-j
    • sortableJS: sortableJS
      • npm install sortablejs
      • npm install jquery-sortablejs
    • clipboardJS: npm install clipboard https://clipboardjs.com/
    • vanillajs-datepicker: npm install vanillajs-datepicker vanillajs-datepicker
      • Important: stopPropagation if used in a modal (to prevent actions like loading and submitting to happen automatically in the modal):
        • $('div.daterange').on('show.bs.modal', (e) => {
  e.stopPropagation();
});
    • tinyMCE: npm install tinymce@^6 tinyMCE
  • Bootstrap customization
    • Create /scss folder and create custom.scss in it
  • composer modules: issue following commands in root of website:
    • simpleMysqli: composer require websitebeaver/simple-mysqli Simple-MySQLi
    • phpMailer: composer require phpmailer/phpmailer PHPMailer
  • Use https://realfavicongenerator.net/ to create favicons
  • Add Material Symbols Rounded Google font Google Fonts
  • plugins
    • clockpicker: clockpicker
      • use jQuery clockpicker (Bootstrap clockpicker does not work in Bootstrap 5) + adapt jquery-clockpicker.css (remove all .btn css rules as they conflict with Bootstrap)