Saief Al Emon iamsaief

## _Frequently used js utility functions.md

      
              6 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                iamsaief
                / _Frequently used js utility functions.md
            
            
              Last active
              March 20, 2024 17:46
            
              
                Frequently used js utility functions
              
          
    Frequently used js utility functions

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

  
## _Responsive Typography | Fluid Font Size, SASS Mixin, Utility Class.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                iamsaief
                / _Responsive Typography | Fluid Font Size, SASS Mixin, Utility Class.md
            
            
              Last active
              March 20, 2024 17:46
            
              
                Responsive Typography | Fluid Font Size, SASS Mixin, Utility Class
              
          
    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.

  
## _CSS Framework Building Blocks | Typography, Utility classes, Breakpoints with SASS(SCSS).md

      
              5 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                iamsaief
                / _CSS Framework Building Blocks | Typography, Utility classes, Breakpoints with SASS(SCSS).md
            
            
              Last active
              April 26, 2024 11:19
            
              
                CSS Framework Building Blocks | Typography, Utility classes, Breakpoints with SASS/SCSS
              
          
    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.

  
## README-Fluid-Typography.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                iamsaief
                / README-Fluid-Typography.md
            
            
              Last active
              November 30, 2022 04:05
            
              
                Fluid Typography Utility Classes
              
          
    🎯  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);


## README-Dynamic-SVG-Icon.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                iamsaief
                / README-Dynamic-SVG-Icon.md
            
            
              Last active
              September 29, 2022 19:00
            
          
    Color Changable SVG as background images
* SVG Icon Generatior
* Accept hex color only
* Use as background-image: url(svgIconName(#hex-code));


## README-Utility-Classes.md

      
              3 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                iamsaief
                / README-Utility-Classes.md
            
            
              Last active
              October 8, 2022 15:29
            
              
                Generating responsive utility classes with sass
              
          
    🎯 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.


## emoji-favicon.html
<!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>

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

## README.MD

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                iamsaief
                / README.MD
            
            
              Created
              September 28, 2021 19:59
            
              
                CSS Named Colors
              
          
    A dataset containing named CSS colors.
From MDN: CSS Colors.

  
## string-character-map.js
const characterMap = (str) => {
  const charMap = {};
  str.split("").forEach((char) => {
    if (charMap[char]) {
      charMap[char]++;
    } else {
      charMap[char] = 1;
    }
  });
	<!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>
	// Media Query Mixins
	$breakpoints: (
	xs: 0,
	sm: 576px,
	md: 768px,
	lg: 992px,
	xl: 1200px,
	xxl: 1400px,
	);
	const characterMap = (str) => {
	const charMap = {};
	str.split("").forEach((char) => {
	if (charMap[char]) {
	charMap[char]++;
	} else {
	charMap[char] = 1;
	}
	});