Composing Layouts in React - Newline

This course is about building complex layouts in React by composing just a few foundational layout primitives. The course covers modern CSS layout tools like Normal Flow, Flexbox, and Grid. You will learn what it means to compose layouts, how to apply the principles of Encapsualted CSS in React components, and the foundational layout primitives that every developer should know. The course will teach you how to build modern layouts for the web without depending on heavy CSS frameworks. The course is divided into 4 modules with 25 lessons and a total duration of 4 hours and 52 minutes. The instructor is Travis Waith-Mair, a senior front-end developer and the creator of the Bedrock Layout Primitives, a library of components designed to make layout composition easier.

In this course we tell you the best way to build complex layouts in React by composing only a couple basic layout primitives. En route you will learn modern CSS Layout devices like Normal Flow, Flexbox, and Grid.

What You Will Learn

Composing layouts and why you ought to get it done

The most effective method to apply the standards of Encapsualted CSS in our React components

The basic layout primitives that each engineer ought to know

CSS layout has developed and developed into a hearty arrangement of instruments to achieve a few incredible modern layouts. The issue is that we are as yet showing CSS as something that is" hacked" together by utilizing" stunts" to get our ideal web layouts. Learning CSS like this commonly leads us down one of two ways: We either build delicate page layouts utilizing the "see what sticks" strategy for CSS, or we surrender and proclaim that CSS is excessively precarious and acquire a X column grid framework like Twitter Bootstrap.

Making page layouts in CSS doesn't need to be convoluted. Like how you make a big deal about your ordinary discourse utilizing only a little subset of jargon created together, you can accomplish refined layouts by composing basic low-level layout primitives in one of a kind ways.

In this course, you will learn essential layout primitives that you can use to build a significant number of your more complex layouts. You will likewise learn how to apply the standard of "Encapsulated CSS" to both expand these primitives as well as to make custom layout primitives. To do this, we will reproduce a considerable lot of the layouts found in the wild utilizing the standards referenced previously.

This course doesn't need broad knowledge of CSS. It expects that you have a fundamental understanding of the CSS box model, CSS specificity, CSS selectors, and CSS sizing units. However you can apply the standards in this course to any modern web framework, including no framework development, this course will utilize React and expect you have an essential understanding of React, JSX, and React hooks.

Composing Layout in React is for both novice and experienced designers who need to take their layout abilities to a higher level. This course will show you the commonsense abilities you want to build modern layouts for the web without contingent upon weighty CSS frameworks. Not at all like courses and blog entries that show every layout property in seclusion, our item shows functional layout designs that you can utilize each day while tackling your layout challenges.

Course Satisfied
4 modules25 lessons4h 52m aggregate
Presentation
1 lesson2m complete

Welcome to Composing Layouts in React

Prologue to Composing Layouts in React

Presentation

2:30 minutes

Composable Layouts
6 lessons37m complete

CSS In The Time of Components

Involving CSS in this time of components is troublesome, particularly where web layout is concerned. In this module, you can learn the guidelines to build composable layouts.

Example

2:14 minutes

Composing Layouts

Complex layouts can be separated into more modest layout primitives that can be consolidated to build more complex designs. Thinking compositionally will open up a more pragmatic and reusable approach to making layouts on the web.

Illustration

5:33 minutes

Encapsulated CSS

Knowing where to put your styles is basic to understanding composable layouts. Utilizing the Standards of Encapsulated CSS you will know precisely how to apply your layout styles in your components.

Example

8:53 minutes

Normal Flow as Composable Layouts

In the example, you will learn about Normal Flow and what designs you can use to apply the standard of Encapsulated CSS with regards to Normal Flow.

Illustration

8:42 minutes

CSS Flexbox and CSS Grid as Composable Layouts

You will learn the essentials of CSS Flexbox and CSS Grid, particularly which properties adjust to the Encapsulated CSS standards and which ones don't.

Example

6:27 minutes

A CSS Reset For Composable Layouts

In this example you will learn how to reset the default program styles so they follow Encapsulated CSS.

Your Teachers
Travis Waith-Mair

👋 Hello! I'm Travis Waith-Mair. I'm a senior front-end designer and the maker of the Bedrock Layout Primitives, https://bedrock-layout.dev/, a library of components intended to make layout creation simpler.

I'm additionally the creator of The newline Manual for Composing Layouts in React here at newline.

medium.com

👋 Hello there! I'm Travis Waith-Mair. I'm a Senior Frontend Designer and the maker of the layout library, Bedrock Layout Primitives. I'm energetic about CSS layout and anticipate showing you the very abilities that I learned to build this library.