Giter Club home page Giter Club logo

designpatterns's Introduction

USPTO UI Design Library

Interested in trying the latest version of the USPTO Design System v2.x? Our new library is located at https://github.com/USPTO/USPTO-DS-Theme

==============

Have feedback or questions about the UI Design Library? Create an issue!

About this repository

This is the source code repository for the USPTO UI Design Library. The site is powered by Jekyll, a static site generator that plays well with Github Pages.

Want to contribute?

See our CONTRIBUTING.md file for contribution guidelines.


Building & running locally

Using Vagrant

With Vagrant and Virtualbox installed, do:

vagrant up

Once that's done, which will take a while the first time through, do:

vagrant ssh
cd /vagrant

Now, skip ahead to Running the documentation.

Not using Vagrant

You will need to install Jekyll. You will also need to install Node.js. Node.js powers the front-end build and dependency management tools Grunt and Bower.

Once Jekyll and Node.js are installed, ensure you have Grunt and Bower installed globally with:

npm install grunt-cli -g
npm install bower -g

Then install the project's dependencies with:

npm install
bower install

Running the documentation

This project can be built with SASS(Beta) or LESS. The SASS assets are currently in beta and you may encounter minor correctable visual bugs.

To build the front-end assets (LESS/CSS/JS) with:

grunt build

(Beta) To build the front-end assets (SASS/CSS/JS) with:

grunt buildSass

Note: The SASS files require your project to install Bootstrap Sass with NPM. The SASS files are looking for a 'node_modules' folder.

Run the project with Jekyll:

jekyll serve

This starts Jekyll, which compiles the markdown files into static html files, starts a server for you to view the documentation at, as well as watches for changes and recompiles.

Distribution Builds

After running grunt build and jekyll build, you will have a _site folder that contains the entire static site and resources.

License

Software code created by U.S. Government employees is not subject to copyright in the United States (17 U.S.C. §105). The United States Department of Commerce reserves all rights to seek and obtain copyright protection in countries other than the United States for Software authored in its entirety by the Department of Commerce. To this end, the Department of Commerce hereby grants to recipients a royalty-free, nonexclusive license to use, copy, and create derivative works of the software outside of the United States.

Disclaimer

The United States Department of Commerce (DOC) GitHub project code is provided on an "as-is" basis and the user assumes responsibility for its use. DOC has relinquished control of the information and no longer has responsibility to protect the integrity, confidentiality, or availability of the information. Any claims against the Department of Commerce stemming from the use of its GitHub project will be governed by all applicable Federal law. Any reference to specific commercial products, processes, or services by service mark, trademark, manufacturer, or otherwise, does not constitute or imply their endorsement, recommendation or favoring by the Department of Commerce. The Department of Commerce seal and logo, or the seal and logo of a DOC bureau, shall not be used in any manner to imply endorsement of any commercial product or activity by DOC or the United States government.

designpatterns's People

Contributors

aaronuxd avatar alanpto avatar arvalarva avatar bingles avatar bmathews avatar kmelendez123 avatar naenugu avatar scottmerker avatar sjoshi2 avatar vizui avatar zoinamir avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

designpatterns's Issues

Tables, stripe

Mind if we make the white background row first, in the striped table?

Improve filters pattern and examples

will it be clear which filters are currently applied with a long side list? May want to consider having current filters listed across top? not sure...

For top filters, how did they select two conveyance types? (assuming its a drop down)

Additional Short Date Format

We would like to specify an additional long date format as: MM/DD/YYYY

In tables with many dates, for space constraint reasons, it would take up less space to use the above format.

Add minimum button width

should add a suggested minimum width for buttons used in form submission, i.e. even if the button only has a few characters, there is no need to make it only the width needed for the characters.

pagination:

not sure about the three solutions. For instance on the Medium example, the numbers represent items and not pages, yet the drop down shows Jump to page

Typography in Chrome

Hi, We've got issues with Chrome not showing the different fonts, again. Jeff is using 37 and could only see 700 weight. The rest all looked like 400. I'm using 38, and 300 and 200 look the same.

Google analytics

can we add GA to the demo site? Let me know if you need the USPTO GA code

New patterns for Inspiration

Expand the templates in the Inspiration gallery with patterns that provide additional guidance/ideas for Patent applications.

Add or update the following patterns and link them together in a simulated workflow:

[x] Page Layout Content type Components on page
[...] Sign in fixed focused task data entry form, panel
[...] Create new account fixed content only data entry form with validation state, wizard nav
[...] Dashboard fixed or fluid navigation and content with right sidebar dropdown menu, labels, modal, tooltips
[...] User Profile fixed or fluid navigation and content pill navigation, tab navigation, table actions
[...] Search fixed or fluid navigation and content badges, expandable table row, filters (expand/collapse), metadata, table column sort, pagination
[...] Help hybrid navigation and content with right sidebar breadcrumb, tree navigation
[...] Favorites navigation and content master detail dropdown menu, inline PDF viewer, labels

Typography

After Segoe, can we add Helvetica as a fallback font for OSX? And then Arial and sans-serif, as you have it.

Alerts/Notifications info icon and action buttons

