Date post: | 18-Feb-2017 |
Category: |
Technology |
Upload: | jesse-james-arnold |
View: | 244 times |
Download: | 1 times |
ComponentsEach component of an interface needs to be considered independently and then brought together to form any number of layouts.
Context FreeComponents should be able to adapt to any number of layouts and screen sizes.
We like our components to be fluid by default, allowing the container to define the width as much as possible.
Be more modularThe answer has always been to break your interface into smaller pieces.
header
image
body
block
Building blocks
Object oriented ideas- Avoid unnecessarily
duplicating styles
- Encourages code reuse
- Easier to track down and modify the common styles
- Smaller file sizes increase performance
header
image
body
block
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
Design PatternA design pattern is an element of an interface that can solve a specific design problem and repeats across the product in various contexts with a variety of content.
Benefits
Visual consistency for users impacts user experience.
Speeds up workflow between design and engineering.
Creates a shared language that connects the whole team.
Buttons
No more design handoffDesign is a work in progress, it is never handed off to be built.
<html>
<body>
<h1>My Website is Done</h1>
</body>
</html>
Team GoalsShould provide the following team benefits:
1. Allows designers to contribute.
2. Allows product owners to qa and review design in browser.
3. Provides documentation for engineers.
Fabricator: Taxonomy
└── materials
└── components └── structures
or
└── materials └── atoms └── molecules └── organism
Fabricator: Documentation
---notes: | These are notes written in `markdown`---<div class="component">My Component</div>
Fabricator: Data
links:
About Us: - About Us - Careers - Media Center - Legal
{{#each home.links}}
{{#each this}} <a href="#">{{this}}</a> {{/each}}{{/each}}
<a href="#">About Us</a>
<a href="#">Careers</a>
<a href="#">Media Center</a>
<a href="#">Legal</a>
Pattern Library: FabricatorPros:
Allows you to create your own materials logic.
Self documenting HTML components.
Navigation automatically generated.
Can feed it real data to test each component.
Pattern Library: Growing PainsScaffolding new features may introduce redundancy or code bloat.
Product wants to share core components of one product pattern library with other product teams.
Visual design updates may share common elements with a feature in development and cause disruption.
While importing CSS and JS from pattern library is easy, importing HTML templates is still copy and paste.
Current Workflow
Design Pattern Library
CSS
Engineering WebApp
Extra Work and QuicklyFalls Out of Sync
Reproduce Markup
Plugin that ports fabricator functionality to work within a custom WordPress theme.
Pattern library and application share the same templates.
https://github.com/Exygy/wp-pattern-library
(this could easily be done with other platforms: AngularJS, React, Ruby on Rails, Django, Laravel, etc)
New strategy: wp-pattern-library
wp-pattern-library: directory structure
wp-content/themes/custom-theme/ pattern-library - materials - atoms - buttons - button.php - button-icon.php - button-sizes.php - lists - list-unordered.php - list-ordered.php - forms - checkbox.php - input-text.php - radio.php - paragraph.php - molecules - nav-menu.php - tabs.php - topbar.php - organisms - media-grid.php - story-grid.php - tile-grid.php
wp-pattern-library: Atoms
text: Submitclasses: hollow---<button class="button <?= esc_attr( $classes ) ?>"><?= $text ?></button>
button.php
<a class="primay button" href="#">So Primary</a><a class="hollow button" href="#">So Hollow</a><a class="secondary button" href="#">So Secondary</a><a class="secondary hollow button" href="#">So Hollow</a>
---text: Submitclasses: hollow---<button class="button <?= esc_attr( $classes ) ?>"><?= $text ?></button>
button-colors.php
wp-pattern-library: Molecules
topbar.php
<div data-sticky-container> <div class="top-bar<?php if (is_not_pl()) : ?> data-sticky<?php endif ?>” data-options="marginTop:0; stickyOn: small;" style="width:100%" > <div class="top-bar-title"> <button class="top-bar-menu-icon" type="button" data-toggle="page"> <?php get_icon('menu') ?> </button>
<div class="top-bar-name"> <span class="top-bar-name-content"> Custom Theme </span> </div> </div>...
wp-pattern-library: Moleculesblock-columns.php---
title: Basic Contenttext: This basic content makes an interesting point!category: Componentimage_src: http://placehold.it/768x350url: #---<div class="block-columns"> <a class="block-columns-link" href="<?= esc_url( $url ) ?>"> <div class="block-column"> <div class="block-column-content"> <header class="block-column-header"> <span class="block-column-category"><?= $category ?></span> <h3 class="block-column-title"><?= $title ?></h3> </header> <p class="block-column-text"><?= $text ?></p> </div> </div>
<div class="block-column"> <figure class="block-column-figure"> <img src="<?= esc_attr( $image_src ) ?>">...
wp-pattern-library: Organisms
block-column-list.php
<section class="block-columns-list"> <?php get_pattern('molecule', 'block-columns') ?> <?php get_pattern('molecule', 'block-columns') ?> <?php get_pattern('molecule', 'block-columns') ?></section>
wp-pattern-library: Code Reuse
Call patterns from within WordPress templates: example post loop
<?php while ( have_posts() ) : the_post(); ?> <div class="block" data-equalizer-watch> <a class="block-link" href="<?php the_permalink() ?>"> <figure class="block-figure"> <img src="<?= esc_url( get_the_post_thumbnail_url( null, 'component-thumb' ) ) ?>"> </figure> <div class="block-content"> <h3 class="block-title <?= esc_attr( Harmony::has_item_been_updated( get_the_ID() ) ? 'is-recent' : '' ) ?>"> <?php the_title() ?> </h3> <p class="block-text"> <?= wp_trim_words( get_field('description'), 18, '...' ) ?> </p> </div> </a> </div><?php endwhile; ?>
<?php while ( have_posts() ) : the_post(); get_pattern('molecule', 'block', [ 'title' => get_the_title(), 'text' => wp_trim_words( get_field('description'), 18, '...' ), 'image' => get_the_post_thumbnail_url(null, 'component-thumb'), 'link' => get_permalink(), 'classes' => Harmony::has_item_been_updated(get_the_ID()) ? 'is-recent' : '', 'attrs' => 'data-equalizer-watch' ]);endwhile; ?>
before
after
wp-pattern-library: Code Reuse
Single source of truth for html markup.
● Map WordPress data to pattern variables (title, text, etc)
● All markup updates made from molecules/block.php
● Application and pattern library are always up to date
<?php while ( have_posts() ) : the_post(); get_pattern('molecule', 'block', [ 'title' => get_the_title(), 'text' => wp_trim_words( get_field('description'), 18, '...' ), 'image' => get_the_post_thumbnail_url(null, 'component-thumb'), 'link' => get_permalink(), 'classes' => Harmony::has_item_been_updated(get_the_ID()) ? 'is-recent' : '', 'attrs' => 'data-equalizer-watch' ]);endwhile; ?>