SCSS Utility Classes Documentation

Complete reference guide for all available utility classes and responsive variants

Breakpoints / Resolutions

The following breakpoints are defined and used throughout the utility classes:

Small

576px

Medium

768px

Large

992px

Extra Large

1200px

Spacing Scale

Spacing is defined using an 8px base unit:

8px

16px

32px

40px

50px

Display Utilities

Control the display property of elements.

Base Classes (All Resolutions)

.d-none display: none

.d-flex display: flex

.d-grid display: grid

Responsive Display Classes

Small (576px+)

.sm-d-block display: block

.sm-d-flex display: flex

.sm-d-grid display: grid

.sm-d-none display: none

Medium (768px+)

.md-d-block display: block

.md-d-flex display: flex

.md-d-grid display: grid

.md-d-none display: none

Large (992px+)

.lg-d-block display: block

.lg-d-flex display: flex

.lg-d-grid display: grid

.lg-d-none display: none

Extra Large (1200px+)

.xl-d-block display: block

.xl-d-flex display: flex

.xl-d-grid display: grid

.xl-d-none display: none

Flex Direction & Alignment Utilities

Control flex layout direction and item alignment.

Base Classes (All Resolutions)

.flex-dir-column flex-direction: column

.flex-dir-row flex-direction: row

.flex-dir-column-reverse flex-direction: column-reverse

.flex-dir-row-reverse flex-direction: row-reverse

.align-items-center align-items: center

.justify-content-center justify-content: center

Responsive Flex Classes

Available for all breakpoints: sm (576px+), md (768px+), lg (992px+), xl (1200px+)

.[breakpoint]-flex-dir-column flex-direction: column

.[breakpoint]-flex-dir-row flex-direction: row

.[breakpoint]-flex-dir-column-reverse flex-direction: column-reverse

.[breakpoint]-flex-dir-row-reverse flex-direction: row-reverse

.[breakpoint]-align-items-center align-items: center

.[breakpoint]-justify-content-center justify-content: center

Grid Utilities

Control grid layout with 1-12 column options.

Grid Template Columns (1-12)

Use .grid-template-columns-[1-12] for base and .[breakpoint]-grid-template-columns-[1-12] for responsive

1 Col

2 Col2 Col

3 Col3 Col3 Col

4 Col4 Col4 Col4 Col

Grid Column Span (1-12)

Use .grid-column-span-[1-12] for base and .[breakpoint]-grid-column-span-[1-12] for responsive

Spacing Utilities

Control margin and padding with responsive variants.

Margin Classes

Use .m-[0-5], .mt-[0-5], .mr-[0-5], .mb-[0-5], .ml-[0-5], .mx-[0-5], .my-[0-5], .m-auto

Available for all breakpoints: sm, md, lg, xl

.m-[0-5] margin: [0, 8px, 16px, 32px, 40px, 50px]

.mx-auto margin-left & margin-right: auto (horizontal center)

.my-auto margin-top & margin-bottom: auto (vertical center)

Padding Classes

Use .p-[0-5], .pt-[0-5], .pr-[0-5], .pb-[0-5], .pl-[0-5], .px-[0-5], .py-[0-5]

Available for all breakpoints: sm, md, lg, xl

.p-[0-5] padding: [0, 8px, 16px, 32px, 40px, 50px]

.px-[0-5] padding-left & padding-right

.py-[0-5] padding-top & padding-bottom

Usage Examples

Responsive Grid Layout

 <div class="d-grid grid-template-columns-1 sm-grid-template-columns-2 lg-grid-template-columns-4">

  <div>Item 1</div>

  <div>Item 2</div>

  <div>Item 3</div>

  <div>Item 4</div>

</div>

1 column on mobile, 2 on small, 4 on large screens

Responsive Flex Layout

 <div class="d-flex flex-dir-column lg-flex-dir-row align-items-center gap-3">

  <div>Item 1</div>

  <div>Item 2</div>

</div>

Stacked on mobile, side-by-side on large screens

Responsive Spacing

 <div class="m-2 lg-m-4 p-2 lg-p-3 mx-auto">

  Content with responsive margins and padding

</div> 

Smaller spacing on mobile, larger on desktop, horizontally centered