Skip to content

Instantly share code, notes, and snippets.

View melchoyce's full-sized avatar

Mel Choyce-Dwan melchoyce

View GitHub Profile


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.


melchoyce /
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
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.
Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur. Nullam id dolor id nibh ultricies vehicula ut id elit.
.cm-s-wp .CodeMirror pre { font-family: Consolas, Monaco, monospace; font-size: 13px; color: #23282D; }
.cm-s-wp { color: #23282D; }
.cm-s-wp, .cm-s-wp, .cm-s-wp { color: #685890; }
.cm-s-wp { color: #72777C; font-style: italic; line-height: 1em; }
.cm-s-wp { color: #555D66; font-style: italic; line-height: 1em; }
.cm-s-wp { color: #31843F; }
.cm-s-wp { color: #31843F; }
.cm-s-wp { color: #555D66; }
.cm-s-wp { color: #0073AA; }
melchoyce / bounce.css
Last active September 27, 2017 15:29
Bouncing animation from
.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 / 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 / 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":"","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="" 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 / 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 / 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="" alt="" data-id="3053" data-full-url="" data-link="" class="wp-image-3053"/></figure></li><li class="blocks-gallery-item"><figure><img src="" alt="" data-id="3054" data-full-url="" data-link="
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>