uspto / designpatterns Goto Github PK
View Code? Open in Web Editor NEWThe USPTO's open source UI style guide, pattern library, and Bootstrap theme. Version 1.x
Home Page: http://uspto.github.io/designpatterns
License: Other
The USPTO's open source UI style guide, pattern library, and Bootstrap theme. Version 1.x
Home Page: http://uspto.github.io/designpatterns
License: Other
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?
Looks really clean. See anything here you think would be useful to add?
http://msdn.microsoft.com/en-us/library/windows/apps/hh465475.aspx
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.
Since the repository is still private, we want to add a notice when clicking the 'View on Github' links that tells people to request access.
The toggle switch pattern has been added to the form controls section. Feedback appreciated!
http://uspto.github.io/designpatterns/patterns-components-formControls.html#toggle-switches
Components > Buttons
Components > Forms
Components > Menus
Components > Popovers
Components > Tables
aria-sort
to sorted tables. (doesn't look like aria-sort handles multi-sort, or just use 'other'?)Components > Tooltips
Patterns > Search
Patterns > Wizards
Inline css background image not working in IE.
The button on input groups in Firefox and IE11 (did not check lower versions) extends 1 pixel below the input box.
Possible Fix:
Changing the .btn class to use a line-height of 1.4 (not sure if this affects anything else, only tried it in firebug)
Example on this page:
http://uspto.github.io/designpatterns/patterns-patterns-search.html
can we add GA to the demo site? Let me know if you need the USPTO GA code
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.
Changes to input-group-btn z-indexes to fix border overlapping inadvertently causing issues with z ordering of dropdowns nested in an input-group-btn.
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.
Viewers of the guide should have the ability to see the latest official release, the working drafts, and previous major releases.
Current plan:
Latest, draft, and previous versions should include all documentation, guides, downloads, and changelogs.
Add documentation for performing a release including:
grunt build
for draft builds to draft foldergrunt release
for official release to root folder and sub folderMind if we make the white background row first, in the striped table?
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.
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 |
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.
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.
The system alerts component currently has relatively loose guidelines regarding the automatic/manual closing. We can improve this and expand these guidelines to contextual alerts.
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)
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
Brian,
eFile is using a different pattern for the horizontal steps. May we please add that to pattern library.
thanks,
Menka
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:
After Segoe, can we add Helvetica as a fallback font for OSX? And then Arial and sans-serif, as you have it.
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.
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
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
asedfsdf
The separator for the filters contains a null character, it does not render in Chrome, but it does in Firefox and IE.
CSS Class:
.filter-criteria .filter-applied-list > li:after
URL:
http://uspto.github.io/designpatterns/patterns-patterns-filters.html#side-filters
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?
The packaged zip file is currently empty. A regression from cf5f7bd.
I don't believe I've seen radio buttons and check boxes used in a menu like that, is this needed?
Think we can add a link on this page or in the nav to the work-in-progress version? Wherever it's logical.
Waiting on Arva to finalize
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.