This content originally appeared on Angular Blog - Medium and was authored by Emma Twersky
This month we introduce a new blog series, ‘Modern CSS in Angular’, where we’ll take a look at modern CSS enhancements recommended for Angular developers.
This week, we tackle layouts.
Layout has made significant advancements since Angular’s early days. Based on advancements to native layout solutions and removal of support for IE11, the Angular team will stop publishing new releases of the experimental @angular/flex-layout library starting in v15.
@angular/flex-layout is a hybrid JavaScript and CSS layout system that has remained in beta in the Angular organization since v5. During that time, CSS has evolved dramatically, offering new approaches for building performant and scalable layouts. In this blog post, you’ll learn more about the recommended layout approaches in Angular.
Modern CSS layouts
The two most recommended modern CSS layout solutions are CSS Flexbox and CSS Grid.
CSS Flexbox
Flexbox is a one-dimensional layout method that allows you to arrange items in rows or columns. Items flex (expand) to fill additional space or shrink to fit into smaller spaces.
You can see a Flexbox in Angular demo here:
We recommend CSS Tricks: A Complete Guide to Flexbox to get started learning Flexbox.
In general, Flexbox is a good choice for components within your application and small-scale layouts. CSS Grid layout is intended for larger scale layouts. Learn more about the trade-offs of Flexbox and CSS Grid.
CSS Grid
CSS Grid is a two-dimensional layout system for the web. It allows you to arrange content in rows and columns. It has many features that help developers more easily build complex layouts.
You can see a CSS Grid in Angular demo here:
We recommend CSS Tricks: A Complete Guide to Grid to get started learning Grid.
Flex, grid & the future of flex-layout
A core principle of Angular is the separation of concerns. By deprecating flex-layout in favor of CSS, we continue to guide users towards more readable and maintainable code. Additionally, @angular/cdk’s layout package provides lightweight utilities to build responsive UIs. These options provide a reduced payload size and runtime cost, and improve the Lighthouse performance metrics of your site in comparison to @angular/flex-layout.
Starting today we’ll follow Angular’s deprecation practices. Since @angular/flex-layout is a beta package, Angular v15 will publish the last release of @angular/flex-layout.
While @angular/flex-layout never left beta, it gained adoption with over 300k downloads per week. To support applications that rely on the package, we’ll continue publishing security and browser incompatibility fixes for at least a year as part of the long-term support (LTS) for the package.
A plan to migrate to modern CSS
Choosing a modern layout system is based on your app’s structure. Learn more about modern layouts in Chrome’s Learn CSS course.
We are grateful to Angular community contributor and angular/flex-layout co-author Adam Plumer, who has supported the release of angular/flex-layout throughout the years. Read more in Adam’s Farewell to Flex Layout.
Adam volunteered to author migration guides for the most popular use cases — we’d love to hear which angular/flex-layout migrations you want more guidance on in this GitHub issue.
While we cannot map directly to a new layout system with automated migrations because of the complexity and dynamic use https://blog.angular.io/modern-css-in-angular-layouts-4a259dca9127cases of the library, we can recommend four layout tools. Here’s a high-level overview:
CSS Flexbox
Flexbox is most similar to @angular/flex-layout, since @angular/flex-layout was designed to give developers an ergonomic way of applying Flexbox layouts in Angular templates. The following code example is a map of common Flexbox properties and the associated properties from @angular/flex-layout.
display: flex;
flex-direction: row // fxLayout
flex-wrap: wrap //fxLayout
box-sizing: border-box;
align-content: stretch, // fxLayoutAlign
align-items: stretch, // fxLayoutAlign
justify-content: flex-start, // fxLayoutAlign
CSS Grid
Many CSS surveys have highlighted the potential of the CSS Grid as the future of two dimensional layout. Due to modern CSS Grid being newer than the design of flex-layout, migration from flex-layout to CSS Grid is a more manual process in order to take advantage of associated properties.
@angular/cdk’s layout package
If you need layout specific utilities in your TypeScript code for dealing with viewport size, Angular also provides the @angular/cdk’s layout package.
The @angular/cdk’s layout package is mainly for use cases when you need to build responsive UI interactions in code, rather than generally creating an application layout. An example might be that for large viewports you want to display a pop-up as a dropdown attached to the trigger element, but on small viewports you want to display the pop-up as a centered dialog.
TailwindCSS
Tailwind CSS provides a template oriented approach to styling, similar to the @angular/flex-layout.
Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup. Read more about Angular + Tailwind CSS.
We recommend exploring all four modern options when planning your migration.
Thank you
We want to take a moment to thank everyone who has contributed to the project over the years.
We’re excited to see how CSS has evolved over the years and the modern layout alternatives that it provides.
Recommending native solutions as best practice allows developers to stay on the performant path while allowing the Angular team to focus on high-impact projects that further move Angular into the future.
Until the next time, go build modern CSS (and join us next for a look at visibility)!
What CSS in Angular would you like to learn about next?
Modern CSS in Angular: Layouts was originally published in Angular Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Angular Blog - Medium and was authored by Emma Twersky
Emma Twersky | Sciencx (2022-10-18T07:32:30+00:00) Modern CSS in Angular: Layouts. Retrieved from https://www.scien.cx/2022/10/18/modern-css-in-angular-layouts/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.