sistema de diseño de rastrillo

Un resumen de todo lo que ofrece el sistema de diseño. Tema: day. Idioma: Español.

Primitivas de interfaz

Las formas que un componente no puede ser, porque envuelven un cuerpo que solo conoce quien llama: la tarjeta de sección, la rejilla de datos, el menú desplegable y el armazón propio de los contenedores. tokens.css trae las clases y la aplicación escribe el marcado. Todo lo de abajo es exactamente el ejemplo que devuelve ui.Styleguide, que es el ejemplo que las pruebas de ui contrastan con tokens.css.

Los enlaces aquí no están activos

Enlaces inactivos; se facilita el código del ejemplo.

box

La tarjeta de sección con relleno, y el título que va fuera de ella.

Qué tarjeta es cuál

rst-list y rst-card no tienen relleno a propósito: contienen una serie de filas, y cada fila se rellena a sí misma. Mete dentro un formulario, un párrafo, una tira de enlaces o cualquier cosa que no sea una fila y se dibujará pegado al borde: el texto tocando el borde es la señal. La tarjeta con relleno para contenido cualquiera es rst-box, con su título como rst-box-head hermano justo antes.

Escritorio Móvil Código

<div rst-box-head><h2>Payout</h2><a rst-btn href="/payout/edit">Edit</a></div>
<section rst-box><p>Everything on a screen sits inside boxes.</p><div rst-box-foot>Last updated 2 hours ago</div></section>

dropdown

El menú details/summary que hay detrás de los menús de desbordamiento de la cabecera y del filtro de una barra de lista, más un filtro aplicado como etiqueta que se puede quitar.

Escritorio Móvil Código

<details rst-dropdown name="rst-menus">
  <summary>Filter<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span><span class="rst-sr-only">Filter orders: Paid</span></summary>
  <div rst-dropdown-menu>
    <a aria-current="true" href="/orders?status=paid">Paid</a>
    <details rst-menu-group name="rst-menus-price" open><summary>Price</summary><div><a href="/orders?price=free">Free</a></div></details>
  </div>
</details>
<span rst-ftok><span rst-ftok-k>Paid</span><a href="/orders" aria-label="Remove filter Paid">✕</a></span>

form-layout

Los atributos que dan a un formulario su ritmo y su barra de guardar. Ningún parcial los emite: envuelven una serie de campos que compone quien los usa.

Escritorio Móvil Código

<form rst-form-flow method="post" action="/settings">
  <div rst-field>
    <label rst-field-label for="name">Name</label>
    <input rst-input type="text" id="name" name="name">
  </div>
  <div rst-field>
    <label rst-field-label for="email">Email</label>
    <input rst-input type="email" id="email" name="email">
  </div>
  <div rst-field-row>
    <div class="rst-grow" rst-field>
      <label rst-field-label for="city">City</label>
      <input rst-input type="text" id="city" name="city">
    </div>
    <div rst-field>
      <label rst-field-label for="zip">ZIP</label>
      <input rst-input="short" type="text" id="zip" name="zip">
    </div>
  </div>
  <div rst-form-bar>
    <span rst-form-bar-note>Changes save immediately.</span>
    <div rst-form-actions>
      <a rst-btn href="/settings">Cancel</a>
      <button rst-btn="primary" type="submit">Save</button>
    </div>
  </div>
</form>

help

Un signo de interrogación con borde que enlaza a un artículo de ayuda. Su tooltip de CSS es decoración; el enlace lleva su propia etiqueta en una frase completa.

Escritorio Móvil Código

<a rst-help rst-tip href="/help/orders" target="_blank" rel="noopener" aria-label="Help: orders" data-tip="About orders"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg></a>

list-grid

El vocabulario real de las tablas de datos: la tarjeta define sus columnas una vez y las filas solo eligen celdas.

Las pantallas se apilan en vertical

Una pantalla es una columna: page-header, luego section-header + tarjeta, luego el siguiente section-header + tarjeta, en orden de lectura. La disposición horizontal queda reservada a los idiomas que la traen: rst-box-head, rst-field-row, rst-lbar, celdas rst-lrow, rst-seg-tabs.

Escritorio Móvil Código

<div rst-card style="--rst-cols: 2fr 110px 32px">
  <div rst-lrow="head"><span>Order</span><span class="rst-m-hide">Status</span><span></span></div>
  <div rst-lrow>
    <a class="rst-nm" href="/orders/AB3PX"><bdi>Grace Hopper</bdi><small>AB3PX · <bdi>grace@example.com</bdi></small></a>
    <span class="rst-m-hide rst-cell-mut">Paid</span>
    <details rst-row-menu name="rst-menus"><summary aria-label="Actions for order AB3PX"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg></summary>
      <div rst-row-menu-panel><a href="/orders/AB3PX">View</a><hr><button type="submit" class="rst-danger">Refund order…</button></div>
    </details>
  </div>
  <p rst-no-match>No orders match. <a href="/orders">Clear filters</a></p>
