A presentation at Wordcamp Miami in in Miami, FL, USA by Juan Pablo Gomez
CSS GRID IS HERE — Q THE SE UEL Now with 100% more subgrid March 1st, 2020 • Juan Pablo Gomez @jupago • jupago.com
ABOUT ME Juan Pablo Gómez UX Designer @jupago jupago.com
1 A designer’s best weapon 2 The most powerful line of CSS. 3 Demos! @jupago • jupago.com
1 A designer’s best weapon 2 The most powerful line of CSS. 3 Demos! @jupago • jupago.com
______DESIGNER @jupago • jupago.com
W OR K S AM PL E S TAXI SUMMER SOCCER CAMPS FC HARLEM FIELD $80 FC Harlem Current FCH players to receive a 20% discount 5-12 Year Olds Safe, fun based learning Qualified, experienced coaches Inclusive for all abilities Develop important skills FC Harlem has been leading the way for what an inner-cities club should be. The club was founded in 1991 and has grown to international recognition. Building partnerships with Chelsea Football Club, Nike, Uninterrupted, while staying true to their roots; offering low-cost/free camps to communities that have been left out by USA’s pay to play system. Individually tailored sessions Book Online Now fcharlem.org/SummerCamps For futher details please contact Irv Smalls info@fcharlemlions.org or call 212.212.2121 I’ve been a designer and advisor for the team since 2010. Updated their logo, website, and brand. @jupago • jupago.com
@jupago • jupago.com
@jupago • jupago.com
@jupago • jupago.com
@jupago • jupago.com
DESIGNER DESIGNER DESIGNER DESIGNER DESIGNER DESIGNER DESIGNER WHO CODES UX DESIGNER GRAPHIC WEB FLASH EMAIL UI FRONT END @jupago • jupago.com
DESIGNER DESIGNER DESIGNER DESIGNER DESIGNER DESIGNER DESIGNER WHO CODES UX DESIGNER GRAPHIC WEB FLASH EMAIL UI FRONT END @jupago • jupago.com
Titles change, Roles change, But my biggest weapon, the most exhilarating and equally terrifying is this: @jupago • jupago.com
@jupago • jupago.com
@jupago • jupago.com
reddit.com WP Twenty-twenty Theme googledrive.com @jupago • jupago.com
Not all white screens are created equal @jupago • jupago.com
My Wordpress Journey 1 Buy a theme 2 Use a default WordPress Theme 3 Should have read what a child themes is 4 Build a custom theme (underscores.me) 5 Advance Custom Fields 6 Gutenberg 7 Advance Custom Fields 8 Gutenberg 9 Advance Custom Fields 10 Gutenberg AND ACF? @jupago • jupago.com
1 A designer’s best weapon 2 The most powerful line of CSS. 3 Demos! @jupago • jupago.com
FLOATS ARE DEAD Content Browser @jupago • jupago.com
CSS GRID WHITE SPACE VISUAL HIERARCHY SYMMETRY MULTI DIRECTIONAL INNOVATIVE TIMELESS @jupago • jupago.com
1 A designer’s best weapon 2 The most powerful line of CSS. 3 Demos! @jupago • jupago.com
www.mozilla.org/en-US/firefox/developer @jupago • jupago.com
Let’s go! @jupago • jupago.com
grid-template-columns: subgrid; grid-template-rows: subgrid; @jupago • jupago.com
Where can I learn more Jen Simmons @jensimmons layout.land labs.jensimmons.com thewebahead.net mozilladevelopers.github.io/playground/ *They are responsible for 99% of what I know about CSS Grid @jupago • jupago.com
Where can I learn more Rachel Andrew @rachelandrew rachelandrew.co.uk/ thecssworkshop.com CSS Layout News Smashing Magazine *They are responsible for 99% of what I know about CSS Grid @jupago • jupago.com
THANK YOU!!! slides: noti.st/jupago Juan Pablo Gómez Web Designer Twitter: @jupago jupago.com
A designer’s journey into the wonderful revolution of CSS Layouts.
for free. You
can too.