Can we try putting the "undo" link within the notification in a frame of sorts? Perhaps in a little button? I'm worried that longer notification text will run into it and make it part of the sentence.

Also,can we try the info icon with the circle? If you disagree, it's fine the way it is--whatever you recommend. That may be too close to the error notification, at first glance.

Switching tooltips to lighter color style

It would be great to customize the tooltip with lighter colors as the popover widget. I used it in the assignment with large content but it looks so dark in the light theme that I used from the USPTO pattern lib.

Bulletted lists

Users would like the bullet design to be both where it is now, and then cross-referenced in their own menu item. Some didn't know to look under typography for that.

Font styling

Where did the font weights issue leave off? I just attended a demo where the metadata pattern was used and it didn't show any increased weight for the labels.

(update: looks like issue 37 discusses this: #37 ,but it still isn't working on my laptop. did I not get a uspto wide browser update perhaps or is this an issue for others?)

On my laptop, chrome doesn't show the bolding but in explorer it does. Screen shots below:

image

image

508 review

Components > Buttons

  • Icon Buttons: missing sr-only for icon-only buttons

Components > Forms

  • Add aria-required attribute
  • Consider putting radio buttons and checkboxes into fieldset/legends (Bootstrap doesn't really support this, so holding off for now)
  • Add aria-invalid to invalid inputs and role="alert" on contextual errors

Components > Menus

  • Not accessible with AT (since these are static representations of menus with static a tags, I think we're fine. Real implementation using bootstrap is keyboard accessible)

Components > Popovers

  • Icon buttons lacking sr-only
  • Not accessible with AT (need more information, currently static)

Components > Tables

  • Fixed header may have AT issues (need more information)
  • Add aria-sort to sorted tables. (doesn't look like aria-sort handles multi-sort, or just use 'other'?)

Components > Tooltips

  • Not accessible with AT (bootstrap plugin issue?)

Patterns > Search

  • Add labels to inputs

Patterns > Wizards

  • Navigation items lacking label/status
  • Ensure all fields have correct label tags

Create build system/process for versioning docs

Viewers of the guide should have the ability to see the latest official release, the working drafts, and previous major releases.

Current plan:

  • Latest official release: uspto.github.io/designpatterns/
  • Latest working draft: uspto.github.io/designpatterns/draft/
  • Previous major release: uspto.github.io/designpatterns/2.1.4/

Latest, draft, and previous versions should include all documentation, guides, downloads, and changelogs.

Add documentation for performing a release including:

  • How git tags are used
  • How to perform a minor/patch update on a tagged release

  • Default grunt build for draft builds to draft folder
  • Add grunt release for official release to root folder and sub folder
  • Add UI mechanism and/or docs for viewing official/working/previous versions.
  • Add release process documentation

Required field asterisk color

Hi,

One of the first decisions UXD made (before you came aboard, Brian) was that the asterisk color would be the same color as the form field label text. Do you know why and when this changed? Not that it's a bad change, but just making sure it's what UXD wants as a whole.

Thanks

USPTO Patent Search site, a horrendous flaming UI disaster, does not use this style guide!

This project is awesome! Thanks for creating it. I'm sad, though, because The UI Nightmare That Is The USPTO Patent Search website does not use anything remotely close to this style guide. Instead it features a horror show of UI gaffes, from requiring several clicks to get to a search box, to embedding text in images, using tables everywhere, etc.

So I applaud the creation of this guide — it's clearly needed — but I bemoan its disuse by the USPTO.

Style Guides are great… but running code would be even better. What's the timeframe to implement this guide on USPTO.gov?

uspto

snippet

Why sentence case for Button text?

I'm new here, so this may have been answered before. Why is our Button text sentence case when in my experience best practice dictates Title case?

Thanks,
Jim Kauffman

Modal footer guidelines

On the modal description it states that the footer should always be visible. The default behavior in bootstrap is to allow the modal to expand vertically and scroll using the main browsers scroll bar. To me, this more usable for users as they don't need to hover or click in to the modal content to begin scrolling. Thoughts?

P.S. if we keep the guideline for the footer always being visible, we will need to update the example modal as it expands off of the page currently when more content is added.

Improve longevity of permalinks between minor/patch versions

Transition permalinks from /1.0.1/ to /1/.

The current permalink style is /1.0.1/. We only care about archiving major versions, and we don't want direct links to break for each minor/patch version. This task is to move from /1.0.1/ to /1/ to improve longevity of the links between minor/patch versions.

Table stripe color

The header shade is the same color as the stripes. Difficult to tell the difference between the header and the stripe in the first row.

Menus - Form controls

I don't believe I've seen radio buttons and check boxes used in a menu like that, is this needed?

contextual alerts

how would the undo and retry work in practice? We currently usually have just an x to close the notification.

also, are alerts that appear in a form, and notifications that appear after form submission both contextual alerts? e.g. one might appear inside the form, one might slide in at the top of the whole page?

System Alert v/s notifications

Some of the text on the notifications and system alerts in our pattern seem to refer to very similar events in the system. Thereby, it is not clear for new teams to understand, which one to use when. Can we clarify the usage context better?

For example,
image
and
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.