display.css

harun.bspt2014@gmail.com

I’ll build this as a strong utility-only display.css file for RX Theme: display modes, responsive variants, visibility helpers, print helpers, accessibility helpers, and WordPress-friendly classes.

Dear friend, create this file:

assets/static/static-css/utilities/display.css

Then paste this full advanced utility code:

/*!
 * RX Theme - Display Utilities
 * File: assets/static/static-css/utilities/display.css
 * Purpose: Display, visibility, responsive display, accessibility, print, and WordPress utility helpers.
 */

/* ==========================================================================
   1. Display Tokens
   ========================================================================== */

:root {
  --rx-display-breakpoint-xs: 360px;
  --rx-display-breakpoint-sm: 576px;
  --rx-display-breakpoint-md: 768px;
  --rx-display-breakpoint-lg: 992px;
  --rx-display-breakpoint-xl: 1200px;
  --rx-display-breakpoint-xxl: 1400px;

  --rx-z-hidden: -1;
  --rx-opacity-hidden: 0;
  --rx-opacity-visible: 1;
}

/* ==========================================================================
   2. Basic Display Utilities
   ========================================================================== */

.rx-d-none {
  display: none !important;
}

.rx-d-block {
  display: block !important;
}

.rx-d-inline {
  display: inline !important;
}

.rx-d-inline-block {
  display: inline-block !important;
}

.rx-d-flex {
  display: flex !important;
}

.rx-d-inline-flex {
  display: inline-flex !important;
}

.rx-d-grid {
  display: grid !important;
}

.rx-d-inline-grid {
  display: inline-grid !important;
}

.rx-d-table {
  display: table !important;
}

.rx-d-inline-table {
  display: inline-table !important;
}

.rx-d-table-row {
  display: table-row !important;
}

.rx-d-table-cell {
  display: table-cell !important;
}

.rx-d-list-item {
  display: list-item !important;
}

.rx-d-contents {
  display: contents !important;
}

.rx-d-flow-root {
  display: flow-root !important;
}

.rx-d-ruby {
  display: ruby !important;
}

.rx-d-inherit {
  display: inherit !important;
}

.rx-d-initial {
  display: initial !important;
}

.rx-d-unset {
  display: unset !important;
}

/* ==========================================================================
   3. Modern Display Utilities
   ========================================================================== */

.rx-d-subgrid {
  display: grid !important;
}

.rx-d-webkit-box {
  display: -webkit-box !important;
}

.rx-d-box {
  display: box !important;
}

.rx-d-run-in {
  display: run-in !important;
}

.rx-d-marker {
  display: marker !important;
}

/* ==========================================================================
   4. Visibility Utilities
   ========================================================================== */

.rx-visible {
  visibility: visible !important;
}

.rx-invisible {
  visibility: hidden !important;
}

.rx-collapse {
  visibility: collapse !important;
}

.rx-opacity-0 {
  opacity: 0 !important;
}

.rx-opacity-25 {
  opacity: 0.25 !important;
}

.rx-opacity-50 {
  opacity: 0.5 !important;
}

.rx-opacity-75 {
  opacity: 0.75 !important;
}

.rx-opacity-100 {
  opacity: 1 !important;
}

.rx-hidden {
  display: none !important;
  visibility: hidden !important;
}

.rx-shown {
  display: block !important;
  visibility: visible !important;
}

/* ==========================================================================
   5. Screen Reader / Accessibility Visibility
   ========================================================================== */

.rx-sr-only,
.rx-screen-reader-text,
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.rx-sr-only-focusable:active,
.rx-sr-only-focusable:focus,
.rx-screen-reader-text-focusable:active,
.rx-screen-reader-text-focusable:focus,
.screen-reader-text:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0.75rem 1rem !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  z-index: 100000 !important;
}

.rx-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.rx-visually-visible {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip-path: none !important;
  white-space: normal !important;
}

/* ==========================================================================
   6. Content Visibility Performance Utilities
   ========================================================================== */

.rx-content-visible {
  content-visibility: visible !important;
}

.rx-content-hidden {
  content-visibility: hidden !important;
}

.rx-content-auto {
  content-visibility: auto !important;
}

.rx-contain-none {
  contain: none !important;
}

.rx-contain-strict {
  contain: strict !important;
}

.rx-contain-content {
  contain: content !important;
}

.rx-contain-size {
  contain: size !important;
}

