1. Introduction

1.1 Introduction

As a web developer you often have a lot of choices to make. One of these choices is how you will construct the user interface of your site or app. Everyone knows about popular libraries like Bootstrap or Foundation, but that often leads to cookie cutter sites when components aren't customized. Semantic UI is a CSS framework built on less. It is notable because it lives up to its name. Using Semantic components is like writing a sentence. Semantic offers all of the components and features you would expect, along with a lot more you didn't see coming. In this course we'll briefly go over the Semantic components, then we build three projects using the framework. First we build a small template with plain JavaScript, HTML, and CSS. Then we will use React to build a small clone of GitHub. Then finally, we will employ Angular 2 with Semantic to build a KickStarter clone. After this course you should understand how to use Semantic UI in your projects going forward.

2. Get Started with Semantic UI

2.1 What Is Semantic UI?

Hello, everyone, I am Reggie Dawson. Welcome to the Semantic UI Framework and JavaScript Projects course for Tuts+. Now you may be wondering exactly what Semantic UI is. It is a lightweight framework that provides the UI to build your cider app. Since it is similar to Bootstrap or Foundation, you may be thinking, why do we need another HTML framework? Well, there are a few reasons that you should take a look at Semantic UI. The first reason is that it's, well, Semantic, where other frameworks give you cryptic classes for rows and columns for example, Semantic classes use natural language. As a result Semantic is easy to pick up. The second reason I like Semantic is that it includes more components than any other framework that I have seen. Many times more is not always better, but with Semantic they have thought of everything that a developer might need. For example, let's say you are building a social media ad. Semantic comes with a feed component that allows you to set up a social media feed quickly, instead of worrying about styling the feed, everything is set up for you already. The third reason to use Semantic are the existing and pending integrations with other frameworks. Bindings for popular frameworks such as Meteor, Amber, React, and Angular exist that let you easily incorporate Semantic into your project. Unfortunately a version does not yet exist for Angular 2, but this is not a deal breaker since it is not difficult to incorporate Semantic UI. Now before we can look at how Semantic works, we first need to install the framework. We can download a plain CSS version or use the CDN to access Semantic. The CDN version is nice in that we can import the entire framework or just the components we need. In addition to the CSS and JavaScript files of Semantic, you'll also need to import jQuery which Semantic requires. Now for me, the MPM install of Semantic is the way to go, as you have access to the build tools of Semantic. This gives you the advantage of being able to customize the CSS styles of Semantic. Of course, since we are using MPM, we first need to have Node JS installed. Navigate to your project folder, now running this command will install Semantic UI to your project and generate a package.json file. After Semantic is installed, the Semantic configuration tool will run. First we have the option to choose what kind of set up we want. Automatic will set up everything with default and custom will allow you to customize everything about your Semantic install. We will choose express, which will let us choose the components we want and select our output folder. First it will ask if this is our project folder which it is, so we will choose yes. Then it will ask us where we want to install the Semantic package, we will leave this at the default. Then we are presented with the listing of the components that we can include in our project. We can select or deselect them with the space bar. This way we can include only the components that we need instead of importing the entire framework. Then you will be prompted whether or not you need to set permissions on files or use a right to left language. We will leave both of these set to no. Then finally it will prompt you where to output the Semantic files. Once we are done installing, we will run Gulp to build Semantic and this is where it will be compiled to, we will leave this set to the default as well. Once that's finished, let's navigate into the Semantic folder. Now if you don't have Gulp installed, you will need to do so now. This command will install Gulp globally. After we have Gulp, we will run Gulp Build. This will compile the Semantic files and move them to the folder we selected as the output when we set up Semantic. After that, we simply add script references to our HTML files to include Semantic. As you can see I've also included jQuery which I haven't installed yet, but is also required for Semantic. You now know how to install Semantic. For every way we use Semantic in this course, we will need to install Semantic. Now that you know how the install works, you should feel more comfortable integrating Semantic with other frameworks. In the next video we will look at the theming options of Semantic.