FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.1 Home Page Grid, Icon, Image & Pop-Up

The first page we’ll tackle is the Home page. In this lesson you’ll learn how to add in another three-column stackable grid with icons, images and a pop-up on each image.

3.1 Home Page Grid, Icon, Image & Pop-Up

Hi, guys. Welcome back to Getting Started with Semantic UI. And in this lesson, we're gonna take a look at adding content into the home page. So, first things first. Inside of the resources directory. And we go inside of images. You'll be able to see I've added in a new image called food which is 250 by 250 pixels. So now it's time to take a look at the index.php file and start adding in content between the header and the footer. So now that I have my index.php file open and also the CSS file as well. I want to take a look at the documentation, and go ahead and take a look at the grid system. So again with the grid, you have. Loads of options and I would like a nice divided grid. And again, I want three columns only in my grid, so I have three nicely divided up sections. So, let's go ahead and. Take a look at adding in my grids. So as you know, we need to have, first of all, a class of UI, then we need a class of grid. So now it's a 16 column grid but now I want it to limit that grid to a 3 column grid. Then after that I want to take a look at making this stackable. Which as you know will stack the columns one on top of the other when it comes to the mobile screen resolutions and then also on top of that I want to say divided, so the divided will just add this nice line in here. On the columns so let's go ahead and add that in. And then inside of there we need to create three div elements which is gonna represent three columns within our grid so I need to have the class of column and then you can just add some content in there temporarily. And then let's go ahead and save this, hit refresh, and there you'll notice we have our content. So the next thing I need to do is take a look at adding in the proper content for the columns. So the first thing I want to do is actually add in a header three element, and then inside of there, I want to put the icon, and it's gonna be a slightly different icon so if we go ahead and take a look at the documentation again. And the icon, you get a review of all the different icons but then also what you have if you keep scrolling down is the variations. So, you can have small to large but I really want this type of circular icon that has a color inside of there. And you have all your different colors here. [SOUND] That you can choose from and I'm gonna go with the nice teal color which is that sort of turquoise color, mix of green and blue. So that's what I'm gonna choose right here, let's put in the i tag first of all then we need to put the class attribute onto the i tag. Then we need to say, I want this to be an icon. It's gonna be circular. It's also going to be the teal color. Then, what time of icon do I want? Let's make it a pencil icon. Something like that. That looks pretty good. So again, it doesn't matter what order you put this in, as long as you have the classes in there. Now, also don't forget that if we take a look at the documentation again, I want the color. To be filled in, or the icon to be filled in. So, in order to do that we need to say inverted, like it is on these two right here. So let's go ahead and add the class inverted. And again, it doesn't matter the order of the classes. And once I've done that we can then go ahead and take a look at this in the browser. So if we hit refresh. There is my icon. So, you're probably going why did you put it in a header three? Well, number one, you can control the font size if you'd like. That, however, you also want to center this. They don't quite look right on the left right here. I like them in the center of the column. Now because these are displayed as inline they will not you know, automatically center if you set the margins on here. So what I'm going to do is put the header three in and then once I put the header three in I can then set the text alignment on the header three, so go back to the. main.css file and I like to add these styles below so I'm just gonna put in a comment right here. Let's call this home page so all the home page styles are below this comment, and then what we're gonna do is target the header three. But however, I don't want to be too general. We could have many header threes throughout the site so. What I'm gonna do is add in an id and say home three. Go ahead and save that. So, now I can target that id home three, and then I can target the header three element that's nested inside of there, and then I can take a look at setting the text alignment to the center. Go ahead and save that and hit refresh and now my header threes have got their icons centered. Perfect. And then what I'm going to do is just to break this up a little bit I'm gonna put in some paragraph elements. So let's go underneath there, put in some paragraphs and then I want to just put in some lorem ipsum. So I'm just gonna paste that filler text in there. Save it and hit Refresh. So now what I want to do is focus on the styling of the text real quick. So again I can target the element with the ID of home three and then I can target the paragraph elements that are nested inside of there. We can set the line height to be 180%. Then also I want to set the color to #666, or the devil's gray. So let's save that and then hit Refresh. And there we go. Next I wanna take a look at actually adding in an image on each one of these columns. So this is where our image comes in. So we're just gonna take a look at the index.php file. And we just want to go down to a new line. We're gonna add in an image and then we're gonna look in the images directory and then we want to grab that food.jpg image. And then just put in the Alt. All right. So. Now that we have this I wanna take a look at the options available to me inside of the semantic documentation. So we wanna scroll down. Under elements, you'll have image. And inside of there you can see you can have quite a few options available to you, so you can have slightly rounded corners. You can have circular images. Your images can be floated and have text next to them or any of the content you'd like. Different sizes and so on and so forth. So with the circular image, I'm just going to take a look at this. You could see we have the class of circular UI image. So I'm just gonna put that. Into all of these images, so we're gonna have ui circular image. Save it, go back, hit Refresh, and there we go. Now again, the image. Is not centered properly. So one way that I can solve this is by setting the margins to zero auto, so let's go on into the CSS file. We want to target the element with the ID of home three. And then we want to target the image elements inside of there. And then we're gonna set the margins to zero auto. So if I save that, you'll notice they center them now. Okay so now let's take a look at adding in a few. More effects onto this. So for example, I would like a nice pop-up when I hover over these images. So that I have a general idea of what it means. So let's take a look at the semantic documentation again. So I'm just gonna open up the menu. And underneath modules, we have popup. So inside of here you can see that. You know, we can apply some content to the popup via the DOM. You can also have a title in there as well. So for example if I hover over here, you can see you can have the main title and then the main. >> Content underneath, you can also have HTML in the popup and you can have variable size and don't forget that you can have inverted as well so that looks really nice and you can also change the positions as well, now don't forget this is a module, so it is gonna involve. A little bit of JavaScript right here. So if I take a look at the examples, you can see that I can trigger the popup on a click or on focus, it's entirely up to you. And you also have hover and other ones as well. And also. You have the ability to specify the target element and you can set the position. You can set the type, you can set the title and the content. So, it's very important to understand that you can apply. The popup through the JavaScript or you can apply it through the meta data. So for example if you go to usage. You'll be able to see here you can set it via title in the html dom data hyphen content, data hyphen html. Data variation, data offset, so you can move the pixel offset correction for the popup. Just in case it's not in the right place. Or in data hyphen position. So you can set it to the top right, the top left, bottom right, and so on, and so forth. You have all of those options available to you. Very, very useful. So, you can apply it in the DOM or you can hard code it in the JavaScript. My personal belief is I would much rather use the DOM rather than coding in JavaScript. And my main reason for this is the fact that I could target a class and then for each individual element that I want to have a popup on. I just need to put in the relevant dom attributes and also making sure I put that class popup on there. And it just allows me to have that flexibility. So that's what I'm going to do. For the home page but first we need to open up the script.js file. So the first thing is to add the class to the image. So ideally you don't actually want to be using the class popup; because if I was to add that class in to my images and hit Refresh. You'll notice something very strange happens and the image goes at the top here. The reason why it does that is because the popup class is already being used by the Semantic CSS file. So, you do not want to be using. That class. What you should do is just come up with something else. So I'm just gonna say pop. Then let's take a look at the JavaScript. And what I want to do is target all elements with the class of pop. And you can look for other classes as well. And then on top of that, we want to call the method popup. Which is part of the. Symantec JavaScript extension onto jQuery. So now this method is being called. We can go back, hit Refresh, and now our image is not being effected. But you'll notice that nothing is happening. Now let's not forget that we have not defined any content. So there's no reason for this to pop up. So what I could do is go ahead and say, data-content, and then we can just put some text in here. And we can save that and hit Refresh. And now you'll notice we get the popup. Perfect. And you can put a title in here. Now it's not the title attribute on its own. It's actually data, hyphen, title, and then you can put a title in as well. >> And obviously you have HTML and so on and so forth, again read through that documentation and also if you wanna see all of the options that are available to you, you just need to go to the settings tab and it will show you all of the options. Their default value and of course a nice little description. And you do get some things obviously that the dom can't control. Such as you know, duration and the transition and so on and so forth. So these things. Can only be controlled in JavaScript. But you can see that most of the important stuff can be controlled in the DOM. So try to keep as much control as possible. And as you know, the title's wrong. It's data-title. Not title. Cuz otherwise it won't work. So now I wanna take a look at the data-variation because I like it inverted. So let's go ahead and get rid of the data-title. And change it to data-variation. And then, we want to make this inverted. Save it, go back, hit Refresh. And there we go. Looks real nice. So, there is our popup. You can change the position and then, obviously, offset it if you wanted to and all those options. Just have a good play around with this. And also have a good play around with the settings as well. And please do remember that with your settings that when you call the popup method, your setting are passed in through an object. Just like so. And then in the objects you have your properties. And so I could say, I want this to actually now be. A click in order to trigger the popup. So if I save that, hit Refresh. I hover, I don't get the popup. But if I click, I get the popup. And if I click again, it will toggle it on and off. So thank you for watching me in this lesson. And please join me in the next lesson where we'll continue on developing the home page.

Back to the top