Grid System
The grid system describes the rules on how to position UI elements on the screen. When used correctly, it assures a consistent layout for all pages of your application and allows a responsive design for all screen sizes.
Foundations
To explain the grid system used in RingUI, the most important concepts of grids are explained first.
Columns
Every screen is split up into 12 columns. These columns build the basic blocks on which the layout regions are positioned. For fluid layouts, columns are the areas that change their width when the total screen width changes.
Gutters
The gutters describe the gaps between the columns. They always have a fixed width of 16 pixels, no matter how wide the current screen is. Gutters and Columns together build the content area.
Margins
Margins are the areas to the left and right of the content area.
• For screens above or equal to the width of 900 pixels, they are 32 pixels wide.
• For screens below the width of 900 pixels, they are 16 pixels wide.
Layout regions
The actual content is positioned within the layout regions. Layout regions can be spread across multiple columns and resized together with the grid.
Layout regions always align with the outer edges of columns. Never expand your layout regions into the gutters.
You don’t have to follow any layout rules within the layout regions apart from sticking to the spacing system and the component-specific layout rules.
Fluid Layout
Fluid layouts use 100% of the screen width. When the screen resizes, the layout adapts to fit the screen.
Fixed Layout
You don’t have to use the full width of the screen. It is possible to define a maximum width to create a fixed layout. If a screen is bigger than your defined maximum width, the content area doesn’t get any wider than this.
As soon as the screen gets narrower than your defined maximum width, it is best to turn your layout into a fluid layout. The columns will then adapt their width to the screen size as described above.
It’s best to stick to one of the breakpoints for your defined maximum width.
Headers
In many cases it makes sense to you use the whole width of the screen for the header bar while using a fixed layout for the rest of the screen.
Modals
Modals don’t have to follow the grid. Similarly to a fixed layout, they should have a fixed size as long as the screen is big enough. When the screen gets narrower, they adapt to the screen size.
Grid Offsets
If your interface includes a sidebar or anything similar that needs to be visible all the time, add offsets to your grid layout.
Offsets usually have a fixed width. However, there are no rules on how wide they have to be. Just adapt them to your needs. The rest of the content area will keep the 12 columns layout, as described above.
Breakpoints
At various screen widths, the layout can responsively change its structure. When you create custom layouts for different screen widths, use the following breakpoints.
Since each application has its unique layout, there are no specified rules on how to adapt the layout when the screen width changes. You also don’t have to make a unique layout for each width region (XS, SM, MD, LG). The picture below serves as an example of how a layout adaption for different screen sizes may look like.
Examples
To illustrate how the layout system is used in action, you can find a few examples here.
