CSS CS

1. Random Color Generator :Visit & Generate Color
2. CSS Flexbox Classes to use like bootstrap
*{
	margin: 0;
	padding: 0;
	outline: none;
	transition: 0.5s ease;
	box-sizing: border-box;
	font-family: sans-serif;
}
.flex-row{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.flex-row-space-between{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;	
}
.flex-row-space-around{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;	
}
.flex-row-space-evenly{
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	flex-wrap: wrap;	
}
.flex-column{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.flex-no-wrap{
	flex-wrap: nowrap;
}

3. Center and full width
element{
	width: 100%;
	text-align: center;
	margin: 0 auto;
}

4. Google Fonts Links and Font-family
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
font-family: 'Inter', sans-serif;

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300&display=swap');
font-family: 'Manrope', sans-serif;

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
font-family: 'Roboto', sans-serif;

@import url('https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap');
font-family: 'Oxygen', sans-serif;

@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap');
font-family: 'Raleway', sans-serif;

@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
font-family: 'PT Sans', sans-serif;

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
font-family: 'Poppins', sans-serif;

@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital@1&display=swap');
font-family: 'PT Sans', sans-serif;

@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
font-family: 'Quicksand', sans-serif;

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
font-family: 'Source Code Pro', monospace;

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300&display=swap');
font-family: 'IBM Plex Sans', sans-serif;

5. System Fonts
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
  "Oxygen", "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol";
}

6. Pseudo Elements for border-bottom
a::after{
    content: "";
    display: block;
    width: 0%;
    height: 2px;
    background-color: black;
    transition: 0.5s ease;
}
a:hover::after{
    width: 100%;
}

7. CSS Animations
selector{
    animation-name: animationName;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  	animation-direction: alternate;
    animation-duration: .5s;
  	animation-delay: 0s;
}

/* Animation property in one line */
selector{
	animation: name duration timing-function delay iteration-count direction fill-mode;
}

@keyframes animationName {
	from {
			/* css properties */
	}	
	to{
			/* css properties */
	}
}

8. Center any content
element{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

9. Media Quries
@media only screen and (max-width: 420px){
	selector{
		/* Your changes when max-width of screen is 420px...*/
	}
}

/*
0px — 480px: Mobile devices
481px — 768px: iPads, Tablets
769px — 1024px: Small screens, laptops
1025px — 1200px: Desktops, large screens
1201px and more —  Extra large screens, TV
*/

10. Best Box-Shadow
box-shadow: 0px 0px 70px -12px rgb(0, 0, 0);

11. Button Style
button{
	padding: 10px 15px;
	background: whitesmoke;
	color: black;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 1.2em;
}

12. linear-gradient Background
bg{
    background: linear-gradient(#0000004f ,#0000007a),url(photo.jpg);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

13. Best Colors for websites
:root{
	--blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}