Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Theming in Semantic UI

Hello, everyone. I am Reggie Dawson. Welcome to the Semantic UI framework and JavaScript projects course with Tuts+. One of the problems that often plagues CSS frameworks is that the components all look the same. Without any customization, you can instantly spot a site built with Bootstrap for example. Semantic will still need a lot of customization but it is not as difficult to do with Semantic due to themes. Themes are a way to incorporate wholesale changes to the Semantic elements, through a theme.config file. Before we get into themes, let's take a look at the Semantic files that we installed in the last video. Now note modules is where the packages we installed through MPM are located. Then inside of the dist folder which is inside of the semantic folder, we find the files that we referenced from our HTML file. This represents the final form of the Semantic files for our use with our project. But, as you will see in a moment, we have an impact on what styles these files have. Now, we won't concern ourselves with tasks, and instead we'll focus on the src folder. This represents that Semantic library in its pre-compiled state. We are using the version of Semantic based on less so the files in the source file are all less files. Less is a pre-processor language that has to be compiled to plain CSS before we can use it. The advantage of less is that, it allows you to use programming features, such as variables, with files that will be compiled to plain CSS. The definitions folder holds the actual file that make up the different components of Semantic. Behaviors just had some JavaScript files that Semantic uses. Collections, elements, globals, modules and view hold the styles that configure the various components that we can use with Semantic. Now if we look at one of these files, we can get an idea of how each of these components is configured. Anything you see preceded with an @ symbol are actually variables that are configured elsewhere. You will see where these variables are set up in a moment. When we run the gulp build command, we are actually compiling to CSS and making Semantic UI available to be used in our project. Then we have the siteorder where we can place any override or variables who wanna customize for any of our components. This way any changes we make will not affect the base Semantic styles and themes. This is where we should override any styles as opposed to directly to the definitions or theme files. We are free to customize as much as we like without worrying about messing up Semantic content. Then the themes folder holds the various things that we can use for our site. Themes offer a way to alter the styles of our project quickly. These are not only different color schemes depending on the theme you select, but also completely different styling. The thing to remember is that not all themes apply to all elements so you may have to mix and match themes that you want to use. Now if that's a bit confusing, don't worry, you will understand better in a moment. Then we look at the default theme, we can see the settings for Semantic as it is presently configure. Assets are any funds or images that go along with the theme. Collections, elements, modules and views are the different components that we can use with thus Semantic project. Globals hold site variables Here we can see, all of the variables available to us and used by our theme. If we like, we can override these variables by making a change to our site variables file in our site folder. Remember, that is the folder that we should use to override our settings. That way we can use the Semantic files alone and make changes in our custom site variables file. Also, each component will have their own individual variables file with their own variables that you can use to customize the individual components. Again, you shouldn't make any changes here, and instead, should perform them inside of your site folder. Now, if you're unsure what variable effects what component, we can always look directly at the component in our theme folder. For example, the button uses as a background variable which is set to the background color that is set just above it. If we need to override the button, we should do this in the site folder. Now the last file we will look at is the theme config file in the root of the theme folder. This folder controls what theme applies to what component. Now remember each theme only applies to select components. So choosing a theme for a component that doesn't have styles for it, will result in the default styles being used. We can look at our themes to determine what elements the theme affects. If we look at the Amazon theme in our project, we see button variables and overrides as well as some site variables. From this,we can assume that the Amazon theme will only effect the buttons and provide a few sight changes. Therefore, in the theme config file, we can change the button to the Amazon theme. Lets also change the site theme to material. Now I've created a simple HTML page to display our buttons, some headers and a little bit of paragraph text. Don't worry about how we set these up, we will get into using the components in upcoming videos. For now, notice how the site looks with the default settings. Now that I've saved the changes to my theme file, I'm going to navigate back to my project in a command line. Here we're going to gulp build again to rebuild our project. Then if we go back to our page and refresh, we will see that the style of our button has changed. You may also notice that the styling of the text has changed a little bit as well. That is because the material theme comes with some different styles for our site variables. This affects things like the way headers, fonts, and spacing our configure. The last thing to understand about themes is the hierarchy of styles that affect the component. First and foremost, a component will use default styles if no other styles have been assigned to it. These defaults can be overriden by styles configure in our themes. The styles that take president over all others are those we placed in our sight folder. The best way to understand how the sight folder works is that is it basically a chop out theme if your familiar with word press. This means we can use any of the other styles available to use and override only the things we wanna change. To see this in effect, let's go to our site folder, and then to the elements folder, and then to our button variables folder. Here, we are going to add a background color variable. After that, I will save, and then I will run gulp build. Now after our project has been compiled, if we go back to our page and refresh, the button is now the color that we set it to, regardless of the styles that had been applied from the Amazon theme. You should now understanding theming in Semantic UI. This flexible system allows you to customize your site quickly, so you can avoid cookie cutter sites. In the next video, we will get started by looking at some of the collection components that are offered in Semantic UI.

Back to the top