Go to top

Layout / Grid

Grid

The layout and grid system is the backbone of our design system, providing a structured framework for organizing content and maintaining consistency across our products. It defines how elements are arranged on the screen, ensuring a seamless and user-friendly experience. In this section, we will delve into the principles, guidelines, and best practices that govern our layout and grid system. Understanding these foundational concepts is essential for creating visually appealing and responsive interfaces that align consistently.

Columns

Our design system employs a 12-column grid system. This grid structure serves as the foundation for consistent content organization and spacing throughout our interfaces.

Leverage Grid Classes

Simplify layout implementation by using pre-defined grid classes. These classes are designed to streamline column placement and sizing. For example, apply the col-6 class to create a column spanning half the width of the container.

Responsive Design

Make your layouts responsive by combining grid classes with breakpoints. Use classes like col-md-8 to define column behavior for specific screen sizes, ensuring your designs adapt seamlessly across devices.


Gutters

Gutters in our grid system are fixed at 24px as per Bootstrap framework configuration. They provide necessary spacing between columns, ensuring a clean and organized spacing layout.


Margins

The page margins are defined by the container. This is a present configuration by the Bootstrap framework.

Breakpoints

Breakpoints are key thresholds in our responsive design strategy that define how content should adapt to various screen sizes. By strategically adjusting the layout and styling at these breakpoints, we ensure our interfaces remain functional and visually appealing across a range of devices.

Breakpoint Classes

To simplify responsive design, we’ve created a set of breakpoint classes that you can use in conjunction with our grid system and other components. These classes follow a consistent naming convention:

  • Use CSS code @media (max-width: 575.98px) { } for extra-small screens (e.g., mobile phones)
  • Use CSS code @media (min-width: 576px) and (max-width: 767.98px) { } for small screens (e.g., tablets)
  • Use CSS code @media (min-width: 768px) and (max-width: 991.98px) { } for medium screens (e.g., laptops)
  • Use CSS code @media (min-width: 992px) and (max-width: 1199.98px) { } for large screens (e.g., desktops)
  • Use CSS code @media (min-width: 1200px) { } for extra-large screens (e.g., large desktop monitors)