How to Design Rich Card-Based Layouts with Semantic UI

This article demonstrates building responsive web layouts using Semantic UI's Card component. We'll create an image album and a recipe widget, showcasing the flexibility of card-based design.

Card-based design is a prevalent pattern in modern web development, offering compact, portable, and adaptable elements for various content types. This approach excels in creating responsive layouts, easily adjusting content for different screen sizes and contexts. Popular websites like Dribbble, Twitter, Facebook, and Pinterest effectively utilize this design pattern.

This tutorial uses Semantic UI, a user-friendly CSS framework with a readily available Card component. Before starting, ensure you have two HTML files, each referencing jQuery (jquery.js) and Semantic UI (semantic.css, semantic.js). These can be linked via a CDN.

Here's a basic setup for including Semantic UI via CDN:

<meta charset="utf-8" />
<title>Semantic UI CDN</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/>
<🎜>
<🎜>

Key Concepts:

• Responsive Layouts: Semantic UI's Card component facilitates creating layouts that adapt seamlessly to different screen sizes.
• Mobile-First Design: Card-based designs are inherently suitable for mobile interfaces due to their compactness and flexibility.
• Semantic UI Integration: The tutorial provides clear instructions for incorporating Semantic UI, including CDN linking.
• Practical Examples: The tutorial offers detailed examples: an image album and a recipe widget, demonstrating the versatility of cards.
• Enhanced Interactivity: Semantic UI components like Dimmer, Rating, and Reveal add interactivity and visual appeal.

Example 1: A Simple Image Album

This example creates an image album with a stack of images. The initial HTML structure is:

<div id="album">
  <div class="ui piled compact segment">
    <div class="floating ui red label">9</div>
    <div class="ui card">
      </div>
  </div>
</div>

The complete code for the image album, including CSS and jQuery interactions, is too extensive to include here but can be found in the original article. The example uses Dimmer, Rating, and Popup components for enhanced user experience.

Example 2: The Recipe Widget

This example builds a recipe widget with a front card displaying the recipe image, name, description, and details. Hovering reveals a second card with ingredient and direction lists. The starting HTML is:

<div class="ui move reveal">
  <div class="visible content">
    <div class="ui card">
      </div>
  </div>
  <div class="hidden content">
    <div class="ui card">
      </div>
  </div>
</div>

The complete code for the recipe widget, including CSS and jQuery for the Tab component, is also detailed in the original article.

Summary and Further Exploration

These examples illustrate the practical application of card-based design using Semantic UI. The framework's components offer extensive customization options for creating rich and interactive web interfaces. The article also includes a FAQ section addressing common questions about customizing Semantic UI cards, integration with other frameworks, and adding various elements like icons, flags, headers, images, and buttons.

The above is the detailed content of How to Design Rich Card-Based Layouts with Semantic UI. For more information, please follow other related articles on the PHP Chinese website!