Modern Web Boilerplate
All-in-one Complete Modern Front-end Development Boilerplate for Starters
Overview
The Modern Front-end Development Boilerplate is an easy-to-use, all-in-one starter boilerplate that helps developers develop, build, and deploy web projects. With its latest version (v1.3), it introduces the ability to read Sketch files and extract Artboards into icon-fonts. The boilerplate also includes an Icon-Font Browser with features such as copy-to-clipboard HTML, SCSS options, and clear documentation on usage. It allows developers to manage everything inside a setting.json file and offers multiple frontend SCSS frameworks for flexibility.
Features
- Multiple frontend SCSS frameworks available (e.g., New Bootstrap 4 and Foundation 6)
- Easy to manage folder structure, customizable as per requirements (e.g., MVC framework-like folder structure)
- Centralized management of js, img, fonts, and project settings
- Ability to auto switch remote URL
- Convenient dev and build tasks for Windows users using provided shortcut bat files
- Hassle-free font-face generation with the option to switch remote URL during the build process
- Integrated project backup feature for source and build files
- Automatic deployment to production server
- Secure JS file with JS obfuscation (Note: Final production JS file size may increase significantly)
- Icon-Fonts Generation - v1.3 (New addition)
Other Features:
- Auto Browser Refresh
- Compass Utility Loader (alternative to Ruby Compass)
- Auto Fetch Library from CDNJs or Google libraries based on package.json package version
- Integrated CDN fallbacks
- JS Uglify
- Image Minify and Optimization
- Responsive Typography
Summary
The Modern Front-end Development Boilerplate is a comprehensive starter boilerplate that simplifies the process of developing, building, and deploying web projects. With its latest version, it introduces new features such as the ability to read Sketch files and generate icon-fonts, making it a versatile tool for front-end development. With its integrated features and convenient installation process, it provides developers with a hassle-free development experience.
- HTML
HTML templates are pre-designed and pre-built web pages that can be customized and used as a basis for building websites. They often include common elements such as headers, footers, menus, and content sections, and can be easily edited using HTML and CSS to fit specific branding and content needs.
- Bootstrap
Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.
- 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.
- 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.