VS-code css snippet file

css.code-snippets

{

	"Vergeten alt": {
		"scope": "css",
		"prefix": "vergeten alt",
		"body": [
			"img[alt=\"\" ],",
			"img:not([alt]) {",
			"	border: 5px dashed #c00;",
			"}"
		],
		"description": "Vergeten alt"
	}

	"Lege links": {
		"scope": "css",
		"prefix": "lege links",
		"body": [
			"a[href^=\"http\"]:empty::before {",
			"	content: attr(href);",
			"}"
		],
		"description": "Forceer tonen lege links"
	}

	"outline debug": {
		"scope": "css",
		"prefix": "outline debug",
		"body": [
			"*:not(path):not(g) {",
			"	color:                    hsla(210, 100%, 100%, 0.9) !important;",
			"	background:               hsla(210, 100%,  50%, 0.5) !important;",
			"	outline:    solid 0.25rem hsla(210, 100%, 100%, 0.5) !important;",
			"	box-shadow: none !important;",
			"}"
		],
		"description": "Outline alle items"
	}

	"normalize": {
		"scope": "css",
		"prefix": "normalize",
		"body": [
			"html{box-sizing:border-box}*,::after,::before{box-sizing:inherit}:root{-moz-tab-size:4;tab-size:4}html{line-height:1.15}body{margin:0}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol'}h1{font-size:2em;margin:.67em 0}hr{height:0}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:SFMono-Regular,Consolas,'Liberation Mono',Menlo,Courier,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{padding:0}progress{vertical-align:baseline}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}"
		],
		"description": "Moderne normalize"
	}

	"Toegangelijke :focus": {
		"scope": "css",
		"prefix": "focus",
		"body": [
			"*:focus:not(.focus-visible) {",
  			"	outline: none;",
			"}",
			"/* Optional: Customize .focus-visible */",
			".focus-visible",
			"*:focus-visible {",
  			"	outline: lightgreen solid 2px;",
			"/* Toevoegen: <script src=\"https://unpkg.com/focus-visible@latest/dist/focus-visible.min.js\"></script> */",
			"}"
		],
		"description": "Toegangelijke focus state"
	}

	"Responsive hero": {
		"scope": "css",
		"prefix": "hero",
		"body": [
			".hero {",
  			"	background-image: url(https://images.unsplash.com/photo-1505394033641-40c6ad1178d7);",
  			"	background-repeat: no-repeat;",
  			"	background-size: cover;",
  			"	background-position: center;",
  			"	position: relative;",
  			"	padding-bottom: calc(700px + (474 - 700) * (100vw - 600px) / (1200 - 600));",
			"}",
			"/* Based on: https://css-tricks.com/fun-tip-use-calc-to-change-the-height-of-a-hero-component/ */"
		]
		"description": "Flexibele hero-image"
	}

	"Visueel verborgen": {
		"scope": "css",
		"prefix": "visueel verborgen",
		"body": [
			".visuallyhidden {",
			"	position: absolute;",
			"	width: 1px; /* Setting this to 0 make it invisible for VoiceOver */",
			"	height: 1px; /* Setting this to 0 make it invisible for VoiceOver */",
			"	padding: 0;",
			"	margin: -1px;",
			"	border: 0;",
			"	clip: rect(0 0 0 0);",
			"	overflow: hidden;  ",
			"}",
		]
		"description": "Dingen verbergen, maar niet voor voice-over"
	}

	"Elipsis": {
		"scope": "css",
		"prefix": "elipsis",
		"body": [
			".ellipsis {",
			"	width: 250px;",
			"	white-space: nowrap;",
			"	overflow: hidden;",
			"	-ms-text-overflow: ellipsis; /* Required for IE8 */",
			"	-o-text-overflow: ellipsis; /* Required for Opera */",
			"	text-overflow: ellipsis;",
			"}",
		]
		"description": "..."
	}

	"Disabled": {
		"scope": "css",
		"prefix": "disabled",
		"body": [
			".disabled {",
			"	pointer-events: none;",
			"	opacity: 0.5;",
			"}",
		]
		"description": "Disabled state"
	}

	"Items -present- themselves": {
		"scope": "css",
		"prefix": "show yourself",
		"body": [
			"@keyframes present-yourself {",
			"to {",
			"	opacity: 1;",
			"	transform: translate(1, 1, 1);",
			"}",
			"}",
			"/* use like this */",
			"button {",
			"	opacity: 0;",
			"	transform: translateX(1rem);",
			"	animation: present-yourself 0.2s ease forwards;",
			"}",
		]
		"description": "Items present themeselves on load"
	}

	"Reduced motion": {
		"scope": "css",
		"prefix": "reduced motion",
		"body": [
			"@media (prefers-reduced-motion: reduce) {",
			"* {",
			"	animation-duration: 0.001s !important;",
			"	transition-duration: 0.001s !important; ",
			"}",
			"}",
		]
		"description": "Check https://developers.google.com/web/updates/2019/03/prefers-reduced-motion"
	}

	"Hide scrollbar": {
		"scope": "css",
		"prefix": "hide scrollbar",
		"body": [
			".scroll {",
			"   scrollbar-width: none;",
			"	-ms-overflow-style: none;",
			"}"
			".scroll::-webkit-scrollbar {",
			"   display: none;",
			"}",
		]
		"description": "removes scrollbar from element"
	}

	"Prevent scroll-chaining": {
		"scope": "css",
		"prefix": "prevent scroll-chaining",
		"body": [
			"body {",
			"   overscroll-behavior: contain;"
			"}",
		]
		"description": "prevent page scrolling when finished scrolling in nested container"
	}

	"Full width (bleed)": {
		"scope": "css",
		"prefix": "Full width, break element out to full width of window",
		"body": [
			".full-bleed {",
			"   width: 100vw;"
			"   margin-left: 50%;"
			"   transform: translateX(-50%);"
			"}",
		]
		"description": "Break element out to full width of window"
	}

	"Aspect ratio ": {
		"scope": "css",
		"prefix": "Aspect ratio boxes",
		"body": [
			"[class*='ratio-'] {",
			"   display: block;",
			"   position: relative;",
			"}",
			" "
			"[class*='ratio-'] > * {",
			"   display: block;",
			"   width: 100%;",
			"   height: 100%;",
			"   position: absolute;",
			"   top: 0;",
			"   left: 0;",
			"}",
			" "
			".aspect-ratio-wide {",
			"	padding-top: 56.25%;"
			"}",
			" "
			".aspect-ratio-square {",
			"	padding-top: 100%;",
			"}",
		]
		"description": "Create aspect ratio boxes - https://andy-bell.design/wrote/creating-an-aspect-ratio-css-utility/"
	}

	"Scroll overflow utility": {
		"scope": "css",
		"prefix": "Scroll overflow. A nice resilient overflow mechanism where items will size themselves, but not shrink as they run out of space",
		"body": [
			".scroll-track {",
			"   display: flex;",
			"   /*display: inline-flex; Gebruik dit voor wanneer je centreerd, bijv, vanuit de <body> text-align center */",
			"   max-width: 100%;",
			"   overflow-x: auto;",
			"   overflow-y: hidden;",
			"	overscroll-behavior: contain;",
			"   -webkit-overflow-scrolling: touch;",
			"}",
			" "
			".scroll-track > * {",
			"   flex-shrink: 0;"
			"}",
		]
		"description": "https://andy-bell.design/wrote/progressive-overflow-management-with-a-scroll-track-utility/"
	}

	"Flexible type": {
		"scope": "css",
		"prefix": "flexible type",
		"body": [
			".fluid-type {",
			"	--fluid-type-min-size: 1;",
			"   --fluid-type-max-size: 2;",
			"   --fluid-type-min-screen: 20;",
			"   --fluid-type-max-screen: 88;",
			" "
			"font-size: calc(",
			"(var(--fluid-type-min-size) * 1rem) + (var(--fluid-type-max-size) - var(--fluid-type-min-size)) * (100vw - (var(--fluid-type-min-screen) * 1rem)) /",
			"(var(--fluid-type-max-screen) - var(--fluid-type-min-screen))",
			");",
			"}",
		],
		"description": "https://andy-bell.design/wrote/custom-property-controlled-fluid-type-sizing/"
	}

	"Z-index": {
		"scope": "css",
		"prefix": "z-index",
		"body": [
			":root {",
			"	--z-index: 1;",
			"   }",
			"   z-index: calc(var(--z-index) +/- value);",
		],
		"description": "Say goodbye to conflicting z-index thanks to CSS variables, where you can have any component starting from a specific `--z-index` and then `calc(var(--z-index) +/- value)` within its sibling, nested content, before or after"
	}



	"Short shadow": {
		"scope": "css",
		"prefix": "short shadow",
		"body": [
			".shadow-shorter {",
			"box-shadow: 0 1px 1px rgba(0,0,0,0.11),",
								"	0 2px 2px rgba(0,0,0,0.11),",
								"	0 4px 4px rgba(0,0,0,0.11),",
								"	0 6px 8px rgba(0,0,0,0.11),",
								"	0 8px 16px rgba(0,0,0,0.11);",
			"}",
		],
		"description": "Layered box-shadow - https: //tobiasahlin.com/blog/layered-smooth-box-shadows/"
	}
	
	"Long shadow": {
		"scope": "css",
		"prefix": "Long shadow",
		"body": [
			".shadow-longer {",
			"box-shadow: 0 2px 1px rgba(0,0,0,0.09),", 
								"	0 4px 2px rgba(0,0,0,0.09),", 
								"	0 4px 2px rgba(0,0,0,0.09),", 
								"	0 16px 8px rgba(0,0,0,0.09),",
								"	0 32px 16px rgba(0,0,0,0.09);",
			"}",
		],
		"description": "Layered box-shadow - https: //tobiasahlin.com/blog/layered-smooth-box-shadows/"
	}

	"Dim images for dark mode": {
		"scope": "css",
		"prefix": "Dim images",
		"body": [
			"@media (prefers-color-scheme: dark) {",
			"img {" 
						"	filter: brightness(.8) contrast(1.2);",
			"}",
			"}",
		],
		"description": To dim images in Dark mode
	}

	"Cijfers in tabellen uitlijnen": {
		"scope": "css",
		"prefix": "cijfers in tabel",
		"body": [
			"table {", 
						"	font-variant-numeric: tabular-nums;",
			"}",
		],
		"description": "https: //www.robinrendle.com/notes/the-smallest-difference.html"
	}

	"Ellipsis": {
		"scope": "css",
		"prefix": "ellipsis",
		"body": [
			"p {",
				"	width: 300px;",
				"	display: -webkit-box;",
				"	-webkit-box-orient: vertical;",
				"	-webkit-line-clamp: 3;",
				"	overflow: hidden;",
			"}",
		],
		"description": "The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines."
	}

	"Mobile safari height fix": {
		"scope": "css",
		"prefix": "Mobile safari hieght fix",
		"body": [
			"body {",
				"	min-height: 100vh;",
				"	min-height: -webkit-fill-available;",
			"}",
		],
		"description": "fixes annoying 100vh bug in mobile safari // https://twitter.com/AllThingsSmitty/status/1254151507412496384?s=09"
	}

	"Grid infinite columns": {
		"scope": "css",
		"prefix": "grid infinite columns",
		"body": [
			".grid {",
				"	display: grid",
				"	gap: 1rem",
			" grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));",
			"}",
		],
		"description": "Column layout that doesn’t declare the number of columns or rows, but automatically instead. https: //css-tricks.com/newsletter/200-flexible-grids-inset-page-transitions-and-more/"
	}

	"Grid horizontal boxes": {
		"scope": "css",
		"prefix": "grid horizontal boxes",
		"body": [
			".grid {",
				"	display: grid",
				"	gap: 1rem",
				"	grid-auto-flow: column",
			"   grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));",
			"}",
		],
		"description": "Have a bunch of boxes fall into a horizontal row https: //css-tricks.com/newsletter/200-flexible-grids-inset-page-transitions-and-more/"
	}

	"Styling Siblings on Hover": {
		"scope": "css",
		"prefix": "Styling siblings on hover",
		"body": [
			".parent:hover .child:not(:hover) {",
			" /* This style affects all the children exept the one you're hovering over */ "
			"}",
		],
		"description": "This style affects all the children exept the one you're hovering over"
	}

	"Optimal reading length": {
		"scope": "css",
		"prefix": "Optimal reading length of paragraphs",
		"body": [
			".foo {",
			"  width: clamp(20ch, 50% - 2ch, 70ch);"
			"}",
		],
		"description": "optimally half the page minus some space.. but cap it at a healthy reading count of 70 characters while never under 20ch"
	}

	"Remove trailing space on paragraphs": {
		"scope": "css",
		"prefix": "Remove trailing space",
		"body": [
			"p:last-child {",
			"  margin-block-end: 0;"
			"}",
		],
		"description": "Removes tariling space on paragraphs // https://twitter.com/argyleink/status/1311298250519883777"
	}

	"Hover on button": {
		"scope": "css",
		"prefix": "Hover button",
		"body": [
			"--brighten: brightness(120%) hue-rotate(2deg);",
			".button:hover {",
			"  filter: var(--brighten);"
			"}",
		],
		"description": "Fancy button hover // https://twitter.com/JoshWComeau/status/1315668392720969732"
	}

	"Language-specific qoutes": {
		"scope": "css",
		"prefix": "qoutes",
		"body": [
			"blockquote::before",
			"  content: open-quote;",
			"}",
			"",
			"blockquote::after",
			"  content: close-quote;",
			"}",
		],
		"description": "Fancy button hover // https://twitter.com/JoshWComeau/status/1315668392720969732"
	}

}