Semantic UI Elements

Semantic UI provides a variety of elements and components that help structure and style the layout of your web page. In this guide, we'll explore two key aspects: Grids and Containers, and Semantic UI Components. Examples will be provided to illustrate how these elements can be used effectively in your web development projects.

1. Grids and Containers:

- Grid System:

Semantic UI's grid system is a powerful tool for creating responsive layouts. It is based on a 16-column system and supports different device sizes.

<div class="ui grid">
  <div class="four wide column">
    <!-- Content for the first column -->
  </div>
  <div class="twelve wide column">
    <!-- Content for the second column -->
  </div>
</div>

Customize the layout by adjusting the width of columns based on your design requirements.

- Containers:

Containers in Semantic UI provide a way to limit content width and maintain readability. There are three container types: container, fluid container, and text container.

<div class="ui container">
  <!-- Content within a standard container -->
</div>
 
<div class="ui fluid container">
  <!-- Content within a fluid container (full-width) -->
</div>
 
<div class="ui text container">
  <!-- Content within a text container (limited width for better readability) -->
</div>

Choose the container type that best suits the context and design goals of your page.

2. Semantic UI Components:

- Buttons:

Semantic UI provides stylish and customizable buttons. You can use different classes to create primary, secondary, or circular buttons.

<button class="ui button">Basic Button</button>
<button class="ui primary button">Primary Button</button>
<button class="ui secondary button">Secondary Button</button>
<button class="ui circular button"><i class="icon"></i></button>

- Cards:

Cards are versatile components for displaying content, including images, text, and actions.

<div class="ui card">
  <div class="image">
    <img src="image.jpg">
  </div>
  <div class="content">
    <div class="header">Card Header</div>
    <div class="description">
      This is a sample card with some description.
    </div>
  </div>
  <div class="extra content">
    <button class="ui button">Action</button>
  </div>
</div>

- Modals:

Modals provide a way to display additional content or prompt user interactions.

<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">Modal Header</div>
  <div class="content">
    <p>This is the content of the modal.</p>
  </div>
  <div class="actions">
    <div class="ui button">Cancel</div>
    <div class="ui primary button">OK</div>
  </div>
</div>

- Menus:

Semantic UI menus are flexible and can be used for navigation or dropdowns.

<div class="ui menu">
  <a class="item">Home</a>
  <a class="item">About</a>
  <a class="item">Services</a>
  <div class="right menu">
    <div class="item">
      <div class="ui button">Sign In</div>
    </div>
  </div>
</div>

These are just a few examples of Semantic UI elements and components that you can leverage to create visually appealing and responsive web interfaces. Explore the extensive documentation provided by Semantic UI for more components and customization options to suit the needs of your project.

Installation Responsiveness