Skip to content

Instantly share code, notes, and snippets.

View csswizardry's full-sized avatar

Harry Roberts csswizardry

5.1k followers · 8 following
View GitHub Profile
@csswizardry
csswizardry / margins-and-paddings.md
Last active October 3, 2025 03:07
Reset Research

margin or padding Candidates

Every element in current Baseline browsers that would need a margin or padding removing in a reset stylesheet:

Element Chrome Chrome for Android Edge Firefox Firefox for Android Safari Safari for iOS
body ✔ ✔ ✔ ✔ ✔ ✔ ✔
h1 ✔ ✔ ✔ ✔ ✔ ✔ ✔
@csswizardry
csswizardry / a.css
Last active January 25, 2023 17:41
@extend in Sass is almost always an antipattern
/* ==========================================================================
COMPILED EXAMPLE
========================================================================== */
/**
* This is one example I picked from the project; there are plenty more like it.
*/
@csswizardry
csswizardry / nesting.css
Created February 25, 2021 16:49
DOM Depth Visualiser
/**
* Tier 1 – Dotted
*/
* { outline: 2px dotted purple; }
* * { outline: 2px dotted blue; }
* * * { outline: 2px dotted green; }
* * * * { outline: 2px dotted yellow; }
* * * * * { outline: 2px dotted orange; }
* * * * * * { outline: 2px dotted red; }
@csswizardry
csswizardry / explainer.md
Last active August 2, 2022 20:01
Vim Calculator

Given the following dataset:

Run 1 Run 2 Run 3 Run 4 Run 5
1.991 1.871 1.885 2.007 2.114
2.009 2.211 2.199 2.281 2.094
2.018 2.091 2.115 2.241 2.020
2.782 2.105 2.506 2.660 2.273
1.501 1.885 1.921 1.235 1.873
@csswizardry
csswizardry / README.md
Last active June 16, 2024 13:44
Vim without NERD tree or CtrlP

Vim without NERD tree or CtrlP

I used to use NERD tree for quite a while, then switched to CtrlP for something a little more lightweight. My setup now includes zero file browser or tree view, and instead uses native Vim fuzzy search and auto-directory switching.

Fuzzy Search

There is a super sweet feature in Vim whereby you can fuzzy find your files using **/*, e.g.:

:vs **/*<partial file name><Tab>
@csswizardry
csswizardry / SassMeister-input-HTML.html
Created February 25, 2016 10:06
Generated by SassMeister.com.
<div style="width: 2pc; height: 2pc; background: red;"></div>
<div style="width: 32px; height: 32px; background: red;"></div>
@csswizardry
csswizardry / SassMeister-input-HTML.html
Last active February 24, 2016 15:02
Generated by SassMeister.com.
<ol class="c-item-detail-group">
<li>
<article class="c-item-detail">
<div class="c-item-detail__meta">
<span class="c-text-price">ab CHF <strong>8990.95</strong></span>
</div>
<div class="c-item-detail__main">
@csswizardry
csswizardry / SassMeister-input-HTML.html
Created February 24, 2016 10:21
Generated by SassMeister.com.
<div class="s-prose">
<h1 class="u-color-red c-heading">HTML Ipsum Presents</h1>
</div>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<p>
<a href=#0 class=c-btn>Button</a>
@csswizardry
csswizardry / SassMeister-input-HTML.html
Created February 24, 2016 10:18
Generated by SassMeister.com.
<div class="s-prose">
<h1 class="u-color-red c-heading">HTML Ipsum Presents</h1>
</div>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
@csswizardry
csswizardry / SassMeister-input-HTML.html
Created February 24, 2016 10:10
Generated by SassMeister.com.
<h1 class="u-color-red">HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>