Resources

Starting with a new technology may be challenging. Don't worry, we've got your back. Our goal is improve your understanding of layout composition, CSS Grid, and then ensure your superb experience with Atomic Layout. To achieve that we've picked a list of useful resources to get you started on the topic.

CSS Grid

Atomic Layout uses CSS Grid. The more familiar you are with CSS Grid, the more pleasant your experience with Atomic layout will be.

Most of the values you would assign to components are according to the CSS Grid specification, so please make sure you are familiar with its fundamentals.

We have prepared a set of useful resources to get you familiar with what CSS Grid is and how to use it. Not only this knowledge will help you to achieve incredible layouts with Atomic Layout, but it will also improve your skillset in general.

• Introduction into CSS Grid (MDN)

• CSS Grid vs Flexbox (Medium)

• CSS Grid Visual Cheatsheet

Getting started

We have prepared a step-by-step tutorial to get started with Atomic Layout. It includes everything you need to get an idea of how the workflow with the library looks like—from installation to breaking down UI elements to areas, and creating responsive compositions.

pageInstallation

Fundamentals

After you are done with the tutorial, please take a look at some of the fundamental aspects that Atomic layout often operates on. They will help you better understand the principles of the library.

pageBreakpointspageProp aliasespageResponsive props