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.

Transcript

1. BrickPress Explaining WordPress Using LEGO Master 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 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
4. What this talk IS • For relative beginners • A different way to look at WordPress and web development in general • Awesome. @AdamSoucie | adamsoucie.com
5. • 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
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 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
8. • Using “clearfix” to contain floated elements • Wrapping partner elements in a container <div> Applying to WordPress @AdamSoucie | adamsoucie.com
9. • 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
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 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
12. • 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
13. • 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
14. • Tied to responsive 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 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
18. • Transition states • Flat vs. Skeuomorphic design • Using colors to indicate actions, especially with buttons Applying to WordPress @AdamSoucie | adamsoucie.com
19. • 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
20. • 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
21. More Info Twitter @AdamSoucie Blog adamsoucie.com Business impossiblycreative.com Master Builder Academy lego.com brickset.com