Pattern Overview
Components and options for laying out your Cupcake project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes.
Containers
Containers are the most basic layout element in Cupcake and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
The default container class - .c-container - is fluid-width. This will fill 100% of available width.
<div class="c-container">
<div class="c-row">
</div>
</div>HTML
Using the class - .c-container-fixed - will give you a responsive container that has a fixed width. The width is responsive and will change based on the breakpoint.
Note: You need to resize your screen to see the below.
<div class="c-container-fixed">
<div class="c-row">
</div>
</div>HTML
Container breakpoints
| Screen Width | Min Width: 576px | Min Width: 768px | Min Width: 992px | Min Width: 1200px |
|---|---|---|---|---|
| Container Max Width | 540px |
720px |
960px |
1140px |
Responsive breakpoints
| XS < 576px | SM ≥ 576px | MD ≥ 768px | LG ≥ 992px | XL ≥ 1200px | |
|---|---|---|---|---|---|
| Class prefix | .c-col- |
.c-col-sm- |
.c-col-md- |
.c-col-lg- |
.c-col-xl- |