Responsive Layouts

While having the grid and flexbox options directly exposed in classes is nice, a framework is supposed to help decrease the amount of decisions you have to make when designing a website. To that end, Simplicity CSS offers a range of classes that provide automatic styling of components for you.

Do note that using a responsive layout will lock you into a layout a bit more strongly than using the Grid Options since it makes some stronger assumptions about what is the "correct" way to handle the layout. Not having to type out 8 different column option to specify where you want everything may be worth it though.

The following classes provide a responsive layout by default.

.responsive-grid

The base class .responsive-grid is a good choice for pages that have lots of text in the <main> content. For example, the content on this page is managed via the .responsive-grid class. Resize this screen to see how the layout changes.

.responsive-grid sets the following on the element it's applied to.

• column-start: 3 (desktop), 3 (large), 2 (medium), 1 (small)
• column-end: 11 (desktop), 11( large), 12 (medium), 13 (small)
• 12-column grid
• padding at the edge of the element

The .responsive-grid class also makes the following changes to the following elements it contains as it's children.