Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Semantic Collections

Hello everyone, I am Reggie Dawson. Welcome to the Semantic UI Framework and JavaScript projects course with Tuts+. Now in this video, we will go over a few of the collections of Semantic UI. Collections are used to hold other Semantic components. Now we won't go over all of the components, and instead we'll look at a few key ones and how to use them in your projects. I also have included a link to the Semantic documentation in the course notes. The first collection I will talk about is the grid. Now every CSS framework comes with a grid system of some sort and Semantic is no different. The grid, by default, will span the full width of the viewport, but we can also add a container class that will put it inside of a fixed-width container. This is all we need to do to add a grid. Add the class ui, followed by the word grid. As you will see, we will precede all of our Semantic UI classes with the UI class. Now inside of our grid, we can add some columns. Now if you're familiar with grid systems, you may be wondering what happened to the rows, which is what we normally place our columns inside of. We still have rows which we will get to in a minute, but we don't have to add them, as we will just use the columns and wrap accordingly when we reach the maximum amount of columns. In the case of Semantic UI defaults, there are 16 columns per row. Now when we add columns, we can specify the size of the columns if we like. We can also specify the column size in the grid and omit them in the columns. In this case, we will have two rows. Remember there are 16 columns per row and we are using four wide columns. Now as I mentioned, we can still place our columns inside our rows, but we don't have to. We can also mix and match using rows if we like. Now as you can see, since I included five columns in our second row, it wrapped to a third row because only four of the columns can fit in one row. Now as it stands, most of the time we don't even need to include rows and we can find the desired results by just using columns. Now if we take a look back at the Semantic documentation, we can look at all of the other features we have available in the grid. For example, we can set up our grid to be colored. There are really too many options available for me to go over all of them but know that you are able to set up advanced grids with Semantic. We will get into some of these other options as we build our projects later on in this course. Again, also make sure you check out the documentation. Next up, we have the menu, which is how we can configure various styles of menus. We can set up a basic menu by adding a div that has classes of ui and menu. After that, we supply the items that make up our menu as links with the item class. I have also added a utility active class, that can be used to provide styling to the selected menu item. The menu items themselves also have styling such as changing color when the mouse is hovered over the link. We can also supply the number of links and items to the menu. This serves to create a menu where the buttons span equally across the screen. Now of course, I am sure you may want to make a top bar style menu, and of course, Semantic has a way to set this up as well. All we do have do is add top and fixed classes to our menu. Now the menu is attached to the top of the viewport. Now since Semantic makes so many styles available to us, it is also easy to style our menu as text. All we have to do is add text as a class. Now for anyone that hasn't worked on this project, they should be able to tell right away how this menu bar works. We have, ui top fixed three item text menu, which reads like a sentence. Now the border from our menu bar is gone and the links are now rendered as text. Now if you wanna display your menu as a vertical menu, all we have to do is add the vertical class. Now after we add this class, the menu is now displayed in the left-hand side of the screen, laid out vertically. I have barely scratched the surface of all the customizations you can do on the menu. Make sure you check out the documentation for more details. Then the last component we will look at is the table, which we use to lay out lists of data. Now this is a standard table, nothing special, with some styled headers. The example also uses the ribbon label to add emphasis to the first cell. The beauty of the Semantic table becomes apparent as we look at other examples. Since we can use other components, we have an example of a table that is styled using the rating component inside. Now those are all the collections that we will look at for now. Make sure to check out the documentation and learn more about collections. And, of course, we will be using many of these components as we build the projects in this course. In the next video, we will take a look at some Semantic elements.

Back to the top