Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordCamp Orlando 2015 - BrickPress – Merging LEGO Master Builder Techniques with WordPress

AdamSoucie
November 14, 2015

WordCamp Orlando 2015 - BrickPress – Merging LEGO Master Builder Techniques with WordPress

Orlando WordPress developer Adam Soucie shares how the LEGO Master Builder techniques apply to building WordPress themes, plugins, and full websites.

AdamSoucie

November 14, 2015
Tweet

More Decks by AdamSoucie

Other Decks in Programming

Transcript

  1. • Freelance WordPress developer • “Self taught” • Loves to

    build LEGO with my 4-year old daughter A little about me @AdamSoucie | adamsoucie.com
  2. 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
  3. What this talk IS • For relative beginners • A

    different way to look at WordPress and web development in general • Awesome. @AdamSoucie | adamsoucie.com
  4. • 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
  5. 7 Techniques 1. Locking 2. Sideways Building 3. Size Scaling

    4. Small Elements 5. Balance 6. Details 7. Alternate Uses @AdamSoucie | adamsoucie.com
  6. • 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
  7. • Using “clearfix” to contain floated elements • Wrapping partner

    elements in a container <div> Applying to WordPress @AdamSoucie | adamsoucie.com
  8. • 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
  9. • 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
  10. • 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
  11. • 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
  12. • 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
  13. • Tied to responsive design • Mobile first design philosophy

    • Built-in Column classes • Flexbox Applying to WordPress @AdamSoucie | adamsoucie.com
  14. • Basic physics • If something is too heavy on

    one side, it will fall over • Symmetry is your friend Technique #5: Balance @AdamSoucie | adamsoucie.com
  15. • Padding, padding, padding • Line height • Balancing sidebar

    content with page content Applying to WordPress @AdamSoucie | adamsoucie.com
  16. • 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
  17. • Transition states • Flat vs. Skeuomorphic design • Using

    colors to indicate actions, especially with buttons Applying to WordPress @AdamSoucie | adamsoucie.com
  18. • 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
  19. • 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