|
1 | 1 | [ |
2 | 2 | {"language": "scss", {"categoryName":"Typography","snippets":[{"title":"Line Clamp Mixin","description":"A Sass mixin to clamp text to a specific number of lines.","code":["@mixin line-clamp($number) {"," display: -webkit-box;"," -webkit-box-orient: vertical;"," -webkit-line-clamp: $number;"," overflow: hidden;","},"],"tags":["sass","mixin","typography","css"],"author":"technoph1le"},{"title":"Text Overflow Ellipsis","description":"Ensures long text is truncated with an ellipsis.","code":["@mixin text-ellipsis {"," overflow: hidden;"," white-space: nowrap;"," text-overflow: ellipsis;","}"],"tags":["sass","mixin","text","css"],"author":"technoph1le"},{"title":"Font Import Helper","description":"Simplifies importing custom fonts in Sass.","code":["@mixin import-font($family, $weight: 400, $style: normal) {"," @font-face {"," font-family: #{$family};"," font-weight: #{$weight};"," font-style: #{$style};"," src: url('/fonts/#{$family}-#{$weight}.woff2') format('woff2'),"," url('/fonts/#{$family}-#{$weight}.woff') format('woff');"," }","}"],"tags":["sass","mixin","fonts","css"],"author":"technoph1le"},{"title":"Text Gradient","description":"Adds a gradient color effect to text.","code":["@mixin text-gradient($from, $to) {"," background: linear-gradient(to right, $from, $to);"," -webkit-background-clip: text;"," -webkit-text-fill-color: transparent;","}"],"tags":["sass","mixin","gradient","text","css"],"author":"technoph1le"}]} |
3 | | -{"language": "scss", {"categoryName":"Layouts","snippets":[{"title":"Grid Container","description":"Creates a responsive grid container with customizable column counts.","code":["@mixin grid-container($columns: 12, $gap: 1rem) {"," display: grid;"," grid-template-columns: repeat($columns, 1fr);"," gap: $gap;","},"],"tags":["scss","grid","layout","css"],"author":"technoph1le"},{"title":"Flex Center","description":"A mixin to center content using flexbox.","code":["@mixin flex-center {"," display: flex;"," justify-content: center;"," align-items: center;","}"],"tags":["scss","flex","center","css"],"author":"technoph1le"},{"title":"Aspect Ratio","description":"Ensures that elements maintain a specific aspect ratio.","code":["@mixin aspect-ratio($width, $height) {"," position: relative;"," width: 100%;"," padding-top: ($height / $width) * 100%;"," > * {"," position: absolute;"," top: 0;"," left: 0;"," width: 100%;"," height: 100%;"," }","}"],"tags":["scss","aspect-ratio","layout","css"],"author":"technoph1le"}]} |
| 3 | +{"language": "scss", {"categoryName":"Layouts","snippets":[{"title":"Grid Container","description":"Creates a responsive grid container with customizable column counts.","code":["@mixin grid-container($columns: 12, $gap: 1rem) {"," display: grid;"," grid-template-columns: repeat($columns, 1fr);"," gap: $gap;","},"],"tags":["scss","grid","layout","css"],"author":"technoph1le"},{"title":"Flex Center","description":"A mixin to center content using flexbox.","code":["@mixin flex-center {"," display: flex;"," justify-content: center;"," align-items: center;","}"],"tags":["scss","flex","center","css"],"author":"technoph1le"},{"title":"Aspect Ratio","description":"Ensures elements maintain a specific aspect ratio.","code":["@mixin aspect-ratio($width, $height) {"," position: relative;"," width: 100%;"," padding-top: ($height / $width) * 100%;"," > * {"," position: absolute;"," top: 0;"," left: 0;"," width: 100%;"," height: 100%;"," }","}"],"tags":["scss","aspect-ratio","layout","css"],"author":"technoph1le"}]} |
4 | 4 | {"language": "scss", {"categoryName":"Animations","snippets":[{"title":"Fade In Animation","description":"Animates the fade-in effect.","code":["@keyframes fade-in {"," from {"," opacity: 0;"," },"," to {"," opacity: 1;"," }","}","","@mixin fade-in($duration: 1s, $easing: ease-in-out) {"," animation: fade-in $duration $easing;","}"],"tags":["scss","animation","fade","css"],"author":"technoph1le"},{"title":"Slide In From Left","description":"Animates content sliding in from the left.","code":["@keyframes slide-in-left {"," from {"," transform: translateX(-100%);"," }"," to {"," transform: translateX(0);"," }","}","","@mixin slide-in-left($duration: 0.5s, $easing: ease-out) {"," animation: slide-in-left $duration $easing;","}"],"tags":["scss","animation","slide","css"],"author":"technoph1le"}]} |
5 | 5 | {"language": "scss", {"categoryName":"Utilities","snippets":[{"title":"Responsive Breakpoints","description":"Generates media queries for responsive design.","code":["@mixin breakpoint($breakpoint) {"," @if $breakpoint == sm {"," @media (max-width: 576px) { @content; },"," } @else if $breakpoint == md {"," @media (max-width: 768px) { @content; }"," } @else if $breakpoint == lg {"," @media (max-width: 992px) { @content; }"," } @else if $breakpoint == xl {"," @media (max-width: 1200px) { @content; }"," }","}"],"tags":["scss","responsive","media-queries","css"],"author":"technoph1le"},{"title":"Clearfix","description":"Provides a clearfix utility for floating elements.","code":["@mixin clearfix {"," &::after {"," content: '';"," display: block;"," clear: both;"," }","}"],"tags":["scss","clearfix","utility","css"],"author":"technoph1le"}]} |
6 | 6 | {"language": "scss", {"categoryName":"Borders & Shadows","snippets":[{"title":"Border Radius Helper","description":"Applies a customizable border-radius.","code":["@mixin border-radius($radius: 4px) {"," border-radius: $radius;","},"],"tags":["scss","border","radius","css"],"author":"technoph1le"},{"title":"Box Shadow Helper","description":"Generates a box shadow with customizable values.","code":["@mixin box-shadow($x: 0px, $y: 4px, $blur: 10px, $spread: 0px, $color: rgba(0, 0, 0, 0.1)) {"," box-shadow: $x $y $blur $spread $color;","}"],"tags":["scss","box-shadow","css","effects"],"author":"technoph1le"}]} |
7 | 7 | {"language": "scss", {"categoryName":"Components","snippets":[{"title":"Primary Button","description":"Generates a styled primary button.","code":["@mixin primary-button($bg: #007bff, $color: #fff) {"," background-color: $bg;"," color: $color;"," padding: 0.5rem 1rem;"," border: none;"," border-radius: 4px;"," cursor: pointer;",""," &:hover {"," background-color: darken($bg, 10%);"," },","}"],"tags":["scss","button","primary","css"],"author":"technoph1le"}]} |
8 | | -{"language": "_index", {"lang":"JavaScript","icon":"/icons/javascript.svg"}, |
9 | | -{"language": "_index", {"lang":"CSS","icon":"/icons/css.svg"}, |
10 | | -{"language": "_index", {"lang":"Python","icon":"/icons/python.svg"}, |
11 | | -{"language": "_index", {"lang":"SCSS","icon":"/icons/sass.svg"}, |
12 | 8 | {"language": "css", {"categoryName":"Typography","snippets":[{"title":"Responsive Font Sizing","description":"Adjusts font size based on viewport width.","code":["h1 {"," font-size: calc(1.5rem + 2vw);","},"],"tags":["css","font","responsive","typography"],"author":"technoph1le"},{"title":"Letter Spacing","description":"Adds space between letters for better readability.","code":["p {"," letter-spacing: 0.05em;","}"],"tags":["css","typography","spacing"],"author":"technoph1le"}]} |
13 | 9 | {"language": "css", {"categoryName":"Layouts","snippets":[{"title":"Sticky Footer","description":"Ensures the footer always stays at the bottom of the page.","code":["body {"," display: flex;"," flex-direction: column;"," min-height: 100vh;","},","","footer {"," margin-top: auto;","}"],"tags":["css","layout","footer","sticky"],"author":"technoph1le"},{"title":"Equal-Width Columns","description":"Creates columns with equal widths using flexbox.","code":[".columns {"," display: flex;"," justify-content: space-between;","}","",".column {"," flex: 1;"," margin: 0 10px;","}"],"tags":["css","flexbox","columns","layout"],"author":"technoph1le"},{"title":"CSS Reset","description":"Resets some default browser styles, ensuring consistency across browsers.","code":["* {"," margin: 0;"," padding: 0;"," box-sizing: border-box","}"],"tags":["css","reset","browser","layout"],"author":"AmeerMoustafa"}]} |
14 | 10 | {"language": "css", {"categoryName":"Buttons","snippets":[{"title":"Button Hover Effect","description":"Creates a hover effect with a color transition.","code":[".button {"," background-color: #007bff;"," color: white;"," padding: 10px 20px;"," border: none;"," border-radius: 5px;"," cursor: pointer;"," transition: background-color 0.3s ease;","},","",".button:hover {"," background-color: #0056b3;","}"],"tags":["css","button","hover","transition"],"author":"technoph1le"},{"title":"3D Button Effect","description":"Adds a 3D effect to a button when clicked.","code":[".button {"," background-color: #28a745;"," color: white;"," padding: 10px 20px;"," border: none;"," border-radius: 5px;"," box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);"," transition: transform 0.1s;","}","",".button:active {"," transform: translateY(2px);"," box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);","}"],"tags":["css","button","3D","effect"],"author":"technoph1le"}]} |
|
0 commit comments