Web Starter Kit
Web Starter Kit is an opinionated boilerplate for web development. A solid starting point for both professionals and newcomers to the industry.
Overview
Web Starter Kit (WSK) is a modern web starter kit designed for web development. It provides a solid starting point for both professionals and newcomers to the industry, with tools for building a great experience across multiple devices.
Features
- Easy start: WSK does not use a responsive boilerplate, allowing you to make your own decisions on how to make your site responsive.
- HTML templating: WSK uses gulp-file-include for templating HTML files.
- Sass support: Easily compile Sass into CSS with support for variables, mixins, and more. In WSK, the Dart-Sass version compiler is used, following Sass guidelines.
- PostCSS support: WSK connects with the most usable plugins library for CSS optimization, including autoprefixer, cssnano, and postcss-sort-media-queries.
- JavaScript ES6+ Support: Optional support for JavaScript ES6+ features. The ES6+ source code is automatically transpiled to ES5 for wide browser support using Webpack and Babel.
- Code Linting: JavaScript code linting is done using esLint with airbnb-base rules, while HTML code linting is done using HTMLHint.
- Performance optimization: WSK minifies and concatenates JavaScript, CSS, HTML, and images to help keep your pages lean. Use npm run dev or gulp to create an optimized version of your project assets.
- Built-in HTTP Server: WSK includes a built-in server for previewing your site locally while you develop and iterate.
- Live Browser Reloading: The browser is automatically reloaded in real-time when edits are made without the need for an extension. Use npm run dev or gulp and edit your files.
- Cross-device Synchronization: WSK allows you to synchronize clicks, scrolls, forms, and live-reload across multiple devices as you edit your project. Powered by BrowserSync, simply run npm run dev or gulp and open the provided IP on other devices on your network.
Summary
Web Starter Kit (WSK) is an opinionated boilerplate for web development that provides a solid starting point for both professionals and newcomers to the industry. It offers features such as easy customization, HTML templating, Sass and PostCSS support, JavaScript ES6+ support, code linting, performance optimization, a built-in HTTP server, live browser reloading, and cross-device synchronization. By following the installation guide, users can quickly set up and start using WSK for their web development projects.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Gulp
Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.
- Postcss
PostCSS is a popular open-source tool that enables web developers to transform CSS styles with JavaScript plugins. It allows for efficient processing of CSS styles, from applying vendor prefixes to improving browser compatibility, ultimately resulting in cleaner, faster, and more maintainable code.
- Webpack
Webpack is a popular open-source module bundler for JavaScript applications that bundles and optimizes the code and its dependencies for production-ready deployment. It can also be used to transform other types of assets such as CSS, images, and fonts.