BrickPress
Explaining WordPress Using
LEGO Master Builder Techniques
Adam Soucie
• Freelance WordPress
developer
• “Self taught”
• Loves to build LEGO with my
4-year old daughter
A little about me
@AdamSoucie | adamsoucie.com
What this talk is NOT
• Aimed at advanced developers
• Specific to plugins or theme development
• A “How To” do anything in particular
• Will not teach you code
@AdamSoucie | adamsoucie.com
What this talk IS
• For relative beginners
• A different way to look at WordPress and
web development in general
• Awesome.
@AdamSoucie | adamsoucie.com
• Set of principles and
techniques used by LEGO
• Foundation for how official
sets are built
• Available in a series of sets
called the Master Builder
Academy
Master Builder Techniques
@AdamSoucie | adamsoucie.com
7 Techniques
1. Locking
2. Sideways Building
3. Size Scaling
4. Small Elements
5. Balance
6. Details
7. Alternate Uses
@AdamSoucie | adamsoucie.com
• The process of joining two or
more bricks with one that lies
across either on top,
underneath, or both
• Makes your elements more
stable
Technique #1: Locking
@AdamSoucie | adamsoucie.com
• Using “clearfix” to contain
floated elements
• Wrapping partner elements in
a container <div>
Applying to WordPress
@AdamSoucie | adamsoucie.com
• Uses special pieces with studs
on the side
• Allows a model to extend
horizontally or diagonally as
well as vertically
• The basis for the SNOT (Studs
Not On Top) technique
Technique #2: Sideways Building
@AdamSoucie | adamsoucie.com
• Widget areas
• Most common areas are
sidebars and footers
• Genesis Framework uses
them to create variable home
pages
• Allows functionality to extend
in customized ways
Applying to WordPress
@AdamSoucie | adamsoucie.com
• Standard model size is
minifigure scaled
• Models at Legoland’s are
Miniland scaled
• Common to find sets that are
miniature scale
Technique #3: Size Scaling
@AdamSoucie | adamsoucie.com
• Altering text sizes and padding
to account for different devices
• Making buttons and other
clickable areas optimized for
touch screens
Applying to WordPress
@AdamSoucie | adamsoucie.com
• Combines with size scaling
• Uses small elements (typically
1 stud by 1 stud)
• Mimics larger elements at a
smaller scale
Technique #4: Small Elements
@AdamSoucie | adamsoucie.com
• Tied to responsive design
• Mobile first design philosophy
• Built-in Column classes
• Flexbox
Applying to WordPress
@AdamSoucie | adamsoucie.com
• Basic physics
• If something is too heavy on
one side, it will fall over
• Symmetry is your friend
Technique #5: Balance
@AdamSoucie | adamsoucie.com
• Padding, padding, padding
• Line height
• Balancing sidebar content with
page content
Applying to WordPress
@AdamSoucie | adamsoucie.com
• Exactly what you’d think
• Helps identify your models
• Spaceships use lasers,
Castle sets use swords
• Translucent bricks help
indicate movement or action
Technique #6: Details
@AdamSoucie | adamsoucie.com
• Transition states
• Flat vs. Skeuomorphic design
• Using colors to indicate
actions, especially with buttons
Applying to WordPress
@AdamSoucie | adamsoucie.com
• Very few pieces have just one
use
• A silver frog could also be a
wall sconce
• Use your imagination!
Technique #7: Alternate Uses
@AdamSoucie | adamsoucie.com
• Creative problem solving
• Chain “get_the_” functions to
access post information
• You access just about
anything with a post ID
Applying to WordPress
@AdamSoucie | adamsoucie.com
More Info
Twitter
@AdamSoucie
Blog
adamsoucie.com
Business
impossiblycreative.com
Master Builder Academy
lego.com
brickset.com

BrickPress: Explaining WordPress Using LEGO Master Builder Techniques

  • 1.
    BrickPress Explaining WordPress Using LEGOMaster Builder Techniques Adam Soucie
  • 2.
    • Freelance WordPress developer •“Self taught” • Loves to build LEGO with my 4-year old daughter A little about me @AdamSoucie | adamsoucie.com
  • 3.
    What this talkis NOT • Aimed at advanced developers • Specific to plugins or theme development • A “How To” do anything in particular • Will not teach you code @AdamSoucie | adamsoucie.com
  • 4.
    What this talkIS • For relative beginners • A different way to look at WordPress and web development in general • Awesome. @AdamSoucie | adamsoucie.com
  • 5.
    • Set ofprinciples and techniques used by LEGO • Foundation for how official sets are built • Available in a series of sets called the Master Builder Academy Master Builder Techniques @AdamSoucie | adamsoucie.com
  • 6.
    7 Techniques 1. Locking 2.Sideways Building 3. Size Scaling 4. Small Elements 5. Balance 6. Details 7. Alternate Uses @AdamSoucie | adamsoucie.com
  • 7.
    • The processof joining two or more bricks with one that lies across either on top, underneath, or both • Makes your elements more stable Technique #1: Locking @AdamSoucie | adamsoucie.com
  • 8.
    • Using “clearfix”to contain floated elements • Wrapping partner elements in a container <div> Applying to WordPress @AdamSoucie | adamsoucie.com
  • 9.
    • Uses specialpieces with studs on the side • Allows a model to extend horizontally or diagonally as well as vertically • The basis for the SNOT (Studs Not On Top) technique Technique #2: Sideways Building @AdamSoucie | adamsoucie.com
  • 10.
    • Widget areas •Most common areas are sidebars and footers • Genesis Framework uses them to create variable home pages • Allows functionality to extend in customized ways Applying to WordPress @AdamSoucie | adamsoucie.com
  • 11.
    • Standard modelsize is minifigure scaled • Models at Legoland’s are Miniland scaled • Common to find sets that are miniature scale Technique #3: Size Scaling @AdamSoucie | adamsoucie.com
  • 12.
    • Altering textsizes and padding to account for different devices • Making buttons and other clickable areas optimized for touch screens Applying to WordPress @AdamSoucie | adamsoucie.com
  • 13.
    • Combines withsize scaling • Uses small elements (typically 1 stud by 1 stud) • Mimics larger elements at a smaller scale Technique #4: Small Elements @AdamSoucie | adamsoucie.com
  • 14.
    • Tied toresponsive design • Mobile first design philosophy • Built-in Column classes • Flexbox Applying to WordPress @AdamSoucie | adamsoucie.com
  • 15.
    • Basic physics •If something is too heavy on one side, it will fall over • Symmetry is your friend Technique #5: Balance @AdamSoucie | adamsoucie.com
  • 16.
    • Padding, padding,padding • Line height • Balancing sidebar content with page content Applying to WordPress @AdamSoucie | adamsoucie.com
  • 17.
    • Exactly whatyou’d think • Helps identify your models • Spaceships use lasers, Castle sets use swords • Translucent bricks help indicate movement or action Technique #6: Details @AdamSoucie | adamsoucie.com
  • 18.
    • Transition states •Flat vs. Skeuomorphic design • Using colors to indicate actions, especially with buttons Applying to WordPress @AdamSoucie | adamsoucie.com
  • 19.
    • Very fewpieces have just one use • A silver frog could also be a wall sconce • Use your imagination! Technique #7: Alternate Uses @AdamSoucie | adamsoucie.com
  • 20.
    • Creative problemsolving • Chain “get_the_” functions to access post information • You access just about anything with a post ID Applying to WordPress @AdamSoucie | adamsoucie.com
  • 21.