Modern CSS Layout for UI Designer (1h)
Moving from a responsive column-based design to a modern flex/grid CSS layout.
Most designers are familiar with responsive design, a column-based layout approach with fixed breakpoints to cover all screen sizes. However, with modern CSS layouts, we can move beyond the rigid structure, crafting designs that are flexible and dynamic, seamlessly adjusting to different screen sizes.
In this course, we will explore all CSS layout tools like Flexbox, CSS Grid, Media Queries and Container Queries in a UI designer-friendly way. There will be code snippets here and there to play with, but rather than learning to code, this is about grasping concepts and designing with real possibilities and limitations in mind and how we can translate this to Figma.
This course is for designers and developers who want to understand each other's tools to improve conversation and collaboration dramatically.
- Responsive Column Grids vs Modern CSS Layout
- Which layout approach should I be using? Pros and Cons
- Responsive Design
- Setting up Responsive Column-Based Design in Figma
- CSS Flexbox Introduction
- Flexbox to Figma: Auto Layout Magic!
- CSS Grid Introduction
- CSS Grid to Figma
- Breakpoints and CSS Media Queries
- Typography: Breakpoints or CSS Clamp
- Breakpoints to Figma
- Container Queries Introduction
- Container Queries to Figma
Take full course
Join the Newsletter
Sign up and be the first to know about new releases, workshops, and articles.