--- url: https://bullframecss.marcopontili.com/api-reference.md --- # API Reference Generated from `src/css/`. Re-run `npm run docs:api-reference` after changing variables or classes. ## CSS Custom Properties ### Colors - Backgrounds, texts and borders | Variable | Default | Notes | | ----------------------- | ------------------ | ----- | | `--bf-white` | `rgb(255 255 255)` | | | `--bf-light` | `rgb(240 240 240)` | | | `--bf-gray-light-extra` | `rgb(233 233 233)` | | | `--bf-gray-light` | `rgb(204 204 204)` | | | `--bf-gray` | `rgb(153 153 153)` | | | `--bf-gray-dark` | `rgb(102 102 102)` | | | `--bf-gray-dark-extra` | `rgb(51 51 51)` | | | `--bf-dark` | `rgb(34 34 34)` | | | `--bf-dark-extra` | `rgb(17 17 17)` | | | `--bf-black` | `rgb(0 0 0)` | | ### Colors - Mark and ins | Variable | Default | Notes | | ------------------- | ------------------ | ----- | | `--bf-yellow-light` | `rgb(255 255 153)` | | | `--bf-yellow` | `rgb(255 255 0)` | | | `--bf-orange` | `rgb(255 165 0)` | | ### Colors - Anchors and accent | Variable | Default | Notes | | ----------------------- | ------------------ | ------------------------------------------------------------------ | | `--bf-blue` | `rgb( 0 86 179 )` | Darkened from rgb(0 123 255) for WCAG AA contrast (links on white) | | `--bf-blue-light` | `rgb(0 65 135)` | Darkened for hover states | | `--bf-blue-light-extra` | `rgb(190 216 254)` | | ### Colors - Invalid forms | Variable | Default | Notes | | ---------- | -------------- | ----- | | `--bf-red` | `rgb(255 0 0)` | | ### Colors - Dark mode adjustments | Variable | Default | Notes | | ------------------------- | ------------------------ | -------------------------------------------------- | | `--bf-dark-bg` | `rgb(28 28 28)` | dark-extra + 7.5% lightness for body background | | `--bf-dark-link` | `rgb(77 165 255)` | blue + 20% lightness for better visibility on dark | | `--bf-dark-link-hover` | `rgb(77 165 255)` | blue-light + 20% lightness | | `--bf-dark-border-focus` | `rgb(26 140 255)` | blue + 10% lightness for form focus borders | | `--bf-dark-shadow-focus` | `rgb(3 102 214 / 50%)` | blue shadow for focus states | | `--bf-dark-mark-bg` | `rgb(230 230 0)` | yellow - 10% lightness | | `--bf-dark-ins-bg` | `rgb(255 255 200)` | yellow-light + 45% lightness | | `--bf-dark-button-hover` | `rgb(184 184 184)` | gray-light -10% lightness | | `--bf-dark-button-shadow` | `rgb(255 255 255 / 45%)` | white shadow for button focus | | `--bf-dark-invalid` | `rgb(255 38 38)` | red adjusted for dark mode visibility | ### Spacing | Variable | Default | Notes | | -------------------------- | --------- | ----- | | `--bf-spacing-sm` | `0.25rem` | | | `--bf-spacing-md` | `0.5rem` | | | `--bf-spacing-lg` | `1rem` | | | `--bf-spacing-xl` | `2rem` | | | `--bf-spacing-xxl` | `3rem` | | | `--bf-spacing-grid-gutter` | `1.5rem` | | ### Typography | Variable | Default | Notes | | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- | | `--bf-font-sans-serif` | `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'` | | | `--bf-font-serif` | `Georgia, Times, 'Times New Roman', serif` | | | `--bf-font-monospace` | `SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` | | | `--bf-body-font-size-rem` | `1.6rem` | | | `--bf-body-line-height` | `1.5` | | ### Breakpoints | Variable | Default | Notes | | --------------------- | -------- | ----- | | `--bf-breakpoint-xs` | `0` | | | `--bf-breakpoint-sm` | `576px` | | | `--bf-breakpoint-md` | `768px` | | | `--bf-breakpoint-lg` | `992px` | | | `--bf-breakpoint-xl` | `1200px` | | | `--bf-breakpoint-xxl` | `1400px` | | ## Classes Grouped by source directory under `src/css/`. Click a directory to see the full rules on GitHub. ### [utilities](https://github.com/marcop135/bullframe.css/blob/main/src/css/utilities) `bf-align-center-flex` · `bf-align-center-unknown` · `bf-align-center-unknown--item` · `bf-antialiased` · `bf-btn` · `bf-btn--primary` · `bf-clearfix` · `bf-col-1` · `bf-col-10` · `bf-col-11` · `bf-col-12` · `bf-col-2` · `bf-col-3` · `bf-col-4` · `bf-col-5` · `bf-col-6` · `bf-col-7` · `bf-col-8` · `bf-col-9` · `bf-container` · `bf-container--break-lg` · `bf-container--break-md` · `bf-container--break-xs` · `bf-container--fluid` · `bf-cursive--handwritten` · `bf-disabled` · `bf-display-block` · `bf-display-block-center` · `bf-display-flex` · `bf-display-flex--justify-center` · `bf-display-flex--justify-end` · `bf-display-flex--justify-start` · `bf-display-flex--nowrap` · `bf-display-flex--wrap` · `bf-display-inline` · `bf-display-inline-block` · `bf-display-inline-flex` · `bf-embed-responsive` · `bf-embed-responsive--4-3` · `bf-embed-responsive--item` · `bf-filter-blur` · `bf-filter-dim-images` · `bf-filter-grayscale` · `bf-filter-invert` · `bf-filter-none` · `bf-float-left` · `bf-float-right` · `bf-focused` · `bf-font-monospace` · `bf-font-sans-serif` · `bf-font-serif` · `bf-h1` · `bf-h2` · `bf-h3` · `bf-h4` · `bf-h5` · `bf-h6` · `bf-hidden` · `bf-hide` · `bf-invalid` · `bf-invisible` · `bf-lead` · `bf-list-unstyled` · `bf-m-0` · `bf-m-1` · `bf-m-2` · `bf-m-3` · `bf-m-4` · `bf-m-b-0` · `bf-m-b-1` · `bf-m-b-2` · `bf-m-b-3` · `bf-m-b-4` · `bf-m-l-0` · `bf-m-r-0` · `bf-m-t-0` · `bf-m-t-1` · `bf-m-t-2` · `bf-m-t-3` · `bf-m-t-4` · `bf-monospace--code` · `bf-monospace--slab` · `bf-no-gutters` · `bf-no-select` · `bf-p-0` · `bf-p-1` · `bf-p-2` · `bf-p-3` · `bf-p-4` · `bf-p-b-0` · `bf-p-b-1` · `bf-p-b-2` · `bf-p-b-3` · `bf-p-b-4` · `bf-p-l-0` · `bf-p-r-0` · `bf-p-t-0` · `bf-p-t-1` · `bf-p-t-2` · `bf-p-t-3` · `bf-p-t-4` · `bf-position-fixed` · `bf-position-relative` · `bf-position-sticky` · `bf-reduced-motion` · `bf-responsive-typography` · `bf-row` · `bf-sans-serif--classical` · `bf-sans-serif--geometric` · `bf-sans-serif--humanist` · `bf-sans-serif--industrial` · `bf-sans-serif--neo-grotesque` · `bf-sans-serif--rounded` · `bf-sans-serif--system` · `bf-serif--antique` · `bf-serif--didone` · `bf-serif--oldstyle` · `bf-serif--slab` · `bf-serif--transitional` · `bf-sr-only` · `bf-subpixel-antialiased` · `bf-t-center` · `bf-t-italic` · `bf-t-left` · `bf-t-right` · `bf-t-shadow` · `bf-t-style-normal` · `bf-t-transform-none` · `bf-t-transform-uppercase` · `bf-t-truncate` · `bf-t-truncate--multiline-2` · `bf-t-truncate--multiline-3` · `bf-t-weight-300` · `bf-t-weight-400` · `bf-t-weight-500` · `bf-t-weight-600` · `bf-t-weight-700` · `bf-t-weight-800` · `bf-table` · `bf-table--zebra` · `bf-table-responsive` · `bf-table-responsive--zebra` · `bf-text-break` · `bf-text-hide` · `bf-visible` · `bf-width-100` · `bf-width-25` · `bf-width-33` · `bf-width-50` · `bf-width-75` · `bf-width-auto` · `bf-z-index-1` · `bf-z-index-10` · `bf-z-index-100` · `bf-z-index-2` · `bf-z-index-20` · `bf-z-index-200` · `bf-z-index-3` · `bf-z-index-30` · `bf-z-index-300` · `bf-z-index-4` · `bf-z-index-40` · `bf-z-index-5` · `bf-z-index-50` · `bf-z-index-6` · `bf-z-index-60` · `bf-z-index-7` · `bf-z-index-70` · `bf-z-index-8` · `bf-z-index-80` · `bf-z-index-9` · `bf-z-index-90` *** *172 classes, 44 CSS custom properties.*