Atomic design is a clear methodology for crafting design systems.
Atomic design gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.
Clients and team members are able to better appreciate the concept of design systems by actually seeing the steps laid out in front of them. In a lot of ways, this is how we’ve been doing things all along, even if we haven’t been consciously thinking about it in this specific way. [Brad Frost]
A visual design system is built out of the core components of typography, layout, shape or form, and colour. [Laura Kalbag]
Atomic design distinguishes five distinct levels, each of them represented by different type of Patterns:
UI Patterns can be included inside each other like Russian nesting dolls. Because of that, applying atomic design to your application allows to maximise reusing of HTML markup, reduce technical debt avoiding code duplication and accelerate implementation of new features.
Pattern Lab tool allows to adapt atomic design in development practice by giving ability to preview and test the nested Patterns. The original implementation is a static site generator (powered by either PHP or Node) that stitches together UI components.
Pattern Lab For Sling main purpose is to support prototyping the site with following atomic design straight on your instance of Apache Sling or its implementation which the most known is Adobe AEM. The benefit coming from prototyping straight in your web application is possibility to utilize your Patterns for final implementation by integrating them the proper data from backend.
The tool allows also to utilize great Pattern Lab features for prototyping and testing your Patterns with your Sling applications based on with HTL language with OOTB XSS protection. As Sling based application, it also you ability to use global variables to access current scope data, like current page path with ${currentPage.path}, or to add already implemented logic in your application or include already implemented files and templates. Additionally, as HTL language allows to define unlimited number of templates in one HTML file, Pattern Lab For Sling allows to present the same data set with all templates defined in one file.
The main feature of Pattern Lab is ability to preview implemented HTML files and HTL templates with configured set of CSS, JS and content data.
Each of the pattern is rendered on separate page with configured CSS and JS files that which are embedded in displayed on Pattern Lab Page.
For HTL templates it is also possible to provide example set of data, without need to implement authoring part of your application, by defining proper JSON formatted files. The file data needs to placed in the HTML file's folder keep proper naming convention to be utilized to generate proper Pattern.
As an example, let's consider /atoms/buttons/button.html file containing definitions two HTML templates: simplebutton and textbutton.
Adding data files below will cause generation of proper Patterns for each of the template:
- /atoms/buttons/button.json
- /atoms/buttons/button.1.json
- /atoms/buttons/button.homepage-example.json
- /atoms/buttons/button.in-footer.json
By adding template name to data file, it is possible to specify template specific content data. The files below causes generation of Patterns for simplebutton template only:
- /atoms/buttons/button.simplebutton.json
- /atoms/buttons/button.simplebutton.1.json
- /atoms/buttons/button.simplebutton.homepage-example.json
- /atoms/buttons/button.simplebutton.in-footer.json
The content of data files is simple JSON with parameters that should be passed into template:
{"btnClass" : "", "btnLink" : "#", "btnText" : "Button"}
The parameters can be also nested:
{
"link" : "#",
"number" : "75%",
"headline" : "Lorem ipsum dolor sit (37 characters)",
"progress" : {
"max" : "100",
"progressValue" : "75",
"label" : "75%"
}
}
Base on the file structure of Patterns in application, Pattern Lab For Sling is building proper hierarchical menu:
Pattern Lab allows you to create library of your Patterns structured in the the most convenient way for your project, by reflecting proper the structure of your application. Base on this structure each of the Pattern is associated with proper id. Patterns can be filtered by using their ids or the proper id's prefix and pattern Sling selector in url to Pattern Lab resource:
http://<sling.host>:<sling.port>/etc/pattern-lab/pattern-lab-demo.pattern.atoms-buttons.html
This feature allows you to access Pattern HTML and display it in your browser directly, by using raw Sling selector your URL:
http://<sling.host>:<sling.port>/etc/pattern-lab/pattern-lab-demo.pattern.atoms-buttons-text-button.raw.html
The direct links to Patterns can be utilized by any visual testing applications to set up continuous integration workflow detecting regression issues or changes appearing during patterns development and application releases.
This is the client side functionality coming from original Pattern Lab, allowing you to control width of the page or select one of the view port modes:
- S - adapts Patterns viewport to random small width used on mobile devices
- M - adapts Patterns viewport to random small width used mainly on tablet devices
- L - adapts Patterns viewport to random small width used mainly by desktop browsers
- FULL - adapts Patterns viewport to current browser width
- RANDOM - adapts Patterns viewport to any random width
- DISCO - presents Patterns continuously and randomly in different view ports
Document your patterns using Markdown format by creating files matching names of your pattern and optionally template, for example:
- \atoms\global\colors.md - for all templates in files
- \atoms\global\colors.brand.md - for brand template in file
Based on https://github.com/deepthinkit/patternlab-for-sling-demo
java -jar org.apache.sling.launchpad-9.jar
By default, it is running on port 8080, you can change it with -p parameter:
java -jar org.apache.sling.launchpad-9.jar -p <port>
mvn clean install -PautoInstallBundle
for AEM 6.3, use dedicated profile
mvn clean install -PautoInstallBundle -PAEM63
Optionally, you can also override default connection parameters:
mvn clean install -PautoInstallBundle -Dsling.host=<host> -Dsling.port=<port> -Dsling.user=<user> -Dsling.password=<password>
Example for resource file:
/etc/pattern-lab/pattern-lab-demo.json:
and resource value:
{
"sling:resourceType" : "patternlab/components/page",
"patternsPath" : "/apps/patternlab-demo", - root path for HTL templates
"bodyTag" : "<body class=\"main\">" //optional field allowing to define body start tag with attributes
"css" : ["/etc/designs/patternlab-demo/clientlib/css/style.css", ..], // array of links to CSS files that should be used in head of Pattern
"headerJs" : ["/etc/designs/patternlab-demo/clientlib/js/jquery.min.js"], // array of links to JS files that should be used in header of Pattern
"footerJs" : ["/etc/designs/patternlab-demo/clientlib/js/script.js"] // array of links to JS files that should be used in footer of Pattern
}
it can be accessed with link:
http://<sling.host>:<sling.port>/etc/pattern-lab/pattern-lab-demo.html
You can find example of Sling application under in this repository: https://github.com/deepthinkit/patternlab-for-sling-demo