</div>
<p rst-count-line>Displaying <strong>1–20</strong> of <strong>412</strong></p>

modal

Un modal es una URL propia, no un estado del cliente: la página de debajo marcada como inert, el panel encima y un enlace normal para cerrar.

Escritorio Móvil Código

<div rst-backdrop inert>
  <div rst-page><h1>Settings</h1></div>
</div>
<div rst-modal-overlay>
  <dialog rst-modal-panel open aria-labelledby="modal-title">
    <nav>
      <a href="/settings/profile" aria-current="page">Profile</a>
      <a href="/settings/billing">Billing</a>
      <a href="/settings/notifications">Notifications</a>
    </nav>
    <section>
      <a rst-modal-close href="/settings" aria-label="Close settings">✕</a>
      <h2 id="modal-title">Profile</h2>
      <p>Update the name and photo shown across the account.</p>
    </section>
  </dialog>
</div>

Míralo en vivo en la URL a la que pertenece (se abre en una pestaña nueva).

selbox

La casilla de selección que lleva una fila de lista en modo selección. Su etiqueta repite la identidad de la fila.

Escritorio Móvil Código

<label rst-selbox><input type="checkbox" aria-label="Select order AB3PX"></label>

shell-sidebar

El armazón propio del shell sidebar, que por debajo de 800px se pliega en un desplegable details.

Escritorio Móvil Código

<div rst-shell-sidebar>
  <a rst-skip href="#main">Skip to content</a>
  <details rst-shell-chrome><summary><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>Menu</summary></details>
  <aside rst-shell-rail><a rst-shell-brand href="/">Notes</a>
    <nav rst-shell-nav><span rst-shell-group>Work</span><a href="/" aria-current="page">Dashboard</a><a href="/reports">Reports</a></nav>
  </aside>
  <main rst-shell-main id="main"><div rst-page>Content.</div></main>
</div>

Abre la demo del armazón con barra lateral, una vista previa independiente. (se abre en una pestaña nueva).

shell-topbar

El armazón propio del contenedor con barra superior, como marcado. Layout lo entrega como una plantilla entera.

Escritorio Móvil Código

<div rst-shell-topbar>
  <a rst-skip href="#main">Skip to content</a>
  <header rst-shell-bar><a rst-shell-brand href="/">Notes</a>
    <details rst-shell-menu name="rst-shell-menu"><summary><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>Menu</summary></details>
    <div rst-shell-tail>
    <nav rst-shell-nav><a href="/" aria-current="page">Home</a><a href="/archive">Archive</a></nav>
    <details rst-dropdown rst-shell-account name="rst-menus"><summary>Account<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></summary>
      <div rst-dropdown-menu><a href="/settings">Settings</a></div></details>
    </div>
  </header>
  <main rst-page id="main">Content.</main>
  <footer rst-shell-foot>Made with rastrillo</footer>
</div>

Abre la demo del armazón con barra superior, una vista previa dedicada. (se abre en una pestaña nueva).

stat-band

Una fila de cifras a lo largo de la parte superior de un panel.

Escritorio Móvil Código

<div rst-stats>
  <div rst-stat="lead"><span rst-stat-label>Revenue this month</span><span rst-stat-num>&euro;48,210</span><span rst-stat-delta rst-tone="positive">+12%</span><span rst-stat-note>vs. last month</span></div>
  <div rst-stat><span rst-stat-label>Orders today</span><span rst-stat-num>318</span></div>
  <div rst-stat><span rst-stat-label>Average basket</span><span rst-stat-num>&euro;41.20</span><span rst-stat-delta rst-tone="negative">&minus;3%</span></div>
  <div rst-stat><span rst-stat-label>Refunds</span><span rst-stat-num>7</span></div>
</div>

tblock

Una tarjeta con borde cuyo cuerpo solo se muestra mientras su interruptor está activado, mediante :has(). El interruptor manda; mostrarlo es una comodidad visual.

Escritorio Móvil Código

<div rst-tblock>
  <label rst-tblock-head><input type="checkbox" name="notify" checked>
    <span rst-switch-track aria-hidden="true"></span>
    <span><span rst-tblock-title>Email notifications</span><span rst-tblock-desc>Sent for every reply to a thread you're in.</span></span>
  </label>
  <div rst-tblock-body>
    <div rst-field>
      <label rst-field-label for="notify-freq">Frequency</label>
      <input rst-input type="text" id="notify-freq" name="notify_freq" value="Daily digest">
    </div>
  </div>
</div>