- Remove file-loader and raw-loader in favor of asset modules.
- JavaScript Form validation.
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.
- 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
- form--limited-width
- header
- main-nav
- langs
- news
- pagination
- socials
- text-block
Located in "src/assets/scripts/utils.js"
- resetForm();
- Logger
- .debug();
- .silly();
- .error();
- preloadImage();
- waitForTransition();
- isTouch();
- debounce();
- makeRequest(); // Promisified XHR
- delay(); // Promisified timeout
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
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
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:
<figure class="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"
/>
<span class="lazy-loading__loader"></span>
<noscript><img src="./link-to-image" alt="" /></noscript>
</figure>
(600 / 800) * 100 = 75
We're using BEM methodology for naming.
- .mb-xs
- .mb-sm
- .mb-md
- .mb-lg
- .mb-xl
- .mb-subsection
- .mb-section
- .hide-md
- .hide-lg
- .text-left
- .text-center
- .text-right
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;
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
webpack
- Module and asset bundler.webpack-cli
- Command line interface for webpackwebpack-dev-server
- Development server for webpackwebpack-merge
- Simplify development/production configurationcross-env
- Cross platform configuration
@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
babel-loader
- Transpile files with Babel and webpackejs-webpack-loader
- EJS loader for webpack. Uses ejs function to compile templates.sass-loader
- Load SCSS and compile to CSSnode-sass
- Node Sasssass-resources-loader
- This loader will load your SASS resources into every required SASS module.
postcss-loader
- Process CSS with PostCSSpostcss-preset-env
- Sensible defaults for PostCSS
css-loader
- Resolve CSS importsstyle-loader
- Inject CSS into the DOMfile-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.
clean-webpack-plugin
- Remove/clean build folderscopy-webpack-plugin
- Copy files to build directoryhtml-webpack-plugin
- Generate HTML files from templatemini-css-extract-plugin
- Extract CSS into separate filescss-minimizer-webpack-plugin
- Optimize and minimize CSS assetsimage-minimizer-webpack-plugin
- Optimize images
eslint
- Enforce styleguide across applicationeslint-config-airbnb-base
- Base styleguide to enforce ruleseslint-config-prettier
- Implment prettier ruleseslint-plugin-import
- Implment import ruleseslint-plugin-prettier
- Dependency for prettier usage with ESLinteslint-import-resolver-webpack
- Throw exceptions for import/export in webpackeslint-webpack-plugin
- ESLint configuration for webpackprettier
- Dependency forprettier-webpack-plugin
pluginprettier-webpack-plugin
- Prettier configuration for webpackstylelint
- A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.stylelint-webpack-plugin
- Lint CSS/SCSS filesstylelint-config-standard
Turns on additional rules to enforce the common stylistic conventions found within a handful of CSS styleguidesstylelint-csstree-validator
CSS syntax validator based on csstree as plugin for stylelint.stylelint-scss
A collection of SCSS specific linting rules for stylelint (in a form of a plugin).
bootstrap
Bootstrap 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.
Located in the head tag:
<meta property="og:locale" content="tr-TR" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Weboack Boilerplate" />
<meta property="og:description" content="" />
<meta property="og:url" content="https://onyxdev.net/" />
<meta property="og:site_name" content="Weboack Boilerplate" />
<meta property="og:image" content="LINK_TO_IMAGE" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:title" content="Weboack Boilerplate" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="LINK_TO_IMAGE" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image:alt" content="onyxdev.net" />
Install Node.js and then open the Terminal/CMD and navigate to the project's folder. Run the following command:
npm insatll
npm start
You can view the development server at localhost:8080
.
npm run build