The design of Marble websites is based on [Bootstrap 5.3](https://getbootstrap.com/docs/5.3).
The design of Marble websites is based on [Bootstrap 5.3](https://getbootstrap.com/docs/5.3).
### Components
### Components
...
@@ -34,3 +35,7 @@ The Marble versions of these components can be found on the [Common components](
...
@@ -34,3 +35,7 @@ The Marble versions of these components can be found on the [Common components](
### Responsive design
### Responsive design
The layout and content of new web pages respond to fit users’ devices, in accordance with the principles of [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design). Marble websites are designed using Bootstrap 5.3's [12 column grid system](https://getbootstrap.com/docs/5.3/layout/grid/), and intended to use its [default breakpoints](https://getbootstrap.com/docs/5.3/layout/breakpoints/).
The layout and content of new web pages respond to fit users’ devices, in accordance with the principles of [responsive design](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design). Marble websites are designed using Bootstrap 5.3's [12 column grid system](https://getbootstrap.com/docs/5.3/layout/grid/), and intended to use its [default breakpoints](https://getbootstrap.com/docs/5.3/layout/breakpoints/).
### Sizing and spacing
By default, Figma specifies sizing and spacing in px. When Bootstrap uses a different unit, the px value should be converted to an equivalent value. To aid these conversions, most of the values used in Figma are a fraction or multiple of 16px. For example, a 56px H1 in Figma translates to 3.5 rem in Bootstrap's Sass.