.rx-contain-layout {
  contain: layout !important;
}

.rx-contain-style {
  contain: style !important;
}

.rx-contain-paint {
  contain: paint !important;
}

.rx-contain-layout-paint {
  contain: layout paint !important;
}

.rx-contain-size-layout-paint {
  contain: size layout paint !important;
}

/* ==========================================================================
   7. Intrinsic Size Helpers for Lazy Sections
   ========================================================================== */

.rx-intrinsic-sm {
  contain-intrinsic-size: 320px !important;
}

.rx-intrinsic-md {
  contain-intrinsic-size: 640px !important;
}

.rx-intrinsic-lg {
  contain-intrinsic-size: 960px !important;
}

.rx-intrinsic-xl {
  contain-intrinsic-size: 1200px !important;
}

.rx-intrinsic-screen {
  contain-intrinsic-size: 100vh !important;
}

/* ==========================================================================
   8. Flex Display Helpers
   ========================================================================== */

.rx-flex-row {
  flex-direction: row !important;
}

.rx-flex-row-reverse {
  flex-direction: row-reverse !important;
}

.rx-flex-column {
  flex-direction: column !important;
}

.rx-flex-column-reverse {
  flex-direction: column-reverse !important;
}

.rx-flex-wrap {
  flex-wrap: wrap !important;
}

.rx-flex-nowrap {
  flex-wrap: nowrap !important;
}

.rx-flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.rx-flex-fill {
  flex: 1 1 auto !important;
}

.rx-flex-grow-0 {
  flex-grow: 0 !important;
}

.rx-flex-grow-1 {
  flex-grow: 1 !important;
}

.rx-flex-shrink-0 {
  flex-shrink: 0 !important;
}

.rx-flex-shrink-1 {
  flex-shrink: 1 !important;
}

.rx-flex-auto {
  flex: 1 1 auto !important;
}

.rx-flex-initial {
  flex: 0 1 auto !important;
}

.rx-flex-none {
  flex: none !important;
}

.rx-flex-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rx-flex-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.rx-flex-around {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
}

.rx-flex-evenly {
  display: flex !important;
  align-items: center !important;
  justify-content: space-evenly !important;
}

/* ==========================================================================
   9. Grid Display Helpers
   ========================================================================== */

.rx-grid-center {
  display: grid !important;
  place-items: center !important;
}

.rx-grid-start {
  display: grid !important;
  place-items: start !important;
}

.rx-grid-end {
  display: grid !important;
  place-items: end !important;
}

.rx-grid-stretch {
  display: grid !important;
  place-items: stretch !important;
}

.rx-grid-auto-fit {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)) !important;
}

.rx-grid-auto-fill {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)) !important;
}

