Pattern Lab

By Anonymous (not verified), 17 May, 2021

Pattern Lab is an open-source tool for creating UI design systems, providing starter kits for projects with blank, sample, or demo components.

Content
Title
Pattern Lab
Image
2 Tecnología
Description

Pattern Lab is an open-source tool for creating UI design systems, providing

starter kits for projects with blank, sample, or demo components.

Text Color
Dark Indigo
Text Alignment
Left
Link Background Color
Tangerine
Size
Medium
Overlay effect
Hide overlay effect
Margin
With Large margin bottom
Include featured clients
Yes
Description

Implement Atomic Design Systems

Pattern Lab is an open-source tool for building UI design systems. Its approach is based on the Atomic Design methodology, which separates a website into five basic patterns: atoms, molecules, organisms, templates, and pages. Offering pattern starter kits, start your Pattern Lab project with a blank slate, a few sample components, or a full demo project.

Style
Title & Description & Media
Image position
Right
Image
Pattern Lab -100.jpg
With Background
No
Text Alignment
Left
Link style
Button primary
Variant
Default
Description

 

 

Pattern Lab employs the reusable components implementation that saves time, allowing users to create static websites. These components, repeatable HTML code fragments called patterns, do more than just accelerate work results. They promote consistent stability and serve as an adaptive base that employees can build and improve over time.

 

 

Style
Default
Image position
Right
With Background
Yes
Text Alignment
Left
Box
Image
Outsourcing Projects Delivered_ (1).png
Subtitle
+80
Title
OUTSOURCING PROJECTS DELIVERED
Image
Professionals (1).png
Subtitle
+26
Title
PROFESSIONALS
Image
Clients (1).png
Subtitle
+200
Title
CLIENTS
Image
Hours worked_.png
Subtitle
+300
Title
PROJECTS DELIVERED
Title
This is what defines us
Style
Statistic
Margin
With Margin vertical
With Background
Off
Description

Main features

 

  • Create live UI prototypes using dynamic data to ensure your components can handle the dynamic nature of your content.
  • Pattern Lab does not impose any tools or libraries on you, which means that you have full control over how to create your project.
  • Define and describe your UI patterns so your entire team can start speaking the same language.
  • Pattern Lab supports the Handlebars and Twig template engines. You can also create a plugin to further extend the capabilities of Pattern Lab.
Style
Title & Description & Media
Image position
Left
Image
Pattern Lab IMG 2.png
With Background
No
Text Alignment
Left
Link style
Button primary
Variant
Default
Title
Our Selection Process
Timeline Steps
Title
Extensible
Description

Choose your templating engine to match your production environment better. Also, you can or build a plugin to extend Pattern Lab's capabilities even further.

Title
Nested patterns
Description

Pattern Lab lets you include UI patterns inside each other like Russian nesting dolls. Make a change to a pattern, and see those changes reflected anywhere the pattern is included.

Title
Pattern starter kits
Description

Spin up Pattern Lab loaded with frameworks like Bootstrap, Foundation, or Material Design. But also start from scratch and build your custom design system.

Title
Versatile
Description

Pattern Lab can be used for simple rapid prototyping or for developing production-level frontend code. Some teams have even modified it to power their live sites.

Title
Let's work together!
Text Alignment
Left
Webform
Margin
With Large margin top
Thumbnail
Pattern Lab 1ra-100.jpg
Weight
0
Translation
Pattern Lab Tecnología