component

Grid system

Creates complex responsive web design grid layouts more easily and consistently across browsers Breakpoints modifiers

Rosetta use CSS Grid for main layouts ( or smaller components if needed) and combined with Flexbox helpers you can create complex layouts. To start working with Grid, just add the is-grid class to the grid container.

Basic usage:

1
2
3
4

Fixed columns

Rosetta, like others CSS Frameworks on the web, follow the 12-column grid standard. The main columns prefix is grid-cols and, combined with the desired number of columns, will change the default grid behavior which is one column.

Four columns grid grid-cols-4:

1
2
3
4

With lg:grid-cols-4 modifier:

Resize your browser to see when the columns are stacked and when they are horizontally distributed.

1
2
3
4

Auto columns

There will be times when we want to use an automatic column layout. Rosetta provides six default column sizes modifiers for this purpose with the two auto column template variants auto-fit and auto-fill.

Class rem px
grid-fit-xs / grid-fill-xs 5rem 80px
grid-fit-sm / grid-fill-sm 6.25rem 100px
grid-fit-md / grid-fill-md 9.375rem 150px
grid-fit-lg / grid-fill-lg 12.5rem 200px
grid-fit-xl / grid-fill-xl 15.625rem 250px
grid-fit-xxl / grid-fill-xxl 21.875rem 350px

With grid-fit-sm modifier:

1
2
3
4

With grid-fill-sm modifier:

1
2
3
4

These modifiers act by changing the --grid-auto-min-width css variable according to the desired column size respectively, so you can target each class and change the default size:

Changing grid-fit-sm modifier size. To only target the following example we will combine the modifier with an example class: .example.grid-fit-sm

  • Modifying the variable:
    --grid-auto-min-width: 20rem;
1
2
3
4

Grid items sizes & placement

Rosetta also includes the CSS Grid grid-column and grid-row helpers properties. By indicating which column/row you want to start and/or end you can position items in the grid easily:

  • col-start-<columns> / col-end-<columns>

  • row-start-<rows> / row-end-<rows>

Header
Body
Sidebar
Footer

If you only need to expand a grid item you can use the col-span helper. Lets expand the first box to span 3 columns by applying the col-span-3 helper to it:

  • col-span-<columns>
1
2
3
4
  • Applying the col-start and col-end helpers from desktop screen:

Resize your browser to see when the columns are stacked and when they are horizontally distributed.

Header
Body
Sidebar
Footer
  • Applying the col-span helper from desktop screen:

Resize your browser to see when the columns are stacked and when they are horizontally distributed.

1
2
3
4

Variables 

  :root {
    --column-size-xs     : 5rem;      // 80px
    --column-size-sm     : 6.25rem;   // 100px
    --column-size-md     : 9.375rem;  // 150px
    --column-size-lg     : 12.5rem;   // 200px
    --column-size-xl     : 15.625rem; // 250px
    --column-size-xxl    : 21.875rem; // 350px
    --grid-auto-min-width: var(--column-size-xs);
  }