.rx-grid-1 {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.rx-grid-2 {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.rx-grid-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.rx-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.rx-grid-5 {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

.rx-grid-6 {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
}

.rx-grid-12 {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
}

/* ==========================================================================
   10. Hide / Show by Interaction State
   ========================================================================== */

.rx-hover-show {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.rx-hover-parent:hover .rx-hover-show,
.rx-hover-parent:focus-within .rx-hover-show {
  opacity: 1 !important;
  visibility: visible !important;
}

.rx-hover-hide {
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

.rx-hover-parent:hover .rx-hover-hide,
.rx-hover-parent:focus-within .rx-hover-hide {
  opacity: 0 !important;
  visibility: hidden !important;
}

.rx-focus-show {
  opacity: 0 !important;
  visibility: hidden !important;
}

.rx-focus-parent:focus-within .rx-focus-show {
  opacity: 1 !important;
  visibility: visible !important;
}

.rx-focus-hide {
  opacity: 1 !important;
  visibility: visible !important;
}

.rx-focus-parent:focus-within .rx-focus-hide {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ==========================================================================
   11. Pointer / Interaction Visibility Helpers
   ========================================================================== */

.rx-pointer-none {
  pointer-events: none !important;
}

.rx-pointer-auto {
  pointer-events: auto !important;
}

.rx-select-none {
  user-select: none !important;
}

.rx-select-text {
  user-select: text !important;
}

.rx-select-all {
  user-select: all !important;
}

.rx-select-auto {
  user-select: auto !important;
}

/* ==========================================================================
   12. Overflow Display Helpers
   ========================================================================== */

.rx-overflow-visible {
  overflow: visible !important;
}

.rx-overflow-hidden {
  overflow: hidden !important;
}

.rx-overflow-clip {
  overflow: clip !important;
}

.rx-overflow-scroll {
  overflow: scroll !important;
}

.rx-overflow-auto {
  overflow: auto !important;
}

.rx-overflow-x-visible {
  overflow-x: visible !important;
}

.rx-overflow-x-hidden {
  overflow-x: hidden !important;
}

.rx-overflow-x-clip {
  overflow-x: clip !important;
}

.rx-overflow-x-scroll {
  overflow-x: scroll !important;
}

.rx-overflow-x-auto {
  overflow-x: auto !important;
}

.rx-overflow-y-visible {
  overflow-y: visible !important;
}

.rx-overflow-y-hidden {
  overflow-y: hidden !important;
}

.rx-overflow-y-clip {
  overflow-y: clip !important;
}

.rx-overflow-y-scroll {
  overflow-y: scroll !important;
}

.rx-overflow-y-auto {
  overflow-y: auto !important;
}

/* ==========================================================================
   13. Object Display Helpers
   ========================================================================== */

.rx-object-contain {
  object-fit: contain !important;
}

.rx-object-cover {
  object-fit: cover !important;
}

.rx-object-fill {
  object-fit: fill !important;
}

.rx-object-none {
  object-fit: none !important;
}

.rx-object-scale-down {
  object-fit: scale-down !important;
}

.rx-object-center {
  object-position: center !important;
}

.rx-object-top {
  object-position: top !important;
}

.rx-object-right {
  object-position: right !important;
}

.rx-object-bottom {
  object-position: bottom !important;
}

.rx-object-left {
  object-position: left !important;
}

/* ==========================================================================
   14. Aspect Display Helpers
   ========================================================================== */

.rx-aspect-auto {
  aspect-ratio: auto !important;
}

.rx-aspect-square {
  aspect-ratio: 1 / 1 !important;
}

.rx-aspect-video {
  aspect-ratio: 16 / 9 !important;
}

.rx-aspect-classic {
  aspect-ratio: 4 / 3 !important;
}

.rx-aspect-photo {
  aspect-ratio: 3 / 2 !important;
}

.rx-aspect-portrait {
  aspect-ratio: 3 / 4 !important;
}

.rx-aspect-golden {
  aspect-ratio: 1.618 / 1 !important;
}

/* ==========================================================================
   15. WordPress Friendly Display Helpers
   ========================================================================== */

.rx-wp-block {
  display: block !important;
}

.rx-wp-inline {
  display: inline !important;
}

.rx-wp-inline-block {
  display: inline-block !important;
}

.rx-wp-flex {
  display: flex !important;
}

.rx-wp-grid {
  display: grid !important;
}

.rx-alignwide {
  width: min(100%, var(--rx-alignwide-width, 1200px)) !important;
  margin-inline: auto !important;
}

.rx-alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-inline: calc(50% - 50vw) !important;
}

.rx-hide-empty:empty {
  display: none !important;
}

.rx-hide-if-no-js {
  display: none !important;
}

.js .rx-hide-if-js {
  display: none !important;
}

.js .rx-show-if-js {
  display: block !important;
}

.no-js .rx-hide-if-no-js {
  display: none !important;
}

.no-js .rx-show-if-no-js {
  display: block !important;
}

/* WordPress common block support */
.wp-block-image.rx-d-flex,
.wp-block-gallery.rx-d-flex,
.wp-block-columns.rx-d-flex,
.wp-block-group.rx-d-flex {
  display: flex !important;
}

.wp-block-image.rx-d-grid,
.wp-block-gallery.rx-d-grid,
.wp-block-columns.rx-d-grid,
.wp-block-group.rx-d-grid {
  display: grid !important;
}

/* ==========================================================================
   16. Medical Website Specific Display Helpers
   ========================================================================== */

.rx-medical-card-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)) !important;
}

.rx-medical-list-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)) !important;
}

.rx-medical-two-column {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem) !important;
}

.rx-medical-main-sidebar {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem) !important;
}

.rx-medical-sidebar-main {
  display: grid !important;
  grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr) !important;
}

.rx-medical-center-box {
  display: grid !important;
  place-items: center !important;
}

