css_start.code-snippets

{
	// Gebruik als start van een css document.
	// Voor een deel gebaseerd op de ideeen van dit verhaal: https://codyhouse.co/blog/post/css-custom-properties-vs-sass-variables



	"Setup": {
		"scope": "css",
		"prefix": "Start de setup",
		"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}",
			"",
			":root {",
				"/* body font size */",
				"--text-base-size: 1rem;",
				"--body-line-height: 1.5;",
				"--heading-line-height: 1.2;",
				"",
				"/* type scale */",
				"--text-scale-ratio: 1.2;",
				"--text-xs: calc((1em / var(--text-scale-ratio)) / var(--text-scale-ratio));",
				"--text-sm: calc(var(--text-xs) * var(--text-scale-ratio));",
				"--text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));",
				"--text-lg: calc(var(--text-md) * var(--text-scale-ratio));",
				"--text-xl: calc(var(--text-lg) * var(--text-scale-ratio));",
				"--text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));",
				"--text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));",
				"",
				"/* controling the spacing scale */",
				"--space-unit:  1rem;",
				"--space-xxxxs: calc(0.125 * var(--space-unit));",
				"--space-xxxs:  calc(0.25 * var(--space-unit));",
				"--space-xxs:   calc(0.375 * var(--space-unit));",
				"--space-xs:    calc(0.5 * var(--space-unit));",
				"--space-sm:    calc(0.75 * var(--space-unit));",
				"--space-md:    calc(1.25 * var(--space-unit));",
				"--space-lg:    calc(2 * var(--space-unit));",
				"--space-xl:    calc(3.25 * var(--space-unit));",
				"--space-xxl:   calc(5.25 * var(--space-unit));",
				"--space-xxxl:  calc(8.5 * var(--space-unit));",
				"--space-xxxxl: calc(13.75 * var(--space-unit));",
				"--component-padding: var(--space-md);",
				"",
				"/* Line-height */",
				"--component-body-line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));",
				"--component-heading-line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));",
				"--line-height-multiplier: 1;",
				"--text-vspace-multiplier: 1;",
			  "}",
			  "",
			  "/* Kleur setup, zowel licht als donker thema met naamgeving variabelen op basis van contrast */",
			  ":root, [data-theme=\"default\"] {",
			  "  --color-primary: blue;",
			  "  /* color contrasts */",
			  "  --color-bg: white;",
			  "  --color-contrast-lower: hsl(0, 0%, 95%);",
			  "  --color-contrast-low: hsl(240, 1%, 83%);",
			  "  --color-contrast-medium: hsl(240, 1%, 48%);",
			  "  --color-contrast-high: hsl(240, 4%, 20%);",
			  "  --color-contrast-higher: black;",
			  "}",
			  "",
			  "[data-theme] {",
			  "  background-color: var(--color-bg);",
			  "  color: var(--color-contrast-high);",
			  "}",
			  "",
			  "[data-theme=\"dark\"] {",
			  "  --color-primary: red;",
			  "  /* color contrasts */",
			  "  --color-bg: black;",
			  "  --color-contrast-lower: hsl(240, 6%, 15%);",
			  "  --color-contrast-low: hsl(252, 4%, 25%);",
			  "  --color-contrast-medium: hsl(240, 1%, 57%);",
			  "  --color-contrast-high: hsl(0, 0%, 89%);",
			  "  --color-contrast-higher: white;",
			  "}",
			  "",
				"/* feedback colors */",
				":root {",
				"  --color-warning-darker: hsl(46, 100%, 41%);",
				"  --color-warning-dark: hsl(46, 100%, 51%);",
				"  --color-warning: hsl(46, 100%, 61%);",
				"  --color-warning-light: hsl(46, 100%, 71%);",
				"  --color-warning-lighter: hsl(46, 100%, 81%);",
				"",
				"  --color-success-darker: hsl(94, 48%, 36%);",
				"  --color-success-dark: hsl(94, 48%, 46%);",
				"  --color-success: hsl(94, 48%, 56%);",
				"  --color-success-light: hsl(94, 48%, 66%);",
				"  --color-success-lighter: hsl(94, 48%, 76%);",
				"",
				"  --color-error-darker: hsl(349, 75%, 31%);",
				"  --color-error-dark: hsl(349, 75%, 41%);",
				"  --color-error: hsl(349, 75%, 51%);",
				"  --color-error-light: hsl(349, 75%, 61%);",
				"  --color-error-lighter: hsl(349, 75%, 71%);",
				"}",
				"",
				"/* Other stuff */",
				"[id] {",
					"  scroll-margin-top: 2em;",
				"}",
				"",
				"main img {",
				"	content-visibility: auto;",
				"}",
				"",
				//https://twitter.com/argyleink/status/1405881231695302659
				"a, button {",
				"	touch-action: manipulation;",
				"}",
				"",
				"@media (prefers-reduced-motion: no-preference) {",
					"  :focus {",
						"		transition: outline-offset .25s ease;",
						"		outline-offset: 5px;",
						"  /* https://twitter.com/argyleink/status/1387072095159406596?s=03 */",
					"  }",
				"}",
				"",
				/* prevent zoom on ios */
				"input {",
					"font-size: max(16px, 1rem);",
				"}",
				"",
				"@media (prefers-reduced-data: reduce) {",
				"	img, video {",
				"		display: none;",
				"	}",
				"}",
				"",
				".container {",
				"  width: min(80ch, 100vw - 2rem);",
				"}",
				
		],
		"description": "Setup van een css document"
	}

}

//	Voorbeeld van text-ratio gebruik (bijv rekenen vanaf de medium)
//	:root {
//		@include breakpoint(md) {
//	  		--text-base-size: 1.25em;
//	  		--text-scale-ratio: 1.25;
//			}
//  	}

//	Voorbeeld van responsive gebruik space unit
//	@supports(--css: variables) {
//		:root {
//	  		@include breakpoint(md) {
//				--space-unit:  1.25em;
//	  		}
//		}
//  }

//	Voorbeelden van gebruik line-height
// 	h1, h2, h3, h4 {
//  	line-height: var(--component-heading-line-height);
//    	margin-bottom: calc(var(--space-xxxs) * var(--text-vspace-multiplier));
//  }

//   p, blockquote, ul li, ol li {
//  	line-height: var(--component-body-line-height);
//  }

//  Using the color theming, with example of nesting in the html part
//  .component {
//	color: var(--color-contrast-higher);
//	background-color: var(--color-bg);
//	border-bottom: 1px solid var(--color-contrast-low);
//  
//	a {
//	  color: var(--color-primary);
//	  }
//  }
//
//  <section data-theme="dark">
//    <div class="component">
//      <div class="child" data-theme="default"></div>
//    </div>
//  </section>