Advertisement · 728 × 90
#
Hashtag
#faunderui
Advertisement · 728 × 90
Cuukbuuk home page

Cuukbuuk home page

I redesigned the entire Cuukbuuk app. The update is largely built on clean Faunder UI. The goal was less clutter and more clarity.

cuukbuuk.com
ui.faunder.fi

#uidesign #frontend #css #faunderui

2 0 0 0

#FaunderUI changelog:

ui-icon: Besides mask icon, now supports svg, img, and content (span). Same sizing and styling: <i ui-icon>, <svg ui-icon>, <img ui-icon>, <span ui-icon>emoji</span>. Size via --ui-icon-size or ui-icon="sm"/"lg".

ui.faunder.fi/icon

0 0 0 0
Faunder UI - Documentation

#FaunderUI changelog:

Layout helpers: ui-column, ui-row, and ui-margin keep layouts consistent (same xs–6xl scale) and make structure easier.
Example: ui-column="gap-lg x-center", ui-row="wrap gap-md", ui-margin="top-lg".

ui.faunder.fi/row
ui.faunder.fi/column
ui.faunder.fi/margin

0 0 0 0

#FaunderUI changelog:

No more separate ui-card-link element inside ui-card — ui-card works directly on <a>. The card can be the link: <a ui-card href="#">...</a>.

ui.faunder.fi/card

0 0 0 0

#FaunderUI changelog:

ui-accordion: Added animations (open/close, content height and opacity) and support for custom summary icons.

ui.faunder.fi/accordion

0 0 1 0

#FaunderUI changelog:

Components no longer use class names - each has its own ui-x attribute (e.g. ui-button, ui-container). Variants and utilities are easier to manage, and your own styles won’t clash. Example: <button ui-button="primary lg">.

ui.faunder.fi

0 0 0 0