automattic / design-handbook Goto Github PK

View Code? Open in Web Editor NEW

18.0 114.0 4.0 755 KB

A handy-dandy guide to designing interfaces for WordPress.com.

Home Page: https://wordpress.com/design-handbook/

License: MIT License

JavaScript 2.24% HTML 25.20% CSS 72.56%

design-handbook's Introduction

WordPress.com Design Handbook

This is the repository for the WordPress.com Design Handbook – a style guide of all that is WordPress.com.

Logotype: History of the WordPress.com brand and guidelines for use of Logotype, the W mark, and sub-headings
Colors: List of our primary and secondary colors and their uses
Typography: Typefaces and ours Modular Scales
Iconography: Guidelines for uses of Iconography
Metrics: Exapanded Modular Scale grid
Patterns: Blueprints for several elements of WordPress.com

URLs

Github Repo: https://github.com/Automattic/design-handbook

Live Site: https://WordPress.com/design-handbook

Instructions to update the live site

You'll need to manually copy the files over to the live path in /themes/a8c/design-handbook/with the exception of the following files and directories:

/scss/
.gitignore
Gruntfile.js
package.json
LICENSE.md

There might be some files on your local copy that you shouldn't copy over either:

/node_modules/
/css/style.css.map

design-handbook's People

Contributors

Stargazers

Watchers

Forkers

jessejones hermannovich isabella232 thedigitaloctopus

design-handbook's Issues

Add instructions for updating the live site on wpcom

I think we should add instructions for updating the live site on WordPress.com in the readme file.

I think the process is basically copying the generated files to the right directory.

Make this repository public.

The Design Handbook site is open to the public, so it makes sense for this repo to be as well.

Following the example set by Gridicons going public, I'll review the following for any links to private sites or sensitive data in screenshots.

Update icons page (Gridicons is public!)

Gridicons is public now, so we can probably retire the other icon sets. Maybe we should keep them around for prosperity? We should state that they are "retired" and that Gridicons is the currently used set.

README.md should include repo URL

While looking at the files in public_html/wp-content/themes/a8c/design-handbook I was trying to figure out where the master repo was. Including that information in the README.md file would be really helpful. Something as simple as a this line at the bottom:

REPO: https://github.com/Automattic/style-guide

Dash vs. Underscore

Any reason why we are using a hyphen here instead of an underscore like it's used in the Field Guide?

(in colors.scss)

Do we need modernizr?

Looking over the live site at https://wordpress.com/design-handbook/ I noticed that it loads JS library modernizr. Does the site make use of it in any way? In other words, does it really need to be loaded on the site?

If we aren't using it, lets remove it. That is about 6,293 bytes ( depending on compression settings ) on every page load, because it is being loaded on first and repeat views ( WPT results ). That would drop the first view fully loaded requests from 9 to 8 and reduce the over the wire page weight by nearly 4%.

The draft "Guide to Using Modernizr responsibly" might be helpful here.