/minnpost-patternlab

MinnPost instance of Pattern Lab

Primary LanguageHTMLMIT LicenseMIT

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.