2.4 Semantic Elements

Hello, everyone, I am Reggie Dawson. Welcome to the Semantic UI Framework and JavaScript Projects Course for Tuts+. In this video we will look at the components called elements in Semantic. These elements are the most basic building blocks of Semantic and what we will use to add our content. The first element we will look at is the segment. Segments allow us to group related content together. The segment is great when used to contain text, but works equally as well when using images or other content. There are also other segment formats that make the segment look like it has multiple pages. We can also create vertical and horizontal groups of segments and nest segments together. As usual, the Semantic team has included a load of options for the segment to ensure that your project doesn't look like anyone else's. As a result, segments are a very versatile way to display content. Next up, the button is nothing different than the buttons that you have seen with other frameworks, but as usual, there's more. In addition to the standard buttons, we can also use the color setup in Semantic to style our buttons. Then we can also invert the buttons to make them work better on a dark background. Of course, I've seen the various colored buttons before, but I've never seen any other frameworks offer conditional buttons, for example. Semantic also offers social buttons that adopt the branding of the respective social network. Now the creative button all we need to do is pass the UI and button classes to a button. We can also use another element if we like, but if we do we will need to add tab index = 0. This is because any element other than a button will not change styles correctly on click without this. Now after that, the next component we will look at is the header. Beyond just a simple way of displaying headings, headers in Semantic are useful ways of displaying information. At its most basic, we have the page and content headers. The page headers are designed to be used as the headers of a whole page. The content headers are designed to work with smaller sections of content. The only difference in how you specify which one you are using is in the syntax. The page headers use standard h1 through h5 tags and add the ui header class. Content headers, on the other hand, are created with the div that we then supply with the ui header class, but we also have to specify a sizing class. The options we have are huge, large, medium, small, and tiny. Now, I've looked at the styles for these and they really correspond directly to the standard heading tags. Another thing that makes headers useful is the different styling that we can apply to them besides text. We can also add images, and icons to the headers, for example. Then finally, we have the label, which as usual offers a lot of styles that we haven't seen in other frameworks. With Semantic, we can add icons or images with our labels. One of the more unique labels that we have in Semantic is the pointing label, which will point to content next to it. By default the label will point up, but we can add below, left and right to point the label in the respective direction. We also have the ribbon, which attaches itself to another element. The ribbon appears as if it wraps around another piece of content. For example, if we add the ribbon to a segment it will appear as if it wraps around the segment. As usual we have only scratched the surface of the Semantic elements. Make sure you check out the documentation and learn more about the elements we discussed as well as others we didn't get to. In the next video we will learn about some of the view and module components of Semantic UI.