MinnPost Pattern Lab

This is the MinnPost instance of Pattern Lab. It is initially installed to improve the redesign process during the 2019-2020 redesign of minnpost.com.

Installation and edition information

To install, download this repository and run npm install. We're basing this on the following dependencies:

"dependencies": {
    "@pattern-lab/cli": "^5.3.0",
    "@pattern-lab/core": "^5.3.0",
    "@pattern-lab/engine-handlebars": "^5.0.0",
    "@pattern-lab/starterkit-handlebars-vanilla": "^1.4.0",
    "@pattern-lab/uikit-workshop": "^5.3.1"
}

Pattern List

For now, this is the possible pattern list. Probably it will change as patterns get built out.

Patterns / Atoms

Grid

• Base grid (8pt) / Typography and icons (4pt)
• Layout grid (12 columns)
• Viewports (maybe xs, sm, md, lg, xl)

Colors

• Brand colors
• Functional colors
• Section colors
• Accent colors
• Neutral colors

Typography

• Type scale
• Font stacks

Type elements

• Headings
• Paragraphs
• Blockquote (include nested items)
• Pullquote
• Inline elements
• Date/time elements

Ads

• Default
• Embeds
• Sponsored messages

Images

• Icons
• End bug
• Default image

Components / Molecules

Global

• Logo
• Logo footer
• Sponsor list
• Ad regions

Meta

• Topic indicator
• Byline
• Date

Box (sidebar/footer/etc)

• Title

Lists

• Unordered
• Ordered
• Definition
• Include nested and linear lists

Buttons

• Default
• Primary
• Secondary
• Disabled
• Loading
• Pagination
• Combo
• Group

Form elements

• Text Input
• Select
• Multi select
• Currency text input
• Text input with suffix
• Text input with button
• Text input with help
• Text input validation feedback
• Date input
• Radio and checkbox
• Radio and checkbox with description
• Choice boxes
• Switch
• Range

Image elements

• Main images
• Inline images
• Thumbnails

Content elements

• Expander
• Reading progress

Helpers

• Spacing
• Typography
• Display
• Responsive

Page

• Page header

Component Groups / Organisms

Global

• Header
• Footer

Entries

• Article
• Event
• Topic
• Author
• Related article

Entry groups

• Articles
• Events
• Topics
• Related articles
• include with title, title and image, title and summary, title and image and summary

Article

• Article header
• Article footer
• Comments

Event

• Event header
• Event footer
• Event details

Archive

• Archive header
• Archive footer

Boxes

• Sidebar box

CTAs

• Popups
• Site messsages
• Donate header
• Donate footer
• Newsletter article footer
• Newsletter homepage middle

Navigation

• Top level
• Secondary
• Tertiary
• Include dropdowns
• Tabs
• Social

Funder

• Sponsor
• Donor group
• Advertiser
• Partner

Templates

• Article list
• Article
• Event list
• Support
• Member benefits
• Homepage
• Author archive
• Category archive
• Search results
• Archive
• Page

Pages

These are the specific pages for prototyping, at least initially.