/Advent

Day 3: Gallery 🍿


Galleries are an inevitable part of every respected site. Here's a Christmas gallery.

The example component is visible below.



A few notes about this gallery component:

  • CSS Variables are used for grid and font size,
  • the calc function and viewport units are used for grid and font size,
  • CSS Grid is used for the grid,
  • the auto-fill keyword is used to fill the grid columns with items,
  • the minmax function is used to declare the minimum and maximum size of the grid item,
  • less than 10 lines of CSS for a fully responsive gallery that works on most modern browsers 🀯.

The code:

<div class="advent-gallery">
<div>πŸŽ…</div>
<div>🀢</div>
<div>πŸŽ„</div>
<div>🎁</div>
<div>πŸ•―οΈ</div>
<div>πŸ‘Ό</div>
<div>πŸ–</div>
<div>🍠</div>
<div>🍫</div>
<div>🍬</div>
<div>🍾</div>
<div>πŸ₯‚</div>
<div>πŸ“Ί</div>
<div>🍿</div>
</div>
.advent-gallery {
--size-xmas: calc(4rem + 2vw);

display: grid;
grid-gap: 2rem;
grid-template-columns: repeat(auto-fill, minmax(var(--size-xmas), 1fr));
place-items: center;

font-size: var(--size-xmas);
}

Advent of UI Components πŸŽ„

Check other UI Components.


Day 24: Details 🎹

A details component contains the summary and the complete information, which could be toggled between visible and hidden states.
Check the component

Day 23: Radio πŸ“±

A radio component is a form item used when only one selection is possible in a group of mutually exclusive choices.
Check the component

Day 22: Checkbox 🧦

A checkbox component is a form item used when multiple selectable objects are in a list.
Check the component

Day 21: Notification 🀫

A notification component usually displays a message that communicates information to the user.
Check the component

Day 20: Code block πŸ’»

A code block UI component represents a block of code that is formatted neatly.
Check the component

Day 19: Pagination πŸ“–

Pagination helps users browse through the sequence of related content.
Check the component

Day 18: Social share πŸ”—

A social share is a component that displays anchors holding social sharing links of a current page.
Check the component

Day 17: Card 🎴

A card component usually displays an image and extra information in card-like format.
Check the component

Day 16: Table 🎢

A table is used to display tabular data.
Check the component

Day 15: Breadcrumb 🍞

A breadcrumb is an element that helps users understand the hierarchy of the page and site.
Check the component

Day 14: Blockquote πŸ’¬

A blockquote is used to highlight a quote on a page.
Check the component

Day 13: List πŸ—’οΈ

An (unordered) list usually consists of items displayed as bullets.
Check the component

Day 12: Figure πŸ–ΌοΈ

A figure element represents a graphic asset with an optional caption.
Check the component

Day 11: Video Embed πŸ“Ί

A video embed is a code snippet that allows us to embed the video from a third-party platform like YouTube or Video to our site.
Check the component

Day 10: Footer πŸ‘‡

A footer is a component that sits at the bottom of every page. It usually consists of navigation and additional information, like website copyright and legal links.
Check the component

Day 9: Header ☝️

A header usually consists of navigation that has links to different parts of the website.
Check the component

Day 8: Hero πŸ¦Έβ€β™‚οΈ

A hero component usually displays the page title, description, and, sometimes, a CTA.
Check the component

Day 7: Intro πŸ’¬

An intro components usually provides basic information of the page. It is one of the first components on the page.
Check the component

Day 6: Horizontal Rule 〰️

A horizontal rule is usually used as a visual divider between two textual elements.
Check the component

Day 5: Split πŸ’”

A split component consists of two elements, usually image and text, sitting next to each other horizontally.
Check the component

Day 4: Banner 🚩

A banner is an element that serves to highlight information, like a website page or an event or Advent of UI Components.
Check the component

Day 3: Gallery 🍿

Galleries are an inevitable part of every respected site. Here's a Christmas gallery.
Check the component

Day 2: Tag 🎁

Tags often represent information like category, state, or additional information.
Check the component

Day 1: Button πŸŽ…

Let's start with a classic button. Every website needs one, right?
Check the component