Header
Used to define spacing values
Our spacing values are derived from our 4px baseline grid. Instead of using pixels, we have defined our own custom units and a new scale. This helps us in abstracting away from the technical details and ensuring scalability across products.
With our new scale, spacing units are set in multiples of 4 i.e. 1 unit = 4px.
Spacing classes take on the syntax of .{property}-{spacing value}. Spacing values can range from 0-15 i.e. 0px - 60px.
.m-1 margin: 4px; .mt-1 margin-top: 4px; .mr-1 margin-right: 4px; .mb-1 margin-bottom: 4px; .ml-1 margin-left: 4px; .mx-1 margin-left: 4px;
margin-right: 4px; .my-1 margin-top: 4px;
margin-bottom: 4px; .nmt-1 margin-top: -4px; .nmr-1 margin-right: -4px; .nmb-1 margin-bottom: -4px; .nml-1 margin-left: -4px; .nmx-1margin-left: -4px;
margin-right: -4px; .nmy-1 margin-top: -4px;
margin-bottom: -4px; .m-automargin: auto;<div class="mr-2 mt-12 ml-4"></div> .p-1 padding: 4px; .pt-1 padding-top: 4px; .pr-1 padding-right: 4px; .pb-1 padding-bottom: 4px; .pl-1 padding-left: 4px; .px-1 padding-left: 4px;
padding-right: 4px; .py-1 padding-top: 4px;
padding-bottom: 4px;<div class="pt-4 pb-1 pl-1 pr-2"></div>