Gulp

Overview

The Gulp Boilerplate for generic CSS/HTML/JS development offers an efficient and structured way to kickstart your web development projects. This boilerplate is designed to streamline the workflow by facilitating the building and compiling of front-end assets, ensuring a seamless development experience. With support for popular technologies like Sass and Pug, it provides flexibility for developers to create engaging and responsive web applications.

This boilerplate not only organizes the code in a clear and manageable directory structure but also enforces best practices with its BEM naming convention. Whether you're an experienced developer or just starting, this boilerplate offers essential tools and features to enhance your productivity and maintain consistency throughout your projects.

Features

• Structured Directories: The src/ folder is designated for writing new code while the build/ folder contains the compiled output, preventing accidental edits.

• HTML Building Options: Choose between traditional HTML with /src/index.html and /src/partials/, or utilize Pug templating for more dynamic content.

• Sass Compilation: Leverage Sass for styling with automatic prefixing thanks to Autoprefixer, ensuring compatibility across various browsers.

• Icon Management: Easily create and manage SVG icons with sprite sheets and icon fonts, enhancing visual consistency across your site.

• Simple Include System: Utilize gulp-rigger for a straightforward include system in both JavaScript and HTML, improving code manageability.

• BEM Naming Convention: Follow the BEM convention for naming blocks, elements, and modifications, ensuring clarity and structure in your CSS classes.

• Layout and State Prefixes: Naming conventions for layout blocks and states (e.g., .l-*, .is-*) simplify identification and promote clean, modular design.

• JavaScript Hooks: Consistently apply JavaScript hooks using the .js-* prefix for easier integration and functionality within your scripts.