Master CSS Layout with Travis Waith-Mair, creator of the layout library, Bedrock Layout Primitives
Learn how to build complex layouts in React with Anonyome Labs’ Senior Frontend Developer and the creator of the layout library, Bedrock Layout Primitives, Travis Waith-Mair. Travis served as the Tech Lead for the Design System Team at R1RCM and spent early time in his career as a Software Engineer at Pluralsight. Travis unpacks everything you need to create layouts for React and other web frameworks, without using CSS frameworks as a crutch. Along the way you will learn modern CSS Layout tools like Normal Flow, Flexbox, and Grid. Get the full course here, https://www.newline.co/courses/compos....
Writing CSS for React is tough because React components don't map well to the traditional way of writing CSS. The solution for writing CSS for React is to use compositional CSS and layouts. In this course, Travis will show you how to build custom and complex layouts in React by composing just a few foundational layout primitives. Then apply the principle of "Encapsulated CSS" to both extend these primitives as well as to create custom layout primitives. Create virtually any layout you see, or can think up, with this course, Composing Layouts in React.
This course is produced by \newline; building courses for developers from software professionals. We democratize production-level details that you would have to spend years educating yourself by working at a Silicon Valley company. Get instant access to this course and other newline e-books, guides and courses by subscribing here: https://www.newline.co/pricing
Connect with \newline Online!
Visit \newline's Website: https://www.newline.co/
Find \newline on Facebook: / newlinedotco
Follow \newline on Twitter: / fullstackio
Follow \newline on Instagram: / newlinedotco
Chat with \newline on Discord: / discord
#newline #React #CSS
Chapters
0:00 Course Intro
02:24 CSS In The Age of Components
04:40 Composing Layouts
10:13 Encapsulated CSS
19:05 Normal Flow as Composable Layouts
27:49 CSS Flexbox & CSS Grid
34:16 CSS Reset
39:56 Intro to Layout Spacers
41:58 The Stack Component