Stylus
Stylus is the most progressive preprocessor for CSS. Fast, flexible, no extra syntax. You
will find ready mixins.
You can learn more about the language here.
See the Pen Stylus by Ulyanov Ivan (@ulyanov-programmer) on CodePen.
Images
As usual - your PNG, JPG and others will be optimized, translated into webp... And avif. Yes, it's time to use it.
<img src="img/img.png" alt='yourImg'>
<picture>
<source srcset="img/img.avif"
type="image/avif">
<source srcset="img/img.webp"
type="image/webp">
<img src="img/img.png"
alt='yourImg'>
</picture>
This also works with background images.
Autoincluding the Swiper slider
The assembly automatically connects the Swiper
slider to the project, its styles and scripts, if necessary.
This can be disabled when cleaning the build.
Fast connection of fonts
To the point that you don't have to do anything at all! Seriously, even adaptive fonts are connected automatically.
Just put a file in the folder
@font-face {
↓ Based on the file name
font-family: 'fontName';
font-display: swap;
↓ You do not need to specify the path to the font
src: url("../fonts/fontName.woff2") format("woff2");
↓ It detects automatically
font-weight: 900;
↓ It's to
font-style: italic;
If the font is adaptive, it will be
connected in the same way, but with many different font weights.
}
And of course - the required content.
Of course, you will find here such common things as: fileInclude, autoprefixer, optimization /
cleaning styles and scripts (terser) and font converter (ttf2woff2). And something else that I forgot or
considered not very necessary.
If you are interested in the packages used, look here.
Structure
It's useful to know this, isn't it?
📦#src
┣ 📂docs
┃ ┣ ...
┣ 📂fonts
┃ ┗ yourFonts.ttf/otf/woff/woff2
┣ 📂img
┃ ┗ yourImages.jpg/png/svg/gif/ico/webp/avif
┣ 📂scripts
┃ ┣ 📂modules
┃ ┃ ┗ yourModules.ts/js
┃ ┣ generalScript.ts/js
┃ ┗ sliders.js/js
┣ 📂styles
┃ ┣ 📂modules
┃ ┃ ┣ _nullStyle.styl
┃ ┃ ┗ yourStyleModules.styl
┃ ┣ 📂other
┃ ┃ ┣ _fonts.styl
┃ ┃ ┣ _general.styl
┃ ┃ ┣ _mixins.styl
┃ ┃ ┗ _vars.styl
┃ ┣ style.styl
┃ ┣ _footer.styl
┃ ┗ _header.styl
┣ 📂components
┃ ┣ _header.htm
┃ ┣ _footer.htm
┃ ┣ _headContent.htm
┃ ┗ _modals.htm
┣ index.html
┗ otherPages.html
📦Result
┣ 📂css
┃ ┣ style.css
┃ ┣ style.min.css
┃ ┗ swiper-styles.css //optional
┣ 📂docs //optional
┃ ┗ ...
┣ 📂fonts
┃ ┗ yourFonts.woff2
┣ 📂img
┃ ┗ yourImages.jpg/png/svg/webp/avif
┣ 📂scripts
┃ ┣ 📂modules
┃ ┃ ┣ module.js
┃ ┃ ┗ module.js
┃ ┣ moduleAPI.js
┃ ┣ swiper-scripts.js //optional
┃ ┗ yourScripts.js
┃ index.html
┗ otherPages.html