Sass Gulp boilerplate

Description 📌

This is a nice Sass-gulp boilerplate project built with some tools to make life easy when needed. It helps you to create your Sass code compiled into CSS at running time, also parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It's recommended by Google and, so you can take it easy and write your sass code without any CSS rules vendor prefixes. FORGET ABOUT IT.

Let's go 🚀

These instructions will allow you to obtain a basic handling of the tools shown in this repository, and later on you will be able to use it in your own way, remember to leave your star⭐.

Pre requirements 📋

Installation:

• Make sure you have node.js installed version 14+
• Install Gulp

Running the app

$ npm install
$ gulp

What about images? 🖼️

It minifies PNG - JPEG – GIF -SVG images, and creates Webp and Avif formats, which helps us load the smallest image, these formats must be wrapped in a picture tag, using source tag to work correctly.

How to implement:

How to use 🛠️️

• Link your index.html with the css file saved on build/css directory ✔
• Take images from build/images directory ✔

Sass File Structure ⚙️️️

The main file which compile all file onto a css code with all configuration is style.scss

You need to add in this format @use 'folderName'; ✔

You can structure your scss file using this format by folder. We must have a _index.scss per folder to forward all files onto style.scss ✔

Structure inside _index.scss file ✔

Project Structure

src
│──images
├──scss
│    ├── base
│     ├── _global.scss
│     ├── _index.scss
│     ├── _mixin.scss
│     ├── _normalize.scss
│     ├── _typography.scss
│     ├── _utilities.scss
│     └── _variable.scss
│     
│  
└──style.scss

Build with 🛠️

Love for all of us 🥰

• Autoprefixe
• Css nano
• Gulp
• Gulp Avif
• Gulp Cli
• Gulp Imagemin
• Gulp Postcss
• Gulp Sass
• Gulp Sourcemaps
• Gulp Webp
• Post css
• Sass

This is all friends️ 🐰

• STAY TUNED ✔️
• STAY BLESSERS 👏
• GET THE KNOWLEDGE 🧠
• AND KEEPING GOING 🏍️

Expressions of gratitude 🎁

• Tell everyone 🗣️📢
• Bring a 🍺 to somebody from the team.
• Do not forget saying thanks 🤓.
• etc.

Who Was? ✒️

• Daniel Patricio - Inicial work - danipv54
• Linkedin