Skip to content

Instantly share code, notes, and snippets.

Avatar

VA79 vanaf1979

View GitHub Profile
View css-specificity-cheat-sheet.css
/* Basic specificity cheatsheet */
h1 {
/* Native elements have a weight of 0001. */
}
::after {
/* Pseudo-elements have a weight of 0001. */
}
View css-clip-path-triangle.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Clip-path triangle</title>
</head>
<body>
@vanaf1979
vanaf1979 / RenderedBlocks.php
Created Mar 24, 2021
Are blocks rendered yet
View RenderedBlocks.php
<?php
final class RenderedBlocks {
/**
* instance.
*
* @var RenderedBlocks $instance class instance.
*/
private static $instance = null;
@vanaf1979
vanaf1979 / fluid-container-with-min.html
Created Dec 8, 2020
Fluid html container with horizontal whitespace on mobile devices.
View fluid-container-with-min.html
<div class="fluid-container">
[ I'm a fluid container ]
</div>
<style>
.fluid-container {
background: lightblue;
width: min(96%, 62.5rem);
margin: 0 auto;
View classlist-toggle-html.html
<div class="box"></div>
<button id="addClass">Add active class</button>
<button id="removeClass">Remove active class</button>
<button id="toggleClass">Toggle active class</button>
View classlist-remove-html.html
<div class="box"></div>
<button id="addClass">Add active class</button>
<button id="removeClass">Remove active class</button>
View classlist-add-html.html
<div class="box"></div>
<button id="addClass">Add active class</button>
View classlist-add-js.js
const box = document.querySelector(".box");
const addButton = document.querySelector('#setStyles');
addButton.addEventListener('click', () => {
box.classList.add("active");
});