ComboStrap Styling - Length Scale (Size Scale)

Undraw My Documents

About

Every length are scaled based on what's called the rem (Root Emphemeral Unit) which is equal by default to 16px.

This scale is used for font size and spacing (component spacing and line spacing)

The numerical scale is going:

  • from 1 for a length value of .25rem
  • to 5 for a length value of 3rem

The alphabetical scale is going:

  • from xs (extra-small) for a length value of 1rem
  • to lg (large) for a length value of 2rem

Configuration

Every browser sets a value of 16px for one rem by default but you can increase it with the remSize configuration.

Rem Strap Conf

This value is not dependent on the screen size (Bootstrap does not vary it either)




Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.




Recommended Pages
Primary Secondary Color
Branding Colors (primary, secondary)

The branding colors are the most dominant colors of your theme. They bring a connection to your brand.
Undraw My Documents
ComboStrap - Font Size Typographic Attribute

How to set the font-size with the font-size attribute
Undraw My Documents
ComboStrap - Line Spacing (Line height)

The line spacing attribute lets you set the space between each line in a paragraph
Spacing Margin Padding
ComboStrap Styling - Spacing (Margin, Padding)

spacing is the definition of the margin and padding between block component where: margin is a transparent space outside the box (not filled with the background color) padding is the space inside...
Undraw Website Builder Re Ii6e
Grid Layout: How to create a responsive space distribution on the horizontal axis

Grid Layout: Responsive distribution of the horizontal space grid is a component that permits to distribute the horizontal space in a responsive fashion (ie suitable for mobile screen). The children:...
Undraw Dark Mode 2xam
Theme

A theme designs your entire website app. A theme is composed of: templates. Each template applies to one page and designs a layout. component styling You can apply: a bootstrap stylesheet or...



Task Runner