.rx-medical-inline-meta {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.rx-medical-author-box {
  display: flex !important;
  align-items: center !important;
}

.rx-medical-review-box {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
}

/* ==========================================================================
   17. SEO / Schema Block Display Helpers
   ========================================================================== */

.rx-schema-hidden {
  display: none !important;
}

.rx-faq-list {
  display: grid !important;
}

.rx-faq-item {
  display: block !important;
}

.rx-howto-steps {
  display: grid !important;
}

.rx-howto-step {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
}

.rx-breadcrumb-list {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.rx-breadcrumb-item {
  display: inline-flex !important;
  align-items: center !important;
}

.rx-toc-list {
  display: grid !important;
}

.rx-toc-inline {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

/* ==========================================================================
   18. Responsive Display: XS - 360px and up
   ========================================================================== */

@media (min-width: 360px) {
  .rx-d-xs-none {
    display: none !important;
  }

  .rx-d-xs-block {
    display: block !important;
  }

  .rx-d-xs-inline {
    display: inline !important;
  }

  .rx-d-xs-inline-block {
    display: inline-block !important;
  }

  .rx-d-xs-flex {
    display: flex !important;
  }

  .rx-d-xs-inline-flex {
    display: inline-flex !important;
  }

  .rx-d-xs-grid {
    display: grid !important;
  }

  .rx-d-xs-inline-grid {
    display: inline-grid !important;
  }

  .rx-d-xs-table {
    display: table !important;
  }

  .rx-d-xs-table-row {
    display: table-row !important;
  }

  .rx-d-xs-table-cell {
    display: table-cell !important;
  }

  .rx-d-xs-contents {
    display: contents !important;
  }

  .rx-d-xs-flow-root {
    display: flow-root !important;
  }
}

/* ==========================================================================
   19. Responsive Display: SM - 576px and up
   ========================================================================== */

@media (min-width: 576px) {
  .rx-d-sm-none {
    display: none !important;
  }

  .rx-d-sm-block {
    display: block !important;
  }

  .rx-d-sm-inline {
    display: inline !important;
  }

  .rx-d-sm-inline-block {
    display: inline-block !important;
  }

  .rx-d-sm-flex {
    display: flex !important;
  }

  .rx-d-sm-inline-flex {
    display: inline-flex !important;
  }

  .rx-d-sm-grid {
    display: grid !important;
  }

  .rx-d-sm-inline-grid {
    display: inline-grid !important;
  }

  .rx-d-sm-table {
    display: table !important;
  }

  .rx-d-sm-table-row {
    display: table-row !important;
  }

  .rx-d-sm-table-cell {
    display: table-cell !important;
  }

  .rx-d-sm-contents {
    display: contents !important;
  }

  .rx-d-sm-flow-root {
    display: flow-root !important;
  }
}

/* ==========================================================================
   20. Responsive Display: MD - 768px and up
   ========================================================================== */

@media (min-width: 768px) {
  .rx-d-md-none {
    display: none !important;
  }

  .rx-d-md-block {
    display: block !important;
  }

  .rx-d-md-inline {
    display: inline !important;
  }

  .rx-d-md-inline-block {
    display: inline-block !important;
  }

  .rx-d-md-flex {
    display: flex !important;
  }

  .rx-d-md-inline-flex {
    display: inline-flex !important;
  }

  .rx-d-md-grid {
    display: grid !important;
  }

  .rx-d-md-inline-grid {
    display: inline-grid !important;
  }

  .rx-d-md-table {
    display: table !important;
  }

  .rx-d-md-table-row {
    display: table-row !important;
  }

  .rx-d-md-table-cell {
    display: table-cell !important;
  }

  .rx-d-md-contents {
    display: contents !important;
  }

  .rx-d-md-flow-root {
    display: flow-root !important;
  }

  .rx-medical-two-column-md {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem) !important;
  }
}

/* ==========================================================================
   21. Responsive Display: LG - 992px and up
   ========================================================================== */

@media (min-width: 992px) {
  .rx-d-lg-none {
    display: none !important;
  }

  .rx-d-lg-block {
    display: block !important;
  }

  .rx-d-lg-inline {
    display: inline !important;
  }

  .rx-d-lg-inline-block {
    display: inline-block !important;
  }

  .rx-d-lg-flex {
    display: flex !important;
  }

  .rx-d-lg-inline-flex {
    display: inline-flex !important;
  }

  .rx-d-lg-grid {
    display: grid !important;
  }

  .rx-d-lg-inline-grid {
    display: inline-grid !important;
  }

  .rx-d-lg-table {
    display: table !important;
  }

  .rx-d-lg-table-row {
    display: table-row !important;
  }

  .rx-d-lg-table-cell {
    display: table-cell !important;
  }

  .rx-d-lg-contents {
    display: contents !important;
  }

  .rx-d-lg-flow-root {
    display: flow-root !important;
  }

  .rx-medical-main-sidebar-lg {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem) !important;
  }

  .rx-medical-sidebar-main-lg {
    display: grid !important;
    grid-template-columns: minmax(18rem, 24rem) minmax(0, 1fr) !important;
  }
}

/* ==========================================================================
   22. Responsive Display: XL - 1200px and up
   ========================================================================== */

@media (min-width: 1200px) {
  .rx-d-xl-none {
    display: none !important;
  }

  .rx-d-xl-block {
    display: block !important;
  }

  .rx-d-xl-inline {
    display: inline !important;
  }

  .rx-d-xl-inline-block {
    display: inline-block !important;
  }

  .rx-d-xl-flex {
    display: flex !important;
  }

  .rx-d-xl-inline-flex {
    display: inline-flex !important;
  }

  .rx-d-xl-grid {
    display: grid !important;
  }

  .rx-d-xl-inline-grid {
    display: inline-grid !important;
  }

  .rx-d-xl-table {
    display: table !important;
  }

  .rx-d-xl-table-row {
    display: table-row !important;
  }

  .rx-d-xl-table-cell {
    display: table-cell !important;
  }

  .rx-d-xl-contents {
    display: contents !important;
  }

  .rx-d-xl-flow-root {
    display: flow-root !important;
  }
}

/* ==========================================================================
   23. Responsive Display: XXL - 1400px and up
   ========================================================================== */

@media (min-width: 1400px) {
  .rx-d-xxl-none {
    display: none !important;
  }

  .rx-d-xxl-block {
    display: block !important;
  }

  .rx-d-xxl-inline {
    display: inline !important;
  }

  .rx-d-xxl-inline-block {
    display: inline-block !important;
  }

  .rx-d-xxl-flex {
    display: flex !important;
  }

  .rx-d-xxl-inline-flex {
    display: inline-flex !important;
  }

  .rx-d-xxl-grid {
    display: grid !important;
  }

  .rx-d-xxl-inline-grid {
    display: inline-grid !important;
  }

  .rx-d-xxl-table {
    display: table !important;
  }

  .rx-d-xxl-table-row {
    display: table-row !important;
  }

  .rx-d-xxl-table-cell {
    display: table-cell !important;
  }

  .rx-d-xxl-contents {
    display: contents !important;
  }

  .rx-d-xxl-flow-root {
    display: flow-root !important;
  }
}

/* ==========================================================================
   24. Max-Width Hide / Show Helpers
   ========================================================================== */

@media (max-width: 575.98px) {
  .rx-hide-below-sm,
  .rx-show-sm-up {
    display: none !important;
  }

  .rx-show-xs-only {
    display: block !important;
  }
}

@media (max-width: 767.98px) {
  .rx-hide-below-md,
  .rx-show-md-up {
    display: none !important;
  }

  .rx-mobile-hidden {
    display: none !important;
  }

  .rx-mobile-block {
    display: block !important;
  }

  .rx-mobile-flex {
    display: flex !important;
  }

  .rx-mobile-grid {
    display: grid !important;
  }
}

@media (max-width: 991.98px) {
  .rx-hide-below-lg,
  .rx-show-lg-up {
    display: none !important;
  }

  .rx-tablet-hidden {
    display: none !important;
  }

  .rx-tablet-block {
    display: block !important;
  }

  .rx-tablet-flex {
    display: flex !important;
  }

  .rx-tablet-grid {
    display: grid !important;
  }

  .rx-medical-two-column,
  .rx-medical-main-sidebar,
  .rx-medical-sidebar-main {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1199.98px) {
  .rx-hide-below-xl,
  .rx-show-xl-up {
    display: none !important;
  }
}

@media (max-width: 1399.98px) {
  .rx-hide-below-xxl,
  .rx-show-xxl-up {
    display: none !important;
  }
}

/* ==========================================================================
   25. Min-Width Hide / Show Helpers
   ========================================================================== */

@media (min-width: 576px) {
  .rx-hide-sm-up {
    display: none !important;
  }

  .rx-show-sm-up {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .rx-hide-md-up {
    display: none !important;
  }

  .rx-show-md-up {
    display: block !important;
  }

  .rx-desktop-hidden {
    display: none !important;
  }

  .rx-desktop-block {
    display: block !important;
  }

  .rx-desktop-flex {
    display: flex !important;
  }

  .rx-desktop-grid {
    display: grid !important;
  }
}

@media (min-width: 992px) {
  .rx-hide-lg-up {
    display: none !important;
  }

  .rx-show-lg-up {
    display: block !important;
  }
}

@media (min-width: 1200px) {
  .rx-hide-xl-up {
    display: none !important;
  }

  .rx-show-xl-up {
    display: block !important;
  }
}

@media (min-width: 1400px) {
  .rx-hide-xxl-up {
    display: none !important;
  }

  .rx-show-xxl-up {
    display: block !important;
  }
}

/* ==========================================================================
   26. Range Visibility Helpers
   ========================================================================== */

@media (min-width: 576px) and (max-width: 767.98px) {
  .rx-show-sm-only {
    display: block !important;
  }

  .rx-hide-sm-only {
    display: none !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .rx-show-md-only {
    display: block !important;
  }

  .rx-hide-md-only {
    display: none !important;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .rx-show-lg-only {
    display: block !important;
  }

  .rx-hide-lg-only {
    display: none !important;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .rx-show-xl-only {
    display: block !important;
  }

  .rx-hide-xl-only {
    display: none !important;
  }
}

@media (min-width: 1400px) {
  .rx-show-xxl-only {
    display: block !important;
  }

  .rx-hide-xxl-only {
    display: none !important;
  }
}

/* ==========================================================================
   27. Print Display Utilities
   ========================================================================== */

@media print {
  .rx-d-print-none {
    display: none !important;
  }

  .rx-d-print-block {
    display: block !important;
  }

  .rx-d-print-inline {
    display: inline !important;
  }

  .rx-d-print-inline-block {
    display: inline-block !important;
  }

  .rx-d-print-flex {
    display: flex !important;
  }

  .rx-d-print-inline-flex {
    display: inline-flex !important;
  }

  .rx-d-print-grid {
    display: grid !important;
  }

  .rx-d-print-table {
    display: table !important;
  }

  .rx-d-print-table-row {
    display: table-row !important;
  }

  .rx-d-print-table-cell {
    display: table-cell !important;
  }

  .rx-print-hidden,
  .rx-no-print,
  .rx-site-header,
  .rx-site-footer,
  .rx-main-navigation,
  .rx-sidebar,
  .rx-ad,
  .rx-ads,
  .rx-share,
  .rx-related-posts,
  .rx-comments-area {
    display: none !important;
  }

  .rx-print-visible,
  .rx-only-print {
    display: block !important;
  }

  .rx-print-inline {
    display: inline !important;
  }

  .rx-print-inline-block {
    display: inline-block !important;
  }

  .rx-print-flex {
    display: flex !important;
  }

  .rx-print-grid {
    display: grid !important;
  }

  .rx-print-break-before {
    break-before: page !important;
    page-break-before: always !important;
  }

  .rx-print-break-after {
    break-after: page !important;
    page-break-after: always !important;
  }

  .rx-print-break-avoid {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
}

@media screen {
  .rx-only-print {
    display: none !important;
  }
}

/* ==========================================================================
   28. Reduced Motion Safe Visibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .rx-hover-show,
  .rx-hover-hide,
  .rx-focus-show,
  .rx-focus-hide {
    transition: none !important;
  }
}

/* ==========================================================================
   29. Dark Mode Visibility Helpers
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .rx-hide-dark {
    display: none !important;
  }

  .rx-show-dark {
    display: block !important;
  }

  .rx-show-dark-flex {
    display: flex !important;
  }

  .rx-show-dark-grid {
    display: grid !important;
  }
}

@media (prefers-color-scheme: light) {
  .rx-hide-light {
    display: none !important;
  }

  .rx-show-light {
    display: block !important;
  }

  .rx-show-light-flex {
    display: flex !important;
  }

  .rx-show-light-grid {
    display: grid !important;
  }
}

/* ==========================================================================
   30. Orientation Visibility Helpers
   ========================================================================== */

@media (orientation: portrait) {
  .rx-hide-portrait {
    display: none !important;
  }

  .rx-show-portrait {
    display: block !important;
  }

  .rx-show-portrait-flex {
    display: flex !important;
  }

  .rx-show-portrait-grid {
    display: grid !important;
  }
}

@media (orientation: landscape) {
  .rx-hide-landscape {
    display: none !important;
  }

  .rx-show-landscape {
    display: block !important;
  }

  .rx-show-landscape-flex {
    display: flex !important;
  }

  .rx-show-landscape-grid {
    display: grid !important;
  }
}

/* ==========================================================================
   31. Device Capability Visibility Helpers
   ========================================================================== */

@media (hover: hover) {
  .rx-hide-hover-device {
    display: none !important;
  }

  .rx-show-hover-device {
    display: block !important;
  }
}

@media (hover: none) {
  .rx-hide-touch-device {
    display: none !important;
  }

  .rx-show-touch-device {
    display: block !important;
  }
}

@media (pointer: coarse) {
  .rx-hide-coarse-pointer {
    display: none !important;
  }

  .rx-show-coarse-pointer {
    display: block !important;
  }
}

@media (pointer: fine) {
  .rx-hide-fine-pointer {
    display: none !important;
  }

  .rx-show-fine-pointer {
    display: block !important;
  }
}

/* ==========================================================================
   32. Admin Bar / Logged In Friendly Helpers
   ========================================================================== */

.admin-bar .rx-hide-admin-bar {
  display: none !important;
}

.admin-bar .rx-show-admin-bar {
  display: block !important;
}

.logged-in .rx-hide-logged-in {
  display: none !important;
}

.logged-in .rx-show-logged-in {
  display: block !important;
}

body:not(.logged-in) .rx-hide-logged-out {
  display: none !important;
}

body:not(.logged-in) .rx-show-logged-out {
  display: block !important;
}

/* ==========================================================================
   33. WordPress Body Class Conditional Display
   ========================================================================== */

.home .rx-hide-home,
.front-page .rx-hide-front-page,
.single .rx-hide-single,
.page .rx-hide-page,
.archive .rx-hide-archive,
.search .rx-hide-search,
.error404 .rx-hide-404,
.category .rx-hide-category,
.tag .rx-hide-tag,
.author .rx-hide-author {
  display: none !important;
}

.home .rx-show-home,
.front-page .rx-show-front-page,
.single .rx-show-single,
.page .rx-show-page,
.archive .rx-show-archive,
.search .rx-show-search,
.error404 .rx-show-404,
.category .rx-show-category,
.tag .rx-show-tag,
.author .rx-show-author {
  display: block !important;
}

/* ==========================================================================
   34. State-Based Display Helpers
   ========================================================================== */

.is-hidden,
[hidden],
template {
  display: none !important;
}

.is-visible {
  display: block !important;
}

.is-flex {
  display: flex !important;
}

.is-grid {
  display: grid !important;
}

.is-open .rx-show-when-open,
.is-active .rx-show-when-active,
.is-current .rx-show-when-current,
.is-expanded .rx-show-when-expanded,
[aria-expanded="true"] .rx-show-when-expanded {
  display: block !important;
}

.is-open .rx-hide-when-open,
.is-active .rx-hide-when-active,
.is-current .rx-hide-when-current,
.is-expanded .rx-hide-when-expanded,
[aria-expanded="true"] .rx-hide-when-expanded {
  display: none !important;
}

.rx-show-when-open,
.rx-show-when-active,
.rx-show-when-current,
.rx-show-when-expanded {
  display: none !important;
}

/* ==========================================================================
   35. Details / Summary Display Helpers
   ========================================================================== */

details .rx-show-when-details-open {
  display: none !important;
}

details[open] .rx-show-when-details-open {
  display: block !important;
}

details[open] .rx-hide-when-details-open {
  display: none !important;
}

/* ==========================================================================
   36. Dialog / Modal Display Helpers
   ========================================================================== */

dialog.rx-dialog-block[open] {
  display: block !important;
}

dialog.rx-dialog-flex[open] {
  display: flex !important;
}

dialog.rx-dialog-grid[open] {
  display: grid !important;
}

.rx-modal-hidden {
  display: none !important;
}

.rx-modal-visible {
  display: grid !important;
  place-items: center !important;
}

/* ==========================================================================
   37. Table Responsive Display Helpers
   ========================================================================== */

.rx-table-responsive {
  display: block !important;
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.rx-table-stack {
  display: table !important;
  width: 100% !important;
}

@media (max-width: 767.98px) {
  .rx-table-stack,
  .rx-table-stack thead,
  .rx-table-stack tbody,
  .rx-table-stack tfoot,
  .rx-table-stack tr,
  .rx-table-stack th,
  .rx-table-stack td {
    display: block !important;
  }

  .rx-table-stack thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   38. Media Display Helpers
   ========================================================================== */

.rx-media-block,
.rx-media-block img,
.rx-media-block video,
.rx-media-block iframe,
.rx-media-block canvas,
.rx-media-block svg {
  display: block !important;
}

.rx-media-responsive {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

.rx-iframe-responsive {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  border: 0 !important;
}

.rx-video-responsive {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   39. Navigation Display Helpers
   ========================================================================== */

.rx-nav-horizontal {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.rx-nav-vertical {
  display: flex !important;
  flex-direction: column !important;
}

.rx-nav-scroll {
  display: flex !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
}

.rx-nav-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.rx-nav-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* ==========================================================================
   40. Layout Display Compositions
   ========================================================================== */

.rx-stack {
  display: flex !important;
  flex-direction: column !important;
}

.rx-cluster {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.rx-sidebar-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem) !important;
}

.rx-reverse-sidebar-layout {
  display: grid !important;
  grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr) !important;
}

.rx-switcher {
  display: flex !important;
  flex-wrap: wrap !important;
}

.rx-switcher > * {
  flex-grow: 1 !important;
  flex-basis: calc((40rem - 100%) * 999) !important;
}

.rx-cover {
  display: flex !important;
  flex-direction: column !important;
  min-block-size: 100vh !important;
}

.rx-cover-center {
  margin-block: auto !important;
}

.rx-reel {
  display: flex !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

.rx-frame {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.rx-center {
  display: grid !important;
  place-items: center !important;
}

/* ==========================================================================
   41. Emergency / Debug Display Helpers
   ========================================================================== */

.rx-debug-block {
  display: block !important;
  outline: 2px dashed currentColor !important;
}

.rx-debug-flex {
  display: flex !important;
  outline: 2px dashed currentColor !important;
}

.rx-debug-grid {
  display: grid !important;
  outline: 2px dashed currentColor !important;
}

.rx-debug-hidden {
  display: none !important;
}

/* ==========================================================================
   42. Browser Support Safety
   ========================================================================== */

@supports not (display: grid) {
  .rx-d-grid,
  .rx-d-inline-grid,
  .rx-grid-center,
  .rx-grid-auto-fit,
  .rx-grid-auto-fill,
  .rx-medical-card-grid,
  .rx-medical-list-grid,
  .rx-medical-two-column,
  .rx-medical-main-sidebar,
  .rx-medical-sidebar-main {
    display: block !important;
  }
}

@supports not (content-visibility: auto) {
  .rx-content-auto,
  .rx-content-visible,
  .rx-content-hidden {
    content-visibility: visible !important;
  }
}

@supports not (overflow: clip) {
  .rx-overflow-clip,
  .rx-overflow-x-clip,
  .rx-overflow-y-clip {
    overflow: hidden !important;
  }
}

/* ==========================================================================
   43. Logical Display Helpers
   ========================================================================== */

.rx-hidden-important {
  display: none !important;
}

.rx-visible-important {
  display: block !important;
}

.rx-display-reset {
  display: revert !important;
}

.rx-display-revert-layer {
  display: revert-layer !important;
}

/* ==========================================================================
   44. Safe Defaults for Embedded Hidden Elements
   ========================================================================== */

script,
style,
meta,
link,
title,
base,
noscript {
  display: none !important;
}

/* ==========================================================================
   45. End of RX Theme Display Utilities
   ========================================================================== */

For best performance, load this file after your base/reset CSS but before component CSS:

wp_enqueue_style(
    'rx-display-utilities',
    get_theme_file_uri('/assets/static/static-css/utilities/display.css'),
    array(),
    wp_get_theme()->get('Version')
);

Use examples:

<div class="rx-d-none rx-d-md-block">
  Show only from tablet/desktop.
</div>

<div class="rx-d-grid rx-grid-auto-fit">
  Auto responsive medical cards.
</div>

<span class="rx-sr-only">
  Hidden text for screen readers.
</span>

<div class="rx-content-auto rx-intrinsic-lg">
  Performance optimized lazy content section.
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *