Skip to content

Instantly share code, notes, and snippets.

View melchoyce's full-sized avatar

Mel Choyce-Dwan melchoyce

161 followers · 11 following
View GitHub Profile
@melchoyce
melchoyce / MP6.md
Last active December 26, 2015 06:49
MP6 --> 3.8, per http://make.wordpress.org/core/2013/10/22/preparing-your-feature-for-the-3-8-merge/

MP6

The WordPress admin has not had a major visual overhaul since 2.7, and its age is starting to show. In a rapidly changing web environment where users are starting to expect good design, we need to make sure that our aesthetics match — better yet, exceed — their high expectations.

MP6 is a movement towards modernity. It is an exploration into the infinite possibilities that exist for improvement within our existing framework. It is a tenderly crafted visual update to the admin that we all know and love. MP6 is the future.

Screenshots

@melchoyce
melchoyce / icons.md
Last active December 30, 2015 12:49
Dashicon icon name updates
  • dashicons-admin-site --> dashicons-admin-network
  • dashicons-site --> dashicons-admin-site
  • dashicons-gauge --> dashicons-admin-dashboard
  • dashicons-admin-dashboard --> dashicons-admin-home
  • dashicons-camera2 --> dashicons-camera
  • dashicons-imgedit-undo --> dashicons-undo
  • dashicons-imgedit-redo --> dashicons-redo
  • dashicons-xit --> dashicons-dismiss
  • dashicons-arrow-up --> dashicons-upload
  • dashicons-arrow-down --> dashicons-download
@melchoyce
melchoyce / gist:9d58b099cdccb1834143a95ab5519adc
Created October 11, 2016 01:54
Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<ul>
<li>Lorem</li>
<li>Tristique</li>
<li>Ornare</li>
<li>Fringilla</li>
<li>Dolor</li>
</ul>
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit.
@melchoyce
melchoyce / cm-s-wp.css
Created August 18, 2017 21:22
.cm-s-wp .CodeMirror pre { font-family: Consolas, Monaco, monospace; font-size: 13px; color: #23282D; }
.cm-s-wp span.cm-def { color: #23282D; }
.cm-s-wp span.cm-number, .cm-s-wp span.cm-string, .cm-s-wp span.cm-atom { color: #685890; }
.cm-s-wp span.cm-comment { color: #72777C; font-style: italic; line-height: 1em; }
.cm-s-wp span.cm-meta { color: #555D66; font-style: italic; line-height: 1em; }
.cm-s-wp span.cm-variable { color: #31843F; }
.cm-s-wp span.cm-variable-2 { color: #31843F; }
.cm-s-wp span.cm-qualifier { color: #555D66; }
.cm-s-wp span.cm-keyword { color: #0073AA; }
@melchoyce
melchoyce / bounce.css
Last active September 27, 2017 15:29
Bouncing animation from WordPress.com
.cdm-subtle-focus {
-webkit-animation: bounce .7s 1;
animation: bounce .7s 1;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
@-webkit-keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
@melchoyce
melchoyce / Big image with headline and columns above.gist
Created June 8, 2021 15:47
WordPress Pattern: Big image with headline and columns above.
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:heading {"style":{"typography":{"fontSize":"48px","lineHeight":"1"}}} -->
<h2 style="font-size:48px;line-height:1"><strong>PETAL &amp;</strong><br><strong>STAMEN</strong></h2>
<!-- /wp:heading --></div>
<!-- /wp:column -->
<!-- wp:column {"width":"40%"} -->
<div class="wp-block-column" style="flex-basis:40%"><!-- wp:paragraph -->
<p>Petal &amp; Stamen is a new nature magazine from the same folks who brought you Antler &amp; Horn. Each magazine contains over a dozen photography essays.</p>
@melchoyce
melchoyce / Full width image of space with big headline.gist
Created June 8, 2021 16:31
WordPress Pattern: Full width image of space with big headline
<!-- wp:cover {"url":"https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-283674-jpeg-2.jpg","id":3031,"dimRatio":0,"minHeight":100,"minHeightUnit":"vh","contentPosition":"bottom left","align":"full","style":{"spacing":{"padding":{"top":"100px","right":"100px","bottom":"100px","left":"100px"}}}} -->
<div class="wp-block-cover alignfull has-custom-content-position is-position-bottom-left" style="padding-top:100px;padding-right:100px;padding-bottom:100px;padding-left:100px;min-height:100vh"><img class="wp-block-cover__image-background wp-image-3031" alt="" src="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-283674-jpeg-2.jpg" data-object-fit="cover"/><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","style":{"typography":{"fontSize":"72px","lineHeight":"1.15"}}} -->
<p class="has-text-align-center" style="font-size:72px;line-height:1.15"><strong>STAR CLUSTERS</strong><br><strong>IN HERCULES</strong></p
@melchoyce
melchoyce / Two columns with impressionist image.gist
Created June 8, 2021 16:46
WordPress Pattern: Two columns with impressionist image
<!-- wp:spacer -->
<div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:columns {"align":"full"} -->
<div class="wp-block-columns alignfull"><!-- wp:column {"width":"250px"} -->
<div class="wp-block-column" style="flex-basis:250px"></div>
<!-- /wp:column -->
<!-- wp:column {"width":"30%"} -->
@melchoyce
melchoyce / Three images and text.gist
Created June 8, 2021 17:10
WordPress Pattern: Three images and text
<!-- wp:columns {"align":"wide"} -->
<div class="wp-block-columns alignwide"><!-- wp:column {"width":"80%"} -->
<div class="wp-block-column" style="flex-basis:80%"><!-- wp:gallery {"ids":[3053,3054,3052],"linkTo":"none"} -->
<figure class="wp-block-gallery columns-3 is-cropped"><ul class="blocks-gallery-grid"><li class="blocks-gallery-item"><figure><img src="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-2848918-jpeg-683x1024.jpg" alt="" data-id="3053" data-full-url="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-2848918-jpeg.jpg" data-link="https://mywptesting.site/?attachment_id=3053" class="wp-image-3053"/></figure></li><li class="blocks-gallery-item"><figure><img src="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-2849089-jpeg-683x1024.jpg" alt="" data-id="3054" data-full-url="https://mywptesting.site/wp-content/uploads/2021/06/image-from-rawpixel-id-2849089-jpeg.jpg" data-link="https://mywptesting.site/?attachment_id=3054
@melchoyce
melchoyce / Centered introduction text with button and offset images.gist
Created June 8, 2021 17:42
WordPress Pattern: Centered introduction text with button and offset images
<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#050c35"},"typography":{"lineHeight":"1","fontSize":"20px"}}} -->
<p class="has-text-align-center has-text-color" style="color:#050c35;font-size:20px;line-height:1"><em>Introducing</em></p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"96px","lineHeight":"1"},"color":{"text":"#050c35"}}} -->
<p class="has-text-align-center has-text-color" style="color:#050c35;font-size:96px;line-height:1">Ukiyo-e Prints</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center","style":{"color":{"text":"#050c35"},"typography":{"fontSize":"22px"}}} -->
<p class="has-text-align-center has-text-color" style="color:#050c35;font-size:22px">Printed in Tokyo, Japan and made of <br>100% organic cotton rag paper. <br>Available for a limited time.</p>