Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Add Some Sections

In this lesson, we'll add services and portfolio sections to our home page. You'll see how to use some of Semantic's collection classes for layout.

3.3 Add Some Sections

Hello everyone, I am Reggie Dawson. Welcome to the Semantic UI Framework in JavaScript Project Scores with Touch Plus. Now, that we have the hero area in menu bar setup, we next need to add sections to show our services in Portfolio. First, let's go to the custom CSS file. First, we will add a class to shrink the margins between elements. In this section, I will use the icon header to display the services. There's a wide gap between these icon headers and the header that precedes it. I will use this class to shrink the space between them, so that it flows better. Then we add a class that sets our service section to full width. Then we also add a minimum height and a linear gradient background. Then we add a class that will add a margin to push our content a bit further down the page. Then we add some similar styles with the portfolio section. Instead of a gradient, this time we are using the solid brand color. After that, let's go back to the index.html file. Now I'm going to fold up some of these sections of code, so that out of the way you don't get confused. Now we wrap this section in a grid so that we can apply a background color. We also add an ID so that we can link to this section. Then we add another grid that is set to equal width. This will divide the grid equally by the number of columns. The container class wraps this grid, so that it does not extend to the edges of the viewport. Then we add a four wide centered column. Since this will be the only column in the row, it will be centered since the grid is set to equal width. We have also added the svc-row class we created to add some space to the top of the column, so it is not flush with the top of the section. Thenwe add a horizontal divider by wrapping our header. This will style the header and place it in the middle of a horizontal divider. Then we add a row with our class that removes some of the margin between the header and the rest of our content. Now, for the first row, we didn't have to explicitly add a row. Since we only want that column in the row, we add a row to force the content to a new row. Then after that we add a column that holds an icon header. In keeping with what we have been doing with dark backgrounds, we set the header to be inverted. Then we add an icon. Semantic includes a load of icons and all we have to do is go to the documentation page and select an icon. After that all we have to do is supply the icon name as the class. Then we have our content followed by a sub-header which provide a brief description. Then after that we had two more columns, the only difference is the icon they use and the title of the service. Now, that we're done with the services section I'm going to fold this up as well. Then our portfolio section will be very similar to the services, except it will contain images. First we add a similar grid to the ones we used in the services. This time, however, we use the portfolio class and set the ID to port. After that, we set up another equal width grid. Then we do the same thing with our portfolio header and place it in its own four wide centered row. Then we add two rows with three columns each. We use the medium image class from semantic to set the images to 300 pixels. Of course, we've added the images to the IMG folder. After that, save your project in preview. Go ahead and click on the services link and there our services are. Then click on the link for the Portfolio. Now in the next video we will finish up this project by adding the about and contact sections.

Back to the top