In this course, you will learn the ins-and-outs of Semantic UI, a natural language alternative to Bootstrap. You will walkthrough all the Semantic UI components including real-world examples of how to implement them on a website.
Building a response UI can be tricky at times. Often times, after it's complete, the markup is difficult to read. Semantic UI is a framework that aims at beautiful, responsive layouts using human-friendly HTML. In this course, Semantic UI 2.0, you'll learn how to style your HTML using natural language concepts such as word order, or noun/modifier relationships. First, you'll learn why you would want to use Semantic UI, how it approaches styling and responsiveness. Next, you'll learn about the 6 Semantic "Collections" (Breadcrumbs, Forms, Grids, Menus, Messages, and Tables) and you'll integrate them into your demo application. Finally, you'll learn about the Semantic API, which allows developers to use their controls to interact with data on the server and not just data that is already stored client side. After finishing this course, you'll have the knowledge to use Semantic UI 2.0 in order to help you develop more consistent, readable, styling for your HTML.
Why Semantic UI? Hi. Thanks for watching Semantic UI 2. 0. I'm Nate Taylor. We'll get you into what makes Semantic UI impressive in a couple of minutes, but before we do, are you A developer who enjoys making applications, but often struggles with layout and design? Does your website look like it was designed before the advent of CSS? Would your dream job be to do all of the application logic and then turn it over to another developer to nail down the pixel perfect layout? Then Semantic UI is for you. Do your websites look like this? It has all the right information, it shows the description of the event, the ratings, the comments from people who have visited the event, but it's messy, it doesn't pass the eye test. People who land on this page are likely to bounce off the site and find their information elsewhere. What if instead we could make our application look like this? Again, it has the same information, but it's presented in a much nicer way. It looks like a real website, something that was done by a professional team. I can almost hear what you're saying, it sounds like, yeah Nate, that second site looks better, but I don't have time to tweak and adjust to make it look perfect, and even if I did I wouldn't know where to start. That's where Semantic UI is going to come in and help. From their website, Semantic UI defines itself as a development framework that helps create beautiful, responsive layouts using human-friendly HTML. My goal for this course is to get you comfortable with Semantic UI. At the end of this course, you should have a good understanding of the basic Semantic concepts and building blocks, good enough that you should be able to implement Semantic on your website, instantly improving the look, feel, and interaction of your application. To do that, you are I are going to be on a hypothetical team. Our team is building a rating and review application. We want to let users rate an event that they attended and provide feedback about it. We'll learn more about the application as we go through the course making feature enhancements.
Semantic UI Elements In this module we're going to look at the most basic building blocks of Semantic UI, Elements. However, we're not going to do that by just discussing each element. Instead, we're going to start overhauling a website. The first part of the website that we're going to overhaul will look like this. You probably recognize it as our before image from the first module. Keep in mind we're not going to apply all elements to this page, as that's pretty unrealistic. Most pages on your applications will not contain all the Semantic elements because the page will quickly look too busy and covered in too many distracting elements. But just because we won't be using all the elements on this page, doesn't mean we won't look at each element, It simply means that we won't be implementing some on our sample page. Here's a list of all the elements in Semantic 2. 0 that we'll be covering in this module: Containers, Segments, Buttons, Icons, Flags, Images, Inputs, Labels, Lists, Dividers, Headers, Loaders, Rails, Reveal, and Steps. There will be a clip for each element, and this will allow you to come back to the video at any point in time to look at a specific element without trying to hunt through the whole video for the part you need. Throughout this course, I'll be using codepen. io for the types, states, and variations of the Semantic UI components. It'll allow us to see the HTML and the output side by side. So, let's get started.
Semantic UI Collections In this module, we're going to move past elements and into collections. As we saw in the last module, collections are defined by Semantic UI as heterogeneous groups of components which are usually found together. They describe a list of "usual suspects" which appear in a certain context. Think of the common parts of your application. Oftentimes you'll have forms and menus, and grids. Occasionally you might see data displayed in a table form. Each of these is an example of a collection. In Semantic UI there are six types of collections. They are Message, Form, Menu, Grid, Breadcrumb, Table. In this module, we'll take a look at each of these type of collections. I imagine Chocolate Chip will want us to implement at least a couple of them in our application to clean up how it looks. In addition to collections building off of elements, they have some of the same concepts as well. Most of the collections we'll look at will have Types, States, Content, and Variations. In fact, we'll see more content with collections than we did with elements, and that makes sense, because part of what makes a collection is the content inside of it. As we did with elements, we'll make each collection its own clip. This way you can use the clips as a reference later, for example, if you want to come back and look at menus once again. Alright, let's get started.
Semantic UI Views At this point we've turned the corner, and have started down the home stretch. We've seen Semantic's componentized approach to styling, and we've seen how variations and types apply across components. Now we're getting to see how to put all those pieces together. In this module, we're going to look at Semantic UI views. Remember, in Semantic, a view is a convention for presenting specific types of content that is usually consistent across a website. Think of a blog that has a section at the bottom where you can leave a comment. Each place on that blog that you can leave a comment has the same look and feel. In Semantic's lingo, that is s view. Semantic has six views out-of-the-box. These are Comment, Card, Feed, Advertisement, Item, and Statistic. In this module, we'll again have a clip for each view. We'll also take a look at implementing a few of these views on our website. Our current page is just about complete, so we'll take a look at some other pages that would exist in an application like this one.
Semantic UI Modules Up until this point we've been focusing on using Semantic components to impact the look of our application. The focus has been almost exclusively on CSS styles, but an application needs more than just consistent styles. In order to be useful, it needs to have the controls on its screen behave in a consistent way. That's what we're going to focus on in this module. Semantic modules are components that include both a definition of how they appear and how they behave. These include components like accordions, dropdowns, and popups. Modules control both the look and behavior of a component. Modules have some of the same definition as other components, such as types, states, and variations, but they also have behaviors, for example, you can show or hide the component. There are also settings. These have more of an impact on how the component interacts with the user, for example, on a popup you're able to configure what event triggers the popup. The default is hover, but if you wanted to fire that popup on click, you could configure it. If you remember back to the first module of this course, we talked about the mantra of Semantic UI, which is everything arbitrary is mutable. This becomes very powerful as it gives us incredible control over our components. There are 15 different modules, and they are accordion, checkbox, dimmer, dropdown, embed, modal, popup, progress, rating, shape, sidebar, sticky, tab, transition, and search. As with elements, collections, and views, we'll look at each of these modules in their own clip. I'm sure there will be some feature requests that come in from Chip, and we'll use those to upgrade our application. Once we're done with this module, we'll cover all the components of Semantic UI. Let's get started by looking at accordions in the next clip.