Skip to content

Instantly share code, notes, and snippets.

View matt-daniel-brown's full-sized avatar

Matthew Daniel Brown matt-daniel-brown

2 followers · 25 following
View GitHub Profile
@matt-daniel-brown
matt-daniel-brown / how-to-convert-bootstrap-pills-tabs-into-a-dropdown-menu.markdown
Created February 25, 2021 20:06
How to Convert Bootstrap Pills (Tabs) Into a Dropdown Menu

How to Convert Bootstrap Pills (Tabs) Into a Dropdown Menu

Today I’ll show you how to convert Bootstrap pills (tabs) into a dropdown. Most importantly we’ll keep both these components in sync. We’ll use pills for the desktop layout and a dropdown for mobile screens. Read full tutorial here

A Pen by Matt Daniel Brown on CodePen.

License.

@matt-daniel-brown
matt-daniel-brown / index.html
Created February 25, 2021 20:05
Uisual
<header role="banner" class="ui-section-header">
<div class="ui-layout-container">
<div class="ui-section-header__layout ui-layout-flex">
<!-- LOGO -->
<a href="#" role="link" aria-label="#" class="ui-section-header--logo">
<svg viewBox="0 0 18 18" height="18" width="18" role="img" aria-label="#">
<path fill="#353535" d="M0 0h4.5v9a4.5 4.5 0 109 0V6H18v3A9 9 0 110 9V0zm18 4.5V0h-4.5v4.5H18z" />
</svg>
</a>
<!-- HAMBURGER -->
@matt-daniel-brown
matt-daniel-brown / index.html
Created December 26, 2020 16:28
🚦Toggle animation with CSS & State Machines! Live collaborative coding with the @keyframers 2.32.0
<a href="https://youtu.be/0Wx9QbRQYuI" target="_blank" data-keyframers-credit style="color: #000"></a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<form id="app" data-state="off">
<div class="toggle-wrapper">
<input id="toggle" name="toggle" type="checkbox">
<label for="toggle" class="fancy-toggle">
<div class="bg"></div>
<div class="circle">
<svg viewBox="0 0 100 100">
@matt-daniel-brown
matt-daniel-brown / index.html
Created December 19, 2020 05:49
Light/Dark Toggle
<svg class="btn" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" width="75" height="75" stroke-linecap="round" stroke-linejoin="round" fill="none" stroke="#fff">
<mask id="m">
<circle class="masker" cx="7.5" cy="7.5" r="8.5" fill="#fff" />
</mask>
<g mask="url(#m)">
<path class="sun" d="M7.5 1.5v-1m0 13.99v-.998m6-5.997h1m-13 0h-1m2-4.996l-1-1m12 0l-1 1m-10 9.993l-1 1m12 0l-1-1m-2-4.997a2.999 2.999 0 01-3 2.998 2.999 2.999 0 113-2.998z" />
</g>
<path class="moon" d="M1.66 11.362A6.5 6.5 0 007.693.502a7 7 0 11-6.031 10.86z" />
</svg>
@matt-daniel-brown
matt-daniel-brown / index.html
Created December 19, 2020 05:48
Lo-fi Content Grid 2 - Tailwind CSS
<body class="flex items-center justify-center w-screen min-h-screen p-10">
<!-- Resice the preview panel to check the responsiveness -->
<!-- Component Start -->
<div class="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-2 max-w-6xl">
<!-- Tile 1 -->
<div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
<div class="h-40 bg-gray-400 rounded-lg"></div>
<div class="flex flex-col items-start mt-4">
<h4 class="text-xl font-semibold">Heading</h4>
@matt-daniel-brown
matt-daniel-brown / google-favicons-api.markdown
Created December 10, 2020 16:11
Google favicons API
@matt-daniel-brown
matt-daniel-brown / index.html
Created December 10, 2020 16:11
Simple CSS Switch / Toggle
<label class="switch">
<input type="checkbox">
<div>
<span></span>
</div>
</label>
<label class="switch">
<input type="checkbox" checked>
<div>
@matt-daniel-brown
matt-daniel-brown / codyframe-fixed-size-buttons-inputs.markdown
Created December 10, 2020 15:57
CodyFrame - Fixed-Size Buttons/Inputs
@matt-daniel-brown
matt-daniel-brown / css-nugget-responsive-typography.markdown
Created December 10, 2020 15:56
CSS Nugget: Responsive Typography
@matt-daniel-brown
matt-daniel-brown / custom-radio-checkbox-buttons-with-perfect-alignment.markdown
Created December 10, 2020 15:56
Custom radio/checkbox buttons with perfect alignment