Breakpoints

VelinStyle uses five responsive breakpoints built with min-width media queries. Every breakpoint is exposed as a CSS custom property so you can use them in your own stylesheets.

Available Breakpoints

Each breakpoint was chosen to comfortably hold containers that are multiples of 12. They serve as the foundation for responsive utilities, the grid system, and component sizing.

Breakpoint   Class infix   Min-width    CSS Variable
─────────────────────────────────────────────────────────
X-Small      (none)        0            —
Small        sm            576px        --velin-bp-sm
Medium       md            768px        --velin-bp-md
Large        lg            992px        --velin-bp-lg
Extra large  xl            1200px       --velin-bp-xl
2X-large     2xl           1400px       --velin-bp-2xl

CSS Variables

All breakpoint values are stored as CSS custom properties on :root. Reference them in your custom styles or in calc() expressions.

:root {
  --velin-bp-sm:  576px;
  --velin-bp-md:  768px;
  --velin-bp-lg:  992px;
  --velin-bp-xl:  1200px;
  --velin-bp-2xl: 1400px;
}

Min-width Media Queries

VelinStyle is mobile-first. Styles apply from the breakpoint and up. Use min-width queries to target each tier.

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

/* 2X-large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { ... }

Resize your browser to see breakpoint-based utilities in action. The current breakpoint is indicated by the highlighted row below.

XS — below 576px

SM — 576px – 767px

MD — 768px – 991px

LG — 992px – 1199px

XL — 1200px – 1399px

2XL — 1400px and up

Responsive Utilities

Every VelinStyle utility that supports responsive variants uses the breakpoint infixes. The pattern is .velin-{property}-{breakpoint}-{value}.

<!-- Hidden on mobile, visible from md up -->
<div class="velin-d-none velin-d-md-block">
  Visible on tablets and larger.
</div>

<!-- Stack on mobile, side-by-side from lg -->
<div class="velin-d-flex velin-flex-column velin-flex-lg-row velin-gap-3">
  <div>Column A</div>
  <div>Column B</div>
</div>

Visible on tablets and larger.

Column A

Column B

Max-width Queries

While VelinStyle is mobile-first, you can use max-width queries in your custom CSS when you need to cap styles below a specific breakpoint. Subtract 0.02px to avoid overlap with the min-width range.

/* Targets xs only (below sm) */
@media (max-width: 575.98px) { ... }

/* Targets sm and below */
@media (max-width: 767.98px) { ... }

/* Targets md and below */
@media (max-width: 991.98px) { ... }

/* Targets lg and below */
@media (max-width: 1199.98px) { ... }

/* Targets xl and below */
@media (max-width: 1399.98px) { ... }