Skip to content

Conversation

@wesleyboar
Copy link
Member

@wesleyboar wesleyboar commented Jan 9, 2026

Overview

Add and use new mixin offset-content.

Inspired by object o-offset-content.

Related

Changes

  • adds new mixin offset-content
  • refactors o-offset-content to use offset-content mixin
  • adds img-class attribute to @figure partial
  • adds caption attribute to @figure partial
  • adds demo files for x-offset-content and o-offset-content

Testing

  1. View style guide: Tools > Offset Content
  2. View style guide: Objects > Offset Content
  3. Verify figures with caption attribute display custom caption text
  4. Verify figures with img-class attribute apply classes to <img> element
  5. Test responsive behavior: offset content floats on medium+ screens, offsets on wide screens
  6. Verify consecutive offset content elements don't stack incorrectly

UI

Component Mobile (375px) Tablet (768px) Desktop (992px) Wide (1440px)
o-offset-content o-offset-content-375px o-offset-content-768px o-offset-content-992px o-offset-content-1440px
x-offset-content x-offset-content-375px x-offset-content-768px x-offset-content-992px x-offset-content-1440px

@wesleyboar wesleyboar merged commit ce21e80 into main Jan 9, 2026
@wesleyboar wesleyboar deleted the feat/mixin-offset-content branch January 9, 2026 03:04
wesleyboar added a commit to TACC/Core-CMS that referenced this pull request Jan 9, 2026
## Overview

Offset news media —

* main image (atop content)
* secondary images, _et cetera_ (in content)

— via Core-Styles mixin `offset-content`.

## Related

- [RT
#37827](https://tickets.tacc.utexas.edu/Ticket/Display.html?id=37827)
- requires TACC/Core-Styles#577

## Changes

- **changed** raw style to mixin for content media offset
- **added** offset mixins that themselves use Core-Styles offset mixin
- **changed** raw style to mixin for main media offset

## Testing

0. Have:
    - news article with image
    - thumbnail option of full-width i.e. Width: 0
    - thumbnail option of set width i.e. Width: 300
2. Set main image to thumbnail option full-width.
    - On wide screen, image is as wide as content.
    - On narrow screen, image is as wide as content.
2. Set main image to thumbnail option set width.
    - On wide screen, image is offset to the right.
    - On narrow screen, image is floated to the right.

## UI

https://github.com/user-attachments/assets/e061e967-f6b1-4efa-b439-f2efcae49fde

https://github.com/user-attachments/assets/8f819ce9-2b7f-409b-8394-1f32d1f5835e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants