MP6 + UI components

Going to just blog what’s on my mind/docket. Open source my brain or something.

Since I started contributed to core, I’ve thought about how we need to have UI components in core admin CSS (and used whenever an API outputs something in the admin). In 3.8, I would like to tackle Trac tickets #18909 and #16413. First, though, we need styling, and I think MP6 is a great place to do some rapid iteration.

In MP6, I’ve started a little initiative that serves several purposes – I call them test pages, and the intent is for them to serve as visual unit tests as well as the backbone for a style guide / UI docs. They’re hidden – to turn them on, define the MP6_STYLE_GUIDE constant to true somewhere, probably in your wp-config.php. These will definitely not become a part of core; when merge time comes, they would get split off into a separate plugin.

As of this writing, all you’ll get is a new top level menu item for a style guide, with one child page that serves up jQuery UI components, using their standard test page. It enqueues CSS from Google – namely, Smoothness, so it doesn’t look MP6. Yet. The goal (and this is open to anybody who wants to contribute) is to re-style jQuery UI components into something that looks and feels like WordPress+MP6. There are some technical considerations that probably have to be made – namespacing to avoid conflicts, possible conflicts with styles already in core/changing those places to use new styling, how styles are loaded and how color overloads work. But first: it needs to look and feel good.

Next up is a form test page. I’ll be using a few things as inspiration for the HTML: UIKit, Bootstrap, and perhaps Gumby Framework. I’m open to other suggestions as well. We’ll want to make form styling reusable (of course) and responsive. I’d love it so that no extra classes are needed when creating your extensions – forms “just work”, whether on a settings page or in a meta box. The test page should probably account for these various typical places of use.

There are lots more components we can look at over time – it perhaps shouldn’t be as thorough as a front-end framework like Bootstrap, but if we’re talking about refining WordPress as a platform, it needs to apply to the front-end side of building, too. Let’s just make sure we keep our eye on the iterative prize.

MP6 + UI components

9 thoughts on “MP6 + UI components

  1. Hi Helen, I’d like to offer a few thoughts and a bit of time to the UI of WordPress. I’m an active developer, earning my living making bespoke themes. Please can you pop me an email with some guidance on how to get involved.

    Thanks

    Ian.

    Like

  2. I don’t have much time to contribute at the moment… but if you’re looking for suggestions, I was thinking it would be neat to crowdsource all of the possible UI components one might want to offer styling options for. Essentially, a call out to plugin authors to share screenshots / HTML of UI components they’ve had to design themselves (and would like to have styled by core, or have style guidelines for). I’d expect a lot of contributions from those who’ve created settings / custom meta box frameworks.

    Then, you could plop a few, some, or all of those into a page, see how existing styles applied, and prioritize how core styles could support the UI components.

    From each of the framework examples you’ve shared, I think one feature rings true: having a website that showcases each of the styled elements is immensely valuable. It likely makes it much easier for UI folks to contribute too, instead of having to download WP, install a plugin, etc. etc.

    Just some thoughts!

    Like

  3. I work on a meta box framwork and my ultimate goal for the UI is that it just feels like part of WordPress. I need update this for MP6 and I’d be happy to contribute anything I can towards a style guide if possible. Simply documenting some of the patterns used in forms etc would be a great help to people developing plugins.

    I’ve just checked out the style guide you have been working on – its a great start! I’m particularly glad to see the inclusion of jQuery UI styles – the date pickers in particular is something that we use in our framework.

    Like

      1. Sounds awesome! I originally made my own admin UI styling for my WP themes since I didn’t quite like the current UI. Now with MP6 coming, I’m simplifying everything up and conforming to it (since I opted not to use the Settings API). I’m nearing adjusting my page builder so I’ll reply here with any updates on tweaks.

        Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s