Kyle's public fiddles
-
CSS Responsive Grid Standard layout
Create a standard site layout using responsive grid. https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431
-
CSS Menu using Details Tag
The Details tag includes perfect tab support for keyboard users. Using details tag for a menu could make a website menu keyboard accessible. It also makes the markup smaller then if you were to use an unordered list. Inspired by GitHub's menus.
-
CSS Dot Leaders
Add dot leaders without additional wrappers
-
CSS Remove Margin from immediate child
This is handy for removing the top margin from h2 tags just at the start of the content
-
Responsive Table
Create a responsive table using css and javascript
-
CSS Select Last 3
Quick reminder on how to select the last 3 items using nth-last-child
-
SVG in before/after content
How to include an SVG in a :before and :after using content
-
Flip SVG with Inline transform
How to flip an an entire SVG with an inline transform on the SVG element. This does not work for IE, but since IE11 is almost dead, who cares. NOTE: Width and height not needed to make transform rotate work.
-
Star Trek RPG NPC Generator
Generate a non-player character for the Star Trek Roleplaying game by Decipher
-
Simple YouTube and Image lightbox
A super simple and light weight lightbox
-
Download Table Styling
Styling Example for page consisting of download links
-
Center Tag CSS Alternative
How to replace the depreciated HTML Center tag with a CSS alternative.