#4078: cover.scss

site/_sass/uikit/components/cover.scss

Path: site/_sass/uikit/components/cover.scss · Lines: 57 · Type: CORE component — functional CSS, NOT theme

Purpose: Makes embedded content (images, videos, iframes) cover their container in a centered position — the core building block for hero section backgrounds on every documentation page. Uses the classic absolute + translate(-50%,-50%) centering pattern.

Source: GitHub

57 lines · 16 code · 28 comments · 13 blank

Commit	Message
`ac75fabf3`	2021-08-10 Github pages migrated to Asciidoc

Core, not theme. This file contains actual CSS rules (not just hooks or variables). It defines the structural CSS for the Cover component. The theme counterpart in site/_sass/uikit/theme/ would add visual styling — but there IS no theme/cover.scss in the ProjectForge site. The cover uses UIkit defaults for its appearance.

The centering technique — a CSS classic

.uk-cover {
  max-width: none;                           // 1. Remove responsive width limit
  position: absolute;                        // 2. Take out of document flow
  left: 50%; top: 50%;                       // 3. Position top-left corner at center
  transform: translate(-50%, -50%);          // 4. Shift back by half width/height
}

.uk-cover-container {
  overflow: hidden;                          // Clip content that exceeds container
  position: relative;                        // Establish positioning context for .uk-cover
}

iframe.uk-cover { pointer-events: none; }    // Clicks pass through to parent

Line-by-line of the centering trick:

max-width: none: Removes any responsive width constraint. The cover element must be free to expand to cover the container, even if it exceeds the viewport width.
position: absolute: Takes the element out of normal document flow. This is required for left/top to work, and it needs the parent container to have position: relative (line 47).
left: 50%; top: 50%: Positions the element's TOP-LEFT corner at the container's center. At this point, the element is offset — its top-left is centered, not the element itself.
transform: translate(-50%, -50%): Shifts the element BACK by half its own width and height. The result: the element's CENTER is now at the container's center. This works because percentage values in translate() refer to the element's own dimensions, not the parent's.

This is arguably the most famous CSS centering pattern. Used on the ProjectForge site for hero background images — the documentation page headers with background photos.

How hero sections use this

On the ProjectForge site, documentation page heroes are rendered as:

<div class="uk-cover-container">
  <img src="search.png" data-uk-cover>    <!-- This becomes .uk-cover -->
  <div class="uk-position-relative">        <!-- Content sits on top -->
    <h1>Search</h1>
  </div>
</div>

UIkit's JavaScript adds the .uk-cover class and calculates dimensions dynamically. The CSS from this file provides the positioning. The overflow: hidden on the container ensures the cover image doesn't spill out if it's larger than the container.

Key takeaways

Core, not theme: This is pure layout CSS. No colors, no shadows — just positioning math.
iframe pointer-events hack (line 33): pointer-events: none on iframes prevents the iframe from capturing clicks. Essential for embedded YouTube/Vimeo videos used as backgrounds — users must be able to interact with content ON TOP of the video.
No theme counterpart: Unlike most UIkit components that have both core and theme files, Cover has no theme/cover.scss. All its visual styling comes from the content itself (the image) and the tile/section components that wrap it.
JavaScript dependency: The data-uk-cover attribute triggers UIkit's JS to measure the container and set appropriate dimensions. The CSS alone doesn't make it cover — it needs the JS for dynamic sizing.