Skip to content

Instantly share code, notes, and snippets.

View kchez's full-sized avatar

Kathy Szczesny kchez

0 followers · 2 following
View GitHub Profile
@kchez
kchez / 0_reuse_code.js
Created December 15, 2015 15:25
Here are some things you can do with Gists in GistBox.
// Use Gists to store code you would like to remember later on
console.log(window); // log the "window" object to the console
@kchez
kchez / e_CSS-Reset.css
Last active December 15, 2015 17:40
CSS Reset for fixing various email client quirks.
<!-- CSS Reset -->
<style type="text/css">
/* ------------------------------------------------------------
* THE BASICS - Resolve some troublesome quirks from the get-go
* ------------------------------------------------------------ */
/* Force Outlook to display view in browser link. */
#outlook a { padding:0; }
/* Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
@kchez
kchez / e_Metas.html
Last active December 15, 2015 19:00
Email Metas (Remove all comments for production).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Namespaces for VML. Enables the use of VML shapes and other Microsoft Word specific code for Outlook clients. -->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- utf-8 works for most case. Often problems can occur with characters like apostrophe and double quotes when they haven't been handled properly. Make sure you always the use the HTML entity code for the specific character you want.-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Forcing initial-scale shouldn't be necessary. Mainly for mobile devices to set the view correctly when using media queries. -->
<meta name="viewport" content="width=device-width">
<!-- Use the latest (edge) version of IE rendering engine, specifically to make the email responsive on Windows Phone. -->
@kchez
kchez / e_Preheader.html
Last active December 15, 2015 17:45
Email Preheader
<!-- PREHEADER:
https://www.campaignmonitor.com/blog/post/3628/a-practical-guide-to-email-preheaders
http://www.smartinsights.com/email-marketing/email-creative-and-copywriting/4-ways-use-preheader-marketing-emails
Text that appears after the subject line in a preview/notification in the inbox.
Not creating a preheader means generally the first bit of text content gets used.
This can be bad when areas like the web version link are first.
The preheader can be visible but if a template design doesn't allow for it the hidden span technique can be used.
display:none !important; allows Gmail to hide the span without max-height hacks.
@kchez
kchez / e_WrapperTable--FixedWidth.html
Last active August 28, 2023 18:26
Email Wrapper Table - Fixed Width Approach
<!-- WRAPPER TABLE -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="wrappertable" style="table-layout:fixed;">
<tr>
<!--
ALIGNING LAYOUTS TO THE CENTER:
In some cases, you may want the whole email layout to be centered (mainly for desktop clients).
Using the wrapping table cell approach is a clean way of doing it, removing the need for any <center> or <div> tags.
It does mean however you'll need to use the align attribute on all table cells within to avoid content being centered.
-->
<td align="center" valign="top" id="wrappercell">
@kchez
kchez / e_FauxUnorderedOrderedLists.html
Created December 15, 2015 18:43
Email - Faux Unordered/Ordered Lists: The rendering of <ul> and <ol> is not reliable with a few email clients, instead you have to create faux lists. Using two table cells you can mimic the same appearance of a bullet or number list. You can add widths, padding etc to space out list items
<!--
FAUX UNORDERED/ORDERED LISTS:
The rendering of <ul> and <ol> is not reliable with a few email clients, instead you have to create faux lists.
Using two table cells you can mimic the same appearance of a bullet or number list.
You can add widths, padding etc to space out list items
-->
<table border="0" cellpadding="0" cellspacing="0">
<!-- Faux unordered list with a bullet -->
@kchez
kchez / e_CSS-Reset--bp.html
Last active December 18, 2015 16:06
Email CSS Reset boilerplate no guideline comments included.
<!-- Email CSS Reset -->
<style type="text/css">
#outlook a { padding:0; }
html, body { Margin: 0 !important; padding: 0 !important; height: 100% !important; width: 100% !important; min-width: 100%; }
body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; Margin: 0 !important; padding: 0; }
.ReadMsgBody { width: 100%; }
.ExternalClass { width: 100%; }
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div { line-height:100%; }
#wrappertable { margin:0; padding:0; width:100% !important; line-height:100% !important; }
* { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
@kchez
kchez / index.css
Created December 18, 2015 16:05
SUITCSS Starter File: Remove portions where desired. A listing of every variable is provided along with it's default value.
@import "suitcss-base";
@import "suitcss-utils-align";
@import "suitcss-utils-display";
@import "suitcss-utils-layout";
@import "suitcss-utils-link";
@import "suitcss-utils-offset";
@import "suitcss-utils-position";
@import "suitcss-utils-size";
@import "suitcss-utils-text";
@kchez
kchez / accessible-menu.php
Created May 21, 2024 13:05 — forked from SteveJonesDev/accessible-menu.php
Accessible WordPress Navigation Menu
<div class="menu-container">
<button class="menu-button" aria-expanded="false" aria-controls="site-header-menu" aria-label="<?php esc_attr_e( 'Menu', 'textdomain' ); ?>"></button>
<div id="site-header-menu" class="site-header-menu">
<?php
wp_nav_menu(
array(
'theme_location' => 'primary',
'container' => 'nav',
'container_class' => 'main-navigation',
'container_id' => 'site-navigation',
@kchez
kchez / bootstrap-5-sass-mixins-cheat-sheet.scss
Created May 21, 2024 13:06 — forked from anschaef/bootstrap-5-sass-mixins-cheat-sheet.scss
All New Bootstrap 5 Sass Mixins [Cheat sheet with examples]
/* -------------------------------------------------------------------------- */
// All Bootstrap 5 Sass Mixins [ Cheat sheet ]
// Updated to Bootstrap v5.1.x
// @author https://anschaef.de
// @see https://github.com/twbs/bootstrap/tree/main/scss/mixins
// @see https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
/* -------------------------------------------------------------------------- */
// Options
// @see https://getbootstrap.com/docs/5.1/customize/options/