Saief Al Emon iamsaief

🎯 Responsive Utility Classes with SASS/SCSS

✨ For this demo utility classes are generated only for padding. But the possibilities are endless; using this demo you can extend it even further as much as you want.

👨‍💻 The classes are named using the format {property}{sides}-{size} for default (xs) and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl. To enable responsive utility just put "responsive": true for that particular property. e.g. The classes are, .p-5, .p-sm-5, .p-md-5, .p-lg-5, p-xl-5, .p-xxl-5 and so on.

Classes follow a 5-grid structure.

Color Changable SVG as background images

* SVG Icon Generatior
* Accept hex color only
* Use as background-image: url(svgIconName(#hex-code));

🎯 Fluid Typography Utility Classes SASS mixin

✨ The idea of fluid typography has been around in application development for a while, but to make this work in the browser, developers had to use a variety of solutions.

👨‍💻 Depending on the viewport width, fluid typography adjusts nicely between the minimum and maximum value. Typically, it starts at a minimum value and stays constant until a certain screen width point, at which time it starts to rise. When it hits a maximum value at a different screen width, it keeps going with that maximum value.

👨‍🏫 For instance, if we wanted our font size to be between 2em and 3em, where 2em is the minimum size at the smallest viewport width of 320px and 3em is the maximum size at the highest viewport width of 1366px. Then our equation will look like this - font-size: calc(2em + 1 * (100vw - 320px) / 1046);

CSS Framework Building Blocks | Typography, Utility classes, Breakpoints with SASS/SCSS

🎯 Utility Classes

✨ For this demo utility classes are generated only for padding. But the possibilities are endless; using this demo you can extend it even further as much as you want.

👨‍💻 The classes are named using the format {property}{sides}-{size} for default (xs) and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl. To enable responsive utility just put "responsive": true for that particular property. e.g. The classes are, .p-5, .p-sm-5, .p-md-5, .p-lg-5, p-xl-5, .p-xxl-5 and so on.

Responsive Typography | Fluid Font Size, SASS Mixin, Utility Class

This Sass mixin allows you to create fluid font sizes that will scale responsively based on the viewport width. It takes two arguments:

Min font size: The minimum font size in pixels.
Max font size: The maximum font size in pixels.
(optional) Min viewport width: The minimum viewport width in pixels.
(optional) Max viewport width: The maximum viewport width in pixels.

The mixin will then calculate a fluid font size that falls within that range, based on the current viewport width.

Frequently used js utility functions

getRandomUUID()
getFluidFontSize()
getFirstNWords()
getFormattedTimeDiff()
cn()

	// Media Query Mixins
	$breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px,
	xxl: 1400px,
	);

	<!DOCTYPE html>
	<html lang="en">
	</head>
	<!-- Emoji as Favicon -->
	<link
	rel="icon"
	href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🦄</text></svg>"
	/>
	</head>
	<body>