Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Design Pattern Library
The design pattern library, audits all the different types of components that exist in the existing openlibrary codebase.
Eventually, we'd love to move these components to open library's developer design page.
Inspired by Wikimedia's style guide.
Note: this list is unstable and likely to change at any given time, while we refactor the frontend UI. If you want to help us document components, please jump in with your image uploads and documenting where these components are in use!
You can also help by contributing to the associated mega-issue #1092 and making sure the codebase reflects this document.
These are components on Open Library to be made modular and documented:
Is used in the Carousel component to display books. Note, the button inside this component is bespoke (a book-cta) - see #1158.
Can appear once at the top of any page.
Consists of the page title, an inline "count" and a set of tools.
Other elements can be rendered under the tools but are not part of the component.
<div class="cta-btn cta-btn--available">CTABtn</div>
<div class="cta-btn"> Join waiting list <div class="cta-btn__badge">4</div> </div>
Makes use of buttonCta
As seen in component PageBanner
If this button is not large enough for add the large modifier ('btn--large')
e.g. the read ebook button on a book page
As seen in the sign up button! See #1158
Appears in the iaBar
ButtonBrowserDefault (was ButtonSearch) -
It is used to submit the search query. Uses slightly modified default browser styles.
Styled with .cta-btn, this button is a little Dr Jekyll and Hyde in how it is defined, but it always looks similar, only varying by color.
Currently used in the EditToolbar component.
Used to indicate if a book is available for borrow
Used to read a book from the online reader
There are many form of this button and is used to join a waitlist
(please help document me!)
A table listing
Used on the following pages:
Arrows are fonts rendered via the slick library. This carousel contains several CategoryItems
A decorated carousel has background:
This is used on [the works page]:
A carousel section wraps a carousel and a heading.
(appears on home page)
As on subject page
As seen on stats
An overlay that expands images. Visible when clicking the image of the author on their page. Author page
Also used when clicking the image of a book cover on a book page.
Also used when adding an item to a reading list via a Dropper component:
(Uses rules #colorbox, #cboxOverlay, #cboxWrapper)
(please help document me!)
Renders a diff
Any wiki page that can be edited will have an edit toolbar
When inside a .lists element this renders differently. (please help document me!)
A list of links with a heading as seen on https://openlibrary.org/subjects
We currently make use of .contentQuarter elements to arrange these side by side but it would be useful to have them modeled as their own component and deal with layout separately.
See also: LinkBox
Shows when logged in and with JS enabled when you hover over a cover.
shows at the bottom of any wiki page, showing the revision history of that page.
Confusingly, a similar table renders on the revision history page
Internet Archive Bar: A bar that appears at the top of all pages. Makes use of a ButtonGhost.
Combines MyBooksList and MyBooksMenu In use on https://openlibrary.org/account/books/want-to-read
Used to render forms in OpenLibrary (please help document me!) Some examples:
Used in openlibrary/templates/stats/readinglog.html
Similar to HeadedLinkList but used to show related links, which are listed inline with a smaller heading. This element does not use a ul element, but does function in a very similar way.
Seen on https://openlibrary.org/subjects/science and on book pages
See also HeadedLinkList
The header bar appears at the top of every page.
Can be displayed on any page via JS to report feedback to a user after some form has been posted.
The footer appears at the top of every page.
and used for the "you might also like" and "more by " carousels on a works page
Shows up when you search from the header
A tab component. See author page for an example.
Can be found on the home page. Graph rendered via an HTML canvas.
A mega component which puts together various other components. Appears on book page
Seen on lists page.
Seen on lists page.
On works page and books pages:
[pictured: dropit tool]
Appears on book page. I don't believe it appears anywhere else (??)
The dropper is an enhanced substitution
A variant of the dropper exists for things that are not books. Can be seen on subjects and authors pages.
Dropper with dropdown
(See also ReadStatuses component, shown in image)
When referring to "Drop click" we are referring to this part of the element:
Radio buttons to toggle between different 3 different options
Books Actions Menu
Appears on books page.
Definition markup can be used to generate a definition list See https://www.w3.org/MarkUp/html3/deflists.html
Shown when you click the Droppercomponent.
Widget boxes are used for layout. They consist of a header, a hint and a component (which might be a list or another component on this page)
The screenshot shows a WidgetBox with an unordered list and a WidgetBox containing a ListsLists.
Appears at the top of book pages. Will probably be merged in future with another component once identified.
A form within the page that allows searching the site.
Must appear at the top of the page.
Deprecated, but in use when removing lists on books pages. See also colorbox