FREELessons: 26Length: 5.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.2 Working With Semantic UI

To understand any framework or library, it’s important to get familiar with the documentation. Let’s take a walk through some aspects of the Semantic documentation to get a gentle introduction. But don’t worry—we’ll also be using this documentation throughout this entire course.

1.2 Working With Semantic UI

Hi, guys. Welcome to getting started with Semantic UI. And in this lesson, I want to show you the documentation provided with the Semantic UI. The reason being is because I want you to understand the documentation and how it's laid out and presented. That way if you ever needed to find out anything about any particular module or component of the Semantic UI you can easily find that information. Also we won't be covering every single last detail of the Semantic UI. So ideally you're going to need to know how to understand that documentation so you can create your own implementation of the UI. So when you visit you're able to download the UI which is released under the MIT license, which means it's open source for commercial and non-commercial projects. You're also able to view the UI as well. And if you scroll down on the homepage you can see some of the benefits of using this UI. And at the bottom, you can see that there is a clear division between all of the sections within this UI. So that means it's more organized and you don't have to constantly keep looking sorta really long list of everything this UI has to offer. Now the good news is the UI is very well-documented and if you go ahead and open up the side menu on the website, you're able to see that you can have a nice introduction showing you definitions, overview and so on and so forth. Then also, you have the project so if you want to contribute to the Semantic UI or view the legal documentation, then you have the elements. So you have 12 elements, six UI collections, four views, and 11 modules. Now let's go ahead and first of all take a look at the elements. And I'm just gonna click on Button right here and give you an example of the documentation that is provided. So over here, you can see on the left-hand side we have a little mini-menu, and this allows us to see different categories. So typically, you'll see Types. So it will be a different type of the components. So with the Buttons, for example, you can have a normal standard button or you could have a button that reveals information when you hover over it or you can have a button with an icon on its own or a button with an icon and some text. Now what's really nice about this documentation is you can clearly see in plain English what this is, and what it produces. But not only that, you can click on these two opening and closing tags right here and once you do that, it will reveal the markup that's needed to generate that specific example. So Types is the different types of that specific component. So, for example, if we had the Header, it could be a large header, it could be a header for some content, and so on and so forth. Then also you have the Groups. So the Groups, for example, I can group the buttons together. I can group different types of buttons. For example, the standard or the buttons with the icons, and so on and so forth. Also, then, you have States so you states are your hover state, your down state, you have your active state so that's currently on active, then we have disabled, and then we have the loading state. And then you have Variations of the component, so in case of the button, you have the social media buttons you also have different sizes, so they're all different variations and the button can be formatted to show different levels of emphasis so you can have nice big red buttons that are very important and so on and so forth. So these are all the different variations that you have. Now let's say that I'm not looking for this. I just wanna see what options are available to me with a specific component. Well, what we can do is scroll up to the top and take a look at the Definition Mode. So when we look at the Definition Mode it just gives us very clear definitions of each different category within our menu. So you have Types, so again, we can have a standard button, you can have an animated button, you can have an icon/an icon only, or an icon with a label. And again, you have the same for the Groups so you can group, you know, existing buttons together. You can group buttons that are just icons and so on and so forth. Then you have states, variations, and you also have Group Variations as well because don't forget, you can group all different kinds of buttons together. So it's really interesting, and you can very clearly see what this documentation's providing. You can just toggle that on and off. And, of course, you can toggle the example code on and off right here. Very clean, very simple, but, however, different components have different options available to them. So for example they can have different Types, they can have different States, different Variations and different Groups, and so on and so forth. Some don't even have a few of those options. And also with the Form component you have Elements, so if you take a look at the definition mode you'll be able to see that you can apply this particular component to different mark-up elements, so for example you have the Field, then you have a Text Area, a checkbox, and so on and so forth. So again it's all about going through this and clearly finding out what information you need. Now the documentation does change a little bit when we move on down to the Modules. Let's take a look at the Accordion, first of all. So the reason why the documentation page has changed its layout is because we need more information for our module. Now you can see here that we have the Definition tab but we don't have the definition mode up here, so we can't toggle that on and off. But you can see here that we still have the left hand side navigation giving us our options. So you have Types, Variations, and with some modules you have more options, such as states and so forth. And you can see here with the Types that I get a clear explanation of the different types in plain English. And I can also view the code again to generate that example that I see. And then I can see the Variations, and so forth. Then we have the Examples tab, so the Examples tab is a lot like experimentation where I can see what's possible with this module. For example, I can nest the Accordion inside of itself, or, I could nest form elements inside of the Accordion. Then also you have the Usage tab. The Usage tab is to do with Semantic and the API it plugs into with jQuery, so jQuery is obviously the main library, but then Semantic is plugging into the jQuery library. And then we can start to use the methods that Semantic UI gives us. For example I can target an element using the jQuery selection engine, and then I can run a method of accordion. And it will just generate an accordion for me, as long as the markup is correct. If the markup isn't correct, it's going to give me an error. And you can see here that we have a Behaviors section. So this allows me to change the behavior of the module. For example, what I could do is use the open behavior for example, and you can see a usage case right here. But let's take a look at the open behavior. So if I was to, let's say, click on this link right here it has nothing to do with the accordion currently but what if I said I want to click on this button and I want it to open up the second section within my accordion. Well that's what you do with your behaviors. So when I say, when I click on this link, I want to target the specific element. And then I'm gonna run the accordion method, and then we're gonna change the behavior of that accordion, and we're gonna open up a specific section, we're gonna give it the Index. So, the index is referring to which section? So, is it this section, that section, or that section? Just like so. And so, it's real nice, it's real simple. And of course you have close and also toggle so if it's currently closed it's gonna open. And if it's currently open it's gonna close it. Then also you have the Settings. So the Settings is again to do with the JavaScript. So for example you have the duration, so currently, by default, it's set to 500 milliseconds. And if I was to set it to 1,000 milliseconds, it means the opening and closing of these sections would take longer. Or I could set it to 200 milliseconds and it will be even snappier than it is now. Then also you have the exclusive setting so by default it's set to true but if I set it to false it will allow me to open up multiple sections at one time, which you can see here that the exclusive setting is set to true because I can only open up one section at a time. Whereas if I set it to false I'll be able to open up all of these sections at one specific time. And again you have collapsible, which says that if you set this setting to false, it will require an accordion to always have a section open, which currently it doesn't because I can close all of the sections. And then you have easing, so you can have nice easing on the animation. Then also you have Callbacks to deal with user interaction. So for example, if a user opens up a section, I can say right, well if you open up a section, then I can bring an alert dialog box up, and so on and so forth. Then also you have the DOM Settings which will allow us to change the way the module should interface or communicate with the DOM. So for example, we have the namespace which for this module is the accordion and this makes sure the module teardown does not effect other events attached to an element. Then we have the selector DOM setting, so right here you can see that the title we are going to target the class title for the content we're gonna target the class content. So, if you actually view the definition, and let's view the code, right here you can see that we have the class, right here, title. So this is gonna be the main title, running along the top. And then this part right here is going to be another div element. And it's going to have the class of content. So that's the whole idea behind the DOM settings right there for this particular module. And then finally you also have the class name which allows you to define some of the class names for certain states. So for example, we have the active state, which as you saw right there, we have the class active. And also the class active right there on the title so if you view the example you can clearly see that this is active and because of that class we can then style it to make it look active which it is by default but I could change that class name if I didn't want to use active. I could say on or whatever I wanted, so that's what we can do with those DOM settings then also you have your debug settings with your modules and it's very, very important that you use your debug settings in large projects because a lot of things can go wrong. So you have the name, which, by default, is the accordion, so you know which module is what. And down here you can see we have arrows, which is one you're gonna be working with the most if you have any troubles. And so you have the method error, which means that the method you've called is not defined. So if I go ahead and take a look at usage right here, I would need to check my method name and make sure that I have spelt it correctly. Then also you have the not found error, and this will say if it didn't manage to find the element that you're looking for, so this element right here, I know that okay, I might have spelt something wrong right there or I might be using the wrong syntax. So that's what's happening right there with the Settings and that's basically the layout for the module documentation. So thank you for watching me in this lesson and please join me in the next lesson where we'll take a look at setting up the workspace.

Back to the top