Cover

A block as tall as the screen with one thing in its middle, and something at its top and bottom if given.

#layout #page #marketing #no-js

Preview

Acme

Ship on Friday.

Everything a small team needs to get a release out, in one place.

Scroll for more ↓

The middle has as much room above it as below, whatever the top and bottom hold. Without them, it is simply centred.

Just the middle, in a 200px-tall block.

Download cover.qwe theme.qwe On GitHub

Get it

It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.

$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/cover.qwe

main.qwe

import ui/theme.qwe use theme_cssuse ui/cover.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>

Example

The code of the preview above.

demos/cover.qwe

view CoverDemo() =    <div.demo-stack>        <Cover id="cover-demo-hero" height="360px" tone="subtle" text={true}               top={<div style="display: flex; justify-content: space-between; align-items: center"><b>Acme</b><Button size="sm" variant="outline">Sign in</Button></div>}               bottom={<p style="margin: 0; text-align: center; color: var(--ui-muted); font-size: 13px">Scroll for more ↓</p>}>            <h2 style="margin: 0 0 8px; font-size: 32px; letter-spacing: -.02em">Ship on Friday.</h2>            <p style="margin: 0 0 16px; color: var(--ui-muted)">Everything a small team needs to get a release out, in one place.</p>            <Button>Start free</Button>        </Cover>        <p.demo-note>The middle has as much room above it as below, whatever the top and bottom hold. Without them, it is simply centred.</p>        <Cover id="cover-demo-plain" height="200px" pad={16} text={true}>            <p style="margin: 0">Just the middle, in a 200px-tall block.</p>        </Cover>    </div>

Source

ui/cover.qwe

// Cover: a block as tall as the screen (or as told) with one thing in the middle// of it, and something at its top and its bottom if given: a landing page's first// screen, a sign-in page, a "thanks" page.////   <Cover top={<Navbar .../>} bottom={<p>Scroll for more ↓</p>}>//       <h1>Ship on Friday.</h1>//   </Cover>//   <Cover height="100dvh" text={true}> <SignInForm/> </Cover>//// children: what sits in the middle, with as much room above it as below.// top, bottom: HTML at the top and bottom edges (a nav, a footer line).// height: how tall it is at least, as CSS ("100vh"). pad: room inside, in pixels (24).// text: the middle's text is centred. tone: "plain" (default) or "subtle" (tinted).import ui/theme.qwe use ui_clslet cover_css = css`.ui-cover {  display: flex; flex-direction: column; min-height: var(--ui-cover-h, 100vh); min-width: 0;  padding: var(--ui-cover-pad, 24px); color: var(--ui-fg); font: 15px/1.5 var(--ui-font);}.ui-cover-subtle { background: var(--ui-subtle); border-radius: var(--ui-radius); }.ui-cover-top, .ui-cover-bottom { flex: none; }.ui-cover-main { margin-block: auto; padding-block: var(--ui-cover-pad, 24px); }.ui-cover-main > :first-child { margin-top: 0; }.ui-cover-main > :last-child { margin-bottom: 0; }.ui-cover-text .ui-cover-main { text-align: center; }`view Cover(top = null, bottom = null, height: str = "100vh", pad: int = 24, text: bool = false, tone: str = "plain",           id: str? = null, class: str? = null, children) {    style global cover_css    <div class={ui_cls(["ui-cover", text && "ui-cover-text", tone == "subtle" && "ui-cover-subtle", class])} id={id}         style={`--ui-cover-h: ${height}; --ui-cover-pad: ${pad}px`}>        {top != null && <div.ui-cover-top>{top}</div>}        <div.ui-cover-main>{children}</div>        {bottom != null && <div.ui-cover-bottom>{bottom}</div>}    </div>}

AppShellAn app's frame: a sidebar of links, a top bar and the page; the sidebar is a drawer on phones.layoutpagenavigationno-js10 views · 7 downloads BentoGridA grid of tiles spanning columns and rows, with titles, tints and links, packed to leave no holes.layoutgridcardmarketingno-js9 views · 6 downloads BrowserFrameA mock browser window around its content, with the address in its bar, for screenshots and demos.layoutmediaimagemarketingno-js7 views · 6 downloads FooterA site's footer: brand and tagline, columns of links under titles, and a bottom line with the small print.layoutpagenavigationlinkno-js6 views · 6 downloads PageHeaderA page's top: breadcrumb, title, a line about it, small facts and the actions, with room under it for tabs.layoutpagenavigationno-js7 views · 5 downloads SectionA part of a page under its title and a line about it, kept to a readable width, with room above and below.layoutsectionpageno-js6 views · 5 downloads

Thread

Useful? Like it, or add to its thread below.

Thread 0 posts

On Cover: questions, tips, corrections, and code that uses it.

No posts yet. The first one opens the thread.