Jamiewarb

Example

Name Description

Jamiewarb

APP_ENV=ci
APP_KEY=
APP_DEBUG=true
APP_URL=https://localhost

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=33306

Jamiewarb

<section class="relative pt-32 pb-16 mb-8 flex content-center items-center justify-center lg:shadow-sm" style="min-height: 55vh;">
    <div class="absolute top-0 w-full h-full bg-center bg-cover"
        style="background-image: url('{{ \Roots\asset('images/header-mock-reversed.jpg') }}');">
        <span id="blackOverlay" class="w-full h-full absolute opacity-50 bg-white lg:bg-gradient-to-r lg:from-white lg:to-transparent"></span></div>
    <div class="container relative mx-auto">
        <div class="items-center flex flex-wrap">
            <div class="w-full lg:w-8/12 xl:w-6/12 px-4 ml-auto mr-auto text-center lg:mr-12 lg:mt-12 lg:text-left">
                <div class="px-4">
                    <h1 class="text-gray-800 font-semibold text-3xl md:text-5xl font-oxygen leading-none mb-4 lg:text-right">
                        {{ "Hero Hedline Text" }}

Jamiewarb

<figure>
    <a href="{{ $url }}">
      <div class="aspect-ratio-wrap relative" style="padding-bottom: {{ $aspect_ratio ?? '0%' }};">
        <img src="{{ $img_url }}" @if($alt) alt="{!! $alt !!}" @endif 
             class="block absolute top-0 left-0 object-cover w-full h-full">
      </div>
    </a>
</figure>

Jamiewarb

<header class="banner w-full bg-white border-grey-100 shadow-md">
  <div class="menu-wrap flex items-center flex-wrap justify-between p-3 w-full z-20 max-w-screen-xl
              sm:px-6 sm:py-5 lg:relative lg:mx-auto">
    <div class="flex items-center flex-no-shrink max-w-2/3">
        <a class="brand lg:block lg:pt-2" href="{{ home_url('/') }}">
          <img src="{{\Roots\asset('images/brand.png')}}" alt="Brand" 
            class="max-w-200">
        </a>
    </div>

Jamiewarb

<?php
namespace App;

/**
 * Custom fork of WP's native Walker functionality revised so we can output
 * classes for tailwind
 *
 */

/**

Jamiewarb

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version

Jamiewarb

addEventListener('fetch', event => {

    event.respondWith(purgeCache(event.request))

})

async function purgeCache(request) {

    const url = new URL(request.url)

Jamiewarb

function slugify(text) {
  return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
}

Jamiewarb

CSS/SVG site left click micro animation

A Pen by Jamie Warburton on CodePen.

License.