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 / 1-getting-started-flashgrid.markdown
Created December 10, 2020 15:55
1. Getting started | ⚡️FlashGrid
@matt-daniel-brown
matt-daniel-brown / cdn-floating-labels.markdown
Created December 10, 2020 15:55
CDN Floating Labels
@matt-daniel-brown
matt-daniel-brown / codyframe-mixins.markdown
Created December 10, 2020 15:54
CodyFrame - Mixins
@matt-daniel-brown
matt-daniel-brown / index.html
Created December 3, 2020 01:26
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 / index.html
Created December 3, 2020 01:24
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 3, 2020 01:24
Preact + Ionic
<!-- ionic embeds (see https://ionicframework.com/docs/intro/cdn#ionic-framework-cdn) -->
<!-- <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script> -->
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>
@matt-daniel-brown
matt-daniel-brown / css-gradients-animated-gradient.markdown
Created December 2, 2020 19:32
CSS Gradients: Animated Gradient
@matt-daniel-brown
matt-daniel-brown / index.html
Created December 2, 2020 19:28
Lo-fi Marketplace / eCommerce Page - with Tailwind CSS
<body class="flex flex-col w-screen min-h-screen p-10 bg-gray-100 text-gray-800">
<!-- Component Start -->
<h1 class="text-3xl">Product Category Page Title</h1>
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between mt-6">
<span class="text-sm font-semibold">1-16 of 148 Products</span>
<button class="relative text-sm focus:outline-none group mt-4 sm:mt-0">
<div class="flex items-center justify-between w-40 h-10 px-3 border-2 border-gray-300 rounded hover:bg-gray-300">
<span class="font-medium">
Popular
@matt-daniel-brown
matt-daniel-brown / css-only-icons.markdown
Created November 22, 2020 17:21
CSS Only Icons
@matt-daniel-brown
matt-daniel-brown / blurred-backgrounds.markdown
Created September 8, 2020 22:20
Blurred Backgrounds