Weboack Boilerplate 🚀

Todos

• Remove file-loader and raw-loader in favor of asset modules.
• JavaScript Form validation.

Features

• Webpack
• Babel
• Sass
• PostCSS
• EJS
• Bootstrap
• Vanilla JS (plain JavaScript)
• Lazyloading
• Parallax

Pages

New pages are added in "config/templates", then an EJS file should be created accordingly in "src/pages". Now there is only one page as a demo.

Components

• alert
  • alert--danger
  • alert--success
  • alert--info
  • alert--warning
• banner
  • banner--none
• button
  • btn-bordered
  • btn
    • btn--primary
    • btn--none
    • btn--danger
    • btn--success
    • btn--grey
    • btn--fullwidth
    • btn--has-icon
• footer
• form
  • form--limited-width
    • Checkbox
    • File
    • Select
    • Switch
    • Text
• header
  • main-nav
• langs
• news
• pagination
• socials
• text-block

Scripts

Utility functions

Located in "src/assets/scripts/utils.js"

• resetForm();
• Logger
  • .debug();
  • .silly();
  • .error();
• preloadImage();
• waitForTransition();
• isTouch();
• debounce();
• makeRequest(); // Promisified XHR
• delay(); // Promisified timeout

Main scripts

Located in "src/assets/scripts/main.js"

• checkJs(); // Checks JS disabling
• createGlobalWarning(message); // Creates a global warning message in the body element
• detectBrowser();
• setActiveNav();
• setCurrentYear();
• hasScrollbar(); // Detects horizontal scrollbar
• setTargetBlank(); // Add target= "_blank" and rel= "noopener noreferrer" for external links

Parallax

Located in "src/assets/scripts/parallax.js"

Define the parallax type as an HTML attribute for the element (data-parallax= "" ), it takes scale and positionY as a value. Set the parallax strength as an HTML attribute for the element (data-parallax-ratio= ".5" ) Parallax ratio can be specified for each breakpoint like the following: data-parallax-ratio-lg data-parallax-ratio-md data-parallax-ratio-sm

Lazyloading

Located in "src/assets/scripts/lazyloading.js" Styles are in "src/assets/styles/lazyloading.scss"

Each lazy-loaded image should have width and height, and on the wrapping "figure" tag we add its aspect ratio as a "padding-bottom" style rule. Bottom padding is calculated this way:

(height / width) * 100

The HTML markup of a lazy-loaded image is:

<figureclass= "lazy-loading"style= "padding-bottom: 75%;">
<img
class= ""
alt= ""
width= "800"
height= "600"
src= "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
data-src= "./link-to-image"
/>
<spanclass= "lazy-loading__loader"></span>
<noscript><imgsrc= "./link-to-image"alt= "" /></noscript>
</figure>

(600 / 800) * 100 = 75

Styles

We're using BEM methodology for naming.

Helper CSS classes

Spaces

• .mb-xs
• .mb-sm
• .mb-md
• .mb-lg
• .mb-xl
• .mb-subsection
• .mb-section

Hide elements

• .hide-md
• .hide-lg

Alignment

• .text-left
• .text-center
• .text-right

SCSS Variables

You can view/edit the available SCSS variables in "src/assets/styles/abstracts/_variables.scss".

// Colors
$primary-accent:#1c6ef7;
$secondary-accent:rgb(119,223,255);
$main-bg-color:#f4f6f8;
$dark-bg-color:#0f1547;
$dark-bg-color-shaded:#171e5a;
$font-dark-color:#00315c;
$font-light-color:rgba($font-dark-color,0.5);
$border-color:rgba($font-dark-color,0.1);

$success-color:#35c636;
$danger-color:#ed2554;
$warning-color:#de9c3e;

// Border radius
$box-corner:1rem;

// Spaces
$container-spacing:4vw;

SCSS Mixins

You can view/edit the available SCSS mixins in "src/assets/styles/abstracts/_mixins.scss".

• sm
• md
• lg
• xl
• xxl
• abs-center
• absolute
• fixed
• relative

Dependencies

