Matthew Daniel Brown matt-daniel-brown

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.

Google favicons API

A Pen by Matt Daniel Brown on CodePen.

License.

CodyFrame - Fixed-Size Buttons/Inputs

A Pen by Matt Daniel Brown on CodePen.

License.

CSS Nugget: Responsive Typography

Article on CodyHouse: https://codyhouse.co/nuggets/responsive-typography

A Pen by Matt Daniel Brown on CodePen.

License.

Custom radio/checkbox buttons with perfect alignment

Learn how to create custom, accessible radio and checkbox buttons in CSS that perfectly align with their labels.

Tutorial on CodyHouse: https://codyhouse.co/blog/post/custom-accessible-radio-checkbox-buttons-vertical-alignment

A Pen by Matt Daniel Brown on CodePen.

License.

	<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 -->

	<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">

	<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>

	<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>

	<label class="switch">
	<input type="checkbox">
	<div>
	<span></span>
	</div>
	</label>

	<label class="switch">
	<input type="checkbox" checked>
	<div>