7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.1 Set Up the JavaScript Project

Hello everyone, I am Reggie Dawson. Welcome to the Semantic UI Framework in JavaScript Projects course for Tuts+. Now that we understand how to set up and use Semantic, now we will create some projects using the framework. Now these won't be full-featured projects, and instead an example of the quick prototypes that you can create with Semantic. As a result, it will not be difficult to flesh out these projects later on, and add all of the features that you want. The first project we are going to build will use plain JavaScript. We will build a one-page template for a digital agency. One-page sites are really popular these days, especially as a way to quickly showcase what a company is all about. Since Semantic comes with so many components, it makes it a perfect platform for this kind of project. The first thing we need to do is install Semantic and set up our project. Navigate to the folder where you wanna create your project. Of course, you have to have Node installed, because we're going to use npm. This will install Semantic, and then after that, the Semantic configuration tool will run. This time, we will just choose automatic to install Semantic with the default options. After that, select Yes to indicate that this is your project folder. Then, click Enter to install Semantic into the semantic folder inside of our project. Now after that we will install jQuery. Now we could have used it from a CDN, but I prefer to have jQuery as part of my project. Now also bear in mind if you didn't install Gulp already, you will need it to compile Semantic. Now before we compile the Semantic files, we will first make some changes to the less files themselves. Now even though you may not be familiar with less, it should be easy to follow what we are going to do. We might be going back to the list files as we build our project. But for now we will make some changes that we will use to configure the menu bar and a hero area for our project. Remember before I mentioned that we have the site folder and our Semantic folder that holds our customizations that we add for our site? Again, this behaves as a child theme of sorts, and any changes we make here will take precedent over any existing theme styles. Now you may be used to writing CSS files in their own file, but there's a little trick to it in Semantic. If we are adding a style to a standard element such as a paragraph or header, then we can just add a style inside of the CSS file. If you are trying to style a Semantic element, then you will need to add it in your styles in the site folder. Keep that in mind as you use Semantic. First, let's go over to the menu.overrides file, which is in the collections folder in our site folder. Now if we're changing a variable, we can add them to the variables file. If we are adding styles, we use the overrides. Now I want to remove the background from the menu bar, so it will be transparent. In this case, I wanted to change something with the menu bars. So first I looked at the menu less file in the definitions folder and found the style with the background property. This ended up being the UI menu inverted class. After that all I have to do is add this class to the menu.override file in the site folder. Incidentally I chose the ui.inverted.menu, because it is a shorthand way for me to apply styles that work well with a dark background. After that we can go through the segments overrides file in the elements folder of the site folder. This time I want to style my segment element, but I only want it to apply to this one. The change I just added to the inverted menu bar will apply to all inverted menu bars. I'm not worried about my menu bar, because I'll only have one. But I may need to add more segments. All we have to do to make this work is add our own selector. The my-blurb selector is what I added to the segment. This will only apply to a segment that has the my-blurb class. We set up this segment to have a transparent background and no border. Next we will go to the button override file that is also in the elements folder. Again we add our own selector so the style doesn't apply to all buttons. All we are doing here is changing the background of the button to match our branding. After that, let's go over to the header.overrides file also in the elements folder. Here we create a selector from our header, set the font size, and then change the display to inline. This is so we can display two headings side by side. The default behavior is to add a page break between two headings. Then in the brand color selector we use the Yellowtail font that we are going to import in our CSS file. Then we set the brand color. Then finally, we will go to the site variables file in the globals folder, again in the site folder. This time, we will set one variable for our font. Semantic has a way to directly import a Google font as the font of your project. All you have to do is supply the Google font name as a font name variable. This imports the Ubuntu font for us. After that, save your project. And then navigate into the semantic folder inside of your project folder in a command line. Of course, we are going to use Gulp to compile our files but it takes a little bit to compile and copy the files to the disk folder. As long as we are making our changes like we did, this won't be a problem. But what if we wanna see our changes as we make them? If you want Gulp to watch your less files and compile when you save, run Gulp watch. Now we haven't made any changes or compiled our project, so there's nothing for Gulp to watch for. So first we will need to run Gulp build. I just wanted to show you the Gulp watch command. Now when we run this command, the files will be compiled to the disk folder. Once that is finished, create a file called index.html in the root of the project folder. In this file we add the script references for jQuery and Semantic UI. We also add a reference to a custom CSS file we will add in the next video. After that our project is ready to go. In the next video we will add our menu and our hero area to our project.

Back to the top