Development

webpack

• webpack- Module and asset bundler.
• webpack-cli- Command line interface for webpack
• webpack-dev-server- Development server for webpack
• webpack-merge- Simplify development/production configuration
• cross-env- Cross platform configuration

Babel

• @babel/core- Transpile ES6+ to backwards compatible JavaScript
• @babel/plugin-proposal-class-properties- Use properties directly on a class (an example Babel config)
• @babel/preset-env- Smart defaults for Babel

Loaders

• babel-loader- Transpile files with Babel and webpack
• ejs-webpack-loader- EJS loader for webpack. Usesejsfunction to compile templates.
• sass-loader- Load SCSS and compile to CSS
  • node-sass- Node Sass
  • sass-resources-loader- This loader will load your SASS resources into every required SASS module.
• postcss-loader- Process CSS with PostCSS
  • postcss-preset-env- Sensible defaults for PostCSS
• css-loader- Resolve CSS imports
• style-loader- Inject CSS into the DOM
• file-loader- The file-loader resolves import/require() on a file into a url and emits the file into the output directory.
• html-loader- Exports HTML as string. HTML is minimized when the compiler demands.
• raw-loader- A loader for webpack that allows importing files as a String.

Plugins

• clean-webpack-plugin- Remove/clean build folders
• copy-webpack-plugin- Copy files to build directory
• html-webpack-plugin- Generate HTML files from template
• mini-css-extract-plugin- Extract CSS into separate files
• css-minimizer-webpack-plugin- Optimize and minimize CSS assets
• image-minimizer-webpack-plugin- Optimize images
  • imagemin-jpegtran
  • imagemin-optipng
  • imagemin-svgo

Linters

• eslint- Enforce styleguide across application
• eslint-config-airbnb-base- Base styleguide to enforce rules
• eslint-config-prettier- Implment prettier rules
• eslint-plugin-import- Implment import rules
• eslint-plugin-prettier- Dependency for prettier usage with ESLint
• eslint-import-resolver-webpack- Throw exceptions for import/export in webpack
• eslint-webpack-plugin- ESLint configuration for webpack
• prettier- Dependency forprettier-webpack-pluginplugin
• prettier-webpack-plugin- Prettier configuration for webpack
• stylelint- A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
  • stylelint-webpack-plugin- Lint CSS/SCSS files
  • stylelint-config-standardTurns on additional rules to enforce the common stylistic conventions found within a handful of CSS styleguides
  • stylelint-csstree-validatorCSS syntax validator based on csstree as plugin for stylelint.
  • stylelint-scssA collection of SCSS specific linting rules for stylelint (in a form of a plugin).

Production

bootstrapBootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains CSS- and JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

Open Graph Protocol

Change Open Graph Protocol data before production to be dynamic for the current page:

Located in the head tag:

<metaproperty= "og:locale"content= "tr-TR"/>
<metaproperty= "og:type"content= "website"/>
<metaproperty= "og:title"content= "Weboack Boilerplate"/>
<metaproperty= "og:description"content= "" />
<metaproperty= "og:url"content= "https://onyxdev.net/"/>
<metaproperty= "og:site_name"content= "Weboack Boilerplate"/>
<metaproperty= "og:image"content= "LINK_TO_IMAGE"/>
<metaproperty= "og:image:type"content= "image/jpeg"/>
<metaproperty= "og:image:width"content= "1200"/>
<metaproperty= "og:image:height"content= "630"/>
<metaname= "twitter:title"content= "Weboack Boilerplate"/>
<metaname= "twitter:description"content= "" />
<metaname= "twitter:image"content= "LINK_TO_IMAGE"/>
<metaname= "twitter:card"content= "summary_large_image"/>
<metaname= "twitter:image:alt"content= "onyxdev.net"/>

General

How to launch the project

InstallNode.jsand then open the Terminal/CMD and navigate to the project's folder. Run the following command:

npm insatll

Development evnironment

npm start

You can view the development server atlocalhost:8080.

Production build

npm run build

Author

Obada Qawwas

Stay safe 😷