Sorry, this page is work-in-progress. Please check it out later.
Sorry, this page is not yet finished.
Actually, since Atomic Layout accounts for a UI unit responsiveness by default, you will notice how similar the entire process is to the initial (mobile) layout declaration. Because responsive behavior is not a feature, it's a must.
Illustrate a breakdown process, new areas.
Areas template string is a literal visual representation of a UI.
Composition. However, if we set the
areasTabletas the value of the
areasprop again, it would override the mobile layout, which is not what we want.
areasprop value on a larger breakpoint. So, if we suffix the
areasprop name with the breakpoint name we can assign its value conditionally:
areas(prop name) +
md(breakpoint name) =
areasTablettemplate string on medium screen sizes an up.
areasMdconditionally, we can specify any other prop to be breakpoint-specific. If we wanted to increase the spacing between the areas on the medium breakpoint, we would follow the same steps: