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.
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⭐.
$ npm install
$ gulp
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.
- Link your index.html with the css file saved on build/css directory ✔
- Take images from build/images directory ✔
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 ✔
src
│──images
├──scss
│ ├── base
│ ├── _global.scss
│ ├── _index.scss
│ ├── _mixin.scss
│ ├── _normalize.scss
│ ├── _typography.scss
│ ├── _utilities.scss
│ └── _variable.scss
│
│
└──style.scss
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
- STAY TUNED ✔️
- STAY BLESSERS 👏
- GET THE KNOWLEDGE 🧠
- AND KEEPING GOING 🏍️
- Tell everyone 🗣️📢
- Bring a 🍺 to somebody from the team.
- Do not forget saying thanks 🤓.
- etc.