Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Semantic Views and Modules

Views are handy containers for grouping together elements—for example, a card view for displaying text and images in a Material Design-style card. In this lesson we'll learn about views, and also Semantic modules.

2.5 Semantic Views and Modules

Hello, everyone, I am Reggie Dawson. Welcome to the Semantic UI Framework in JavaScript Project Scores with Tuts+. In this video, we will look at the view and module components of Semantic that allow us to display content in a few different formats. The first component we will look at is the card. Cards have grown in popularity recently as the go-to way to display content. I know that using a card easily simplifies grouping related content together. The cards in Semantic are no different. Now, this is just an example of how you set up a card, but bear in mind you do not have to include any of this content. I like that as opposed to other frameworks, semantic just treats the card as a container for content. As a result you can mix and match content in the card. This makes the semantic card very flexible. Now, here we have added an image with our card, and then after that we have our content. If we look at the documentation, we can see the different content that we can use. We can add images, metadata and the link to our card, for example. Since the card has so many properties and different styles of card you can set up, make sure you check out the documentation. Now, unique to semantic is an ad component that supports creating ad zones in your project. Now, this is definitely something that I've never seen with other frameworks. These components work by allowing you to enter your ad code inside of the component. The semantic component serves as a wrapper for the ad. The ad component is compatible with such popular ad network such as AdSense. So, it's perfect if you are building a site that would utilize ads. The ad component comes with the way to test out the ad component in your layout even if you don't have the ad or your site isn't fully configured yet. By adding the data text to tribute, we can add text in our add to test out the layout of a particular ad site. This text will then appear in the ad component. Then, the final view component that we will look at is the comment component. This component will allow you to setup a comments section on your site. As usual, semantic has provided all the styling that you need for this component. These comments can have an avatar attached inline with the comment. There's even a variation on the comment section that allows us to create a threaded comments list. After that, we're done looking at the view components. Again, make sure to check out the documentation for further information. Finally, we'll look at the last group of components available to us in semantic, the modules. These components represent different ways to present content inside a semantic. The first module we will look at is the accordion. This is becoming a very common way to layout information and works by toggling the display of sections. For example, as we click on sections of this accordion, it will expand the information contained beneath it. When we click on another section, the initial section collapses and the new section is revealed. We also have a couple other variations of the accordion that can either be full width or inverted. Now, the next module we will look at is the dropdown. This module will allow users to select a value from a list of options. These dropdowns are typically used as part of the menu bar, but can be configured anywhere. As usual, the semantic team has included a staggering amount of options as we can create a selection, search or multiple selection drop down, for example. Now, one common thread that you may have noticed is that the semantic components are all compatible with one another. This extends to the dropdown as we can add a header icon, for example. Then, the final module we will look at is the sidebar. This allows you to hide additional content off the side of the page. While this is typically used with the vertical menu of some sort, we can place any content we like in this sidebar. The sidebar doesn't have to exist off to the left as we can add the sidebar on the right side, as well as to the top or bottom of our viewport. Now, in the last few videos we have only briefly went over solve the components available in semantic UI. Definitely refer to the documentation, but now you should have a good idea of how to use semantic as we move forward. In the next video we will get started with our first project. This will be a one page site style completely with semantic.

Back to the top