The web site of jiawp

Building Websites with Skeleton CSS

Setting up the Project Introduction Hello, and welcome to his module, where we're going to first do a quick overview of the project we will be creating throughout this course, along with what we will be learning, and then set up a quick development environment and integrate the Skeleton CSS boilerplate, all backed by the Gulp JavaScript task runner. Now first, you may be wondering what Skeleton CSS is and how it differs from CSS frameworks like Bootstrap or Foundation. Well, Skeleton is a very simple, lightweight, responsive boilerplate. It's less than 400 lines of CSS and contains only what you absolutely need to create quick prototypes or really lightweight projects, such as simple landing pages. Now the benefit to using Skeleton over other comprehensive CSS frameworks are very little setup, it's small in file size, and it's easy to understand. Now throughout this course, we're going to learn how to utilize Skeleton's 12-colulmn grid system, typography, buttons and forms, and utilities. While learning all of this, we will design this simple landing page. We'll take it from more of a prototype to a fully finished and polished project as seen here. And in doing so, you're likely to discover that with Skeleton, less is sometimes more, especially when you use it for prototypes in other simple projects. So, let's get started in the next lesson by taking a look at Skeleton itself.

Skeleton Project Structure To get started with Skeleton, visit getskeleton.com. This page provides you with an introduction, a usage documentation, and examples. As you can see, it's small enough to stick on a single landing page. Now to download Skeleton, click on the Download button at the top right here. In the ZIP, all we have is an index.html file, a css folder, and an images folder. Yes, it really is that simple. Now I'm going to extract these three files and folders to a folder on my desktop, though you don't have to perform this step. I've opened up this folder in my code editor, which is Visual Studio Code. Now inside of the css folder, we have a skeleton.css. Now this is the core of the Skeleton boilerplate. There's also a copy of normalize.css. This provides better cross- browser consistency, though it's not up to date with the latest version, so we won't be using this particular copy. Now if we open up index.html, we'll see that it's a standard index page with both skeleton.css and normalize right here that is included. Now if we open up skeleton.css again, we'll see that the earlier claim that it's only around 400 lines of code holds true. The table of contents outlines everything in a nice and easy-to- understand format should you want to examine or modify any rule sets. Now you could take this index.html file and begin to create your prototype or your simple project right off the bat. That's all there is to it. But regardless of the size and scope of a given project, I always prefer to work with a JavaScript task runner such as Gulp, which will, at the very least, allow me to integrate live browser reloading as I code, which makes life a little bit easier when developing a prototype or layout. So in the next video, we're going to get started by creating a really quick development environment with the Gulp task runner.

Starting the Project Open up your console or command line. I'm using a console emulator for Windows called cmder, or c-m-d-e-r. Now let's create a new folder which will serve as the project folder that we're going to be working in for the remainder of this course. I'm going to call it skeleton and then hop inside of it. Now next, we need to use the Node package manager, or npm, to install two packages. Now to check whether or not you have npm, run the following command, npm -v. Now if this goes unrecognized, you need to visit nodejs.org. We'll click on Downloads, and then depending on your operating system, choose either Windows, Mac and go ahead and install it. And once complete, you can open it up, and then just follow along through the steps all the way to the end, and we'll notice that the npm, or Node package manager, will be installed once you hit Next. Now I'm not going to install it because I already have that done, but once it's complete, go ahead and reload your console, and you'll be able to run the npm -v command, and at which point it should show you a version number right here. Now first, we're going to run the npm init command. This will generate a package.json file in our project folder. Now this file serves as a configuration for your project, which will take note of any dependencies that your project relies on. So npm init, and it's going to ask you a series of questions such as the package name. I'm just going to hit enter for all of these. Okay, great. So we're going to use npm now to install the Gulp task runner and another package called Browsersync, which enables live browser reloading. This means while we're creating our layout, anytime we save our CSS or HTML files, our browser will automatically refresh for us. So the command to run is npm install gulp, and then --save-dev. And adding this flag means it's going to save it as a development dependency in our package.json file. Once complete, let's also run npm install browser-sync, and save it as a dev dependency, as well. Now note, you could run a single command to install both of these just by running npm install gulp browser-sync, and then save it as a dev dependency. Okay, great. In the next video, we're going to open up our code editor and finish setting up our development environment.

Configuring the Gulp Task Runner I have the new project folder open in my code editor, and for now it consists of a package.json file, and notice under devDependencies, we have the two packages that we installed, along with their version numbers. Now these two packages are also found within the node_modules folder, along with their associated dependencies, of which there are many. Now on the left here, I have the skeleton folder that we just created, and on the right, I have the Skeleton ZIP file that we downloaded earlier. Now I'm going to select these three right here, the index and the two folders, and I'm going to simply drag them into the skeleton folder. And as we can see, they're all here in the skeleton project folder. Now remember when I said that the version of normalize used is outdated? Let's go ahead and fix that real quick. Now if you go to Google and type in normalize css, you'll find this result right here, and we can click on Download version 7. I'm going to hit Ctrl+A to select all, and then Ctrl+C to copy. We'll go back here to our code editor, and in normalize, I'm going to hit Ctrl+A to select all, and then simply Ctrl+V to paste in the new version. All right, so we'll go ahead and save that. So now we need to create a file named gulpfile.js in the project folder. So gulpfile.js, and first we have to define two variables that are bound to the two packages that we installed via npm. So first we're going to name this variable gulp, and we'll say require gulp. Next we'll create one called browserSync = require browser-sync, and we'll use the create method. Then we create a task using the gulp.task method, and we're going to name it serve. And inside of here, we're going to call a function, which will tell it to do something once this task is called. So first we reference browserSync.init, or to start a server in the project root, just like that. Next, we're going to reference gulp.watch, and this will watch any files that we specify in an array. So inside of here, we're going to put in any file that is html in the project root, and then also any css file inside of the css folder, just like that. Then at the end, we're going to call the on method on change, or if it's updated or saved, we're going to call browserSync.reload. So once again, all this means is once the Gulp task of serve is run, and/or it's called, it's going to start a server at localhost:3000, and then it's also going to watch any html file and any css file within the css folder, and if they change it's going to call browserSync.reload. Now we're not done just yet. We have one more line. We're going to call gulp.task, and the default task we're going to set as serve. So now if we go back to the console and type in gulp, we'll see now that we have our localhost:3000 with the default index.html that's generated from Skeleton CSS. So now if we make any change, let's say to the index.html file, or any of the CSS files within the css folder, the browser will reload automatically, reflecting the changes that we made. So just to show you real quick, I'm going to click on the index.html. I'm going to hit Ctrl+B to hide that sidebar, we'll come down here and let's just change Basic Page to Other Page. We'll hit Ctrl+S to save, and there you go, it saves automatically. Now the last order of business is to include a custom CSS file, which will house all of our custom CSS rule sets going forward. So let's come up here at the top of our index.html file. I'm just going to copy here, and paste in this line, and change skeleton.css to main.css. We'll save it, and inside of here, we'll create a new file called main.css. All right, great. So now that our development environment is set up and ready to go, in the next module we're going to learn how to use the Skeleton grid system.

The Grid Grid Basics The grid has become a staple of front-end development, as it helps you structure a layout in terms of columns. Skeleton's grid system is based on 12 columns. Now the process of establishing a column requires first defining a div class of row, then your column divs should be the immediate child nested inside of the row class. For the column divs, the class attribute consists of 2 different elements, first the number of columns specified as being 1 through 12, and second, the column or columns class. You can add as many columns as you wish, as long as they add up to 12. So let's give this a shot in our project that we set up from the previous module. Let's visit our index.html file, and we're going to get rid of everything here between the body tags. First, we're going to put a div of class container, which gives us a fixed-width container for our layout. Next, inside, we're going to put our div class of row, and then next we're going to put in a div class of one column, and because we're using one, we use singular column, not plural. And I'll just put in col here in the middle. Now I'm going to use here in Visual Studio Code Shift+Alt and the down arrow key, and this will give us 12 columns. And so that we can actually see the columns, let's also go to our css, main.css file, and I'm going to reference both the column and, plural, the columns class, give it a background of lightgray, and a height of, let's say, 500 pixels. All right, we'll save it and go back to our browser. Okay, so now we can actually see the columns, and the whitespace between are the gutters. Content cannot actually reside inside of these gutters. They're there simple to give us whitespace to separate the content within our columns. Now if we drag this layout in, we can see that the columns and gutters respectively are based on a percentage up until a smaller viewport. And this is by design, as you generally do not want a lot of columns floating with each other on such a small device. Going back, let's go back to our index.html file, and let's transform this into a two-column layout. So let's go ahead and get rid of everything, with exception to two columns, and we'll add, this one we're going to rename to three, and we're going to change column to columns, plural. And then also, remember it needs to add up to 12, so we'll change this here to nine and make column plural. Let's save, and there we go. Let's also try adding three columns. So going back, we'll go ahead, copy this, paste it. We'll change this to =three columns, so we'll make this four, we'll save it, and go back once again. And there you go. Now outside of utilizing 1 through 12 to structure your layout, Skeleton also provides a few shorthand column widths. You can use one-third, two-thirds, and one-half column widths, so let's give it a try. We'll go ahead and remove this third column, and we'll change this here from four to one-third, we use singular for columns, and this will be two-thirds, and singular columns, once again. And there you go. You can see it works, and by the way, everything will still respond just as we were using the 1 through 12 class names. And then finally, let's try one more, and we'll change this to one-half, as well as the other to one-half. All right, great. So by now, you should have a pretty solid understanding of how to structure basic grid systems with Skeleton, but I want to show you one more thing real quickly. Going back to our index.html, notice this div class of container. Well, what will happen if we remove it? I'll save, and we'll go back. All right, so what happened by removing the container class, we've just transformed our centered, fixed-width layout to a 100% fluid layout in which the columns still behave the same. So we can drag this in, and you can see they behave exactly the same as before. Now sometimes you may find it preferable to use a fluid layout as opposed to a fixed-width layout. But for the layout that we're going to develop throughout this course, we're going to leave the container class in. So let's backup with Ctrl+Z just a couple times and save it. In the next video, we're going to examine grid offsets.

Offsets At times, when structuring your grid columns, you may want to control the amount of whitespace between each column instead of relying on the default gutter width. In these times, you can use grid offsets. You can offset a particular grid column from 1 column to 11. To structure an offset, you add a class of offset-by, and then the number of columns. Skeleton also provides shorthand offset classes of offset by one-third, two-thirds, and one-half. The number denoted by the offset in the number of columns should collectively add up to 12 columns for the grid system to work properly. So let's give offsets a shot in our project. Let's change our one-half column to four, make it plural, and then let's make this one here five columns. Now 4 + 5 is just 9, but let's say, for instance, based on the layout we're creating, we want to push over to the right this second column here, we can use an offset. So we'll put in offset-by, and we'll say three. Let's save, and as you can see, our right column has been offset by three columns. Now you can of course utilize offsets with more than just two columns, so let's make some adjustments to add a third column, and also use an offset. So let's change four to two. We'll copy this line up here, and paste it, and then save. And there we go. Finally, let's utilize one more example using the offset shorthand classes. This time let's utilize a single column with an offset. We'll remove the bottom two columns, and we'll change this here to two-thirds. We'll change this to singular, and then offset-by-one-third. We'll save, and there we go. We now have a column that is two-thirds long, but also offset by one-third. All right, so by combining grid offsets with columns, you're able to control your column layout even further. So in the next video, we're going to take a look at responsive adjustments.

Responsive Adjustments By default, the container class in Skeleton is based on a CSS max width property of 960 pixels. We can override this property with our own value to control the width of the container class. So let's restructure our columns real quickly to demonstrate this. So let's go ahead, I'm going to gut everything here, and I'm going to put in two columns, and I will use the shorthand Shift+Alt and down to replicate this line, and we'll make this one ten columns. Now let's go ahead to our skeleton.css file. We'll go back up here just to the top at the grid, and we'll note the line that mentions its max width of 960 pixels in the container class ruleset. What if we wanted to make this larger? Well, let's go ahead and override it our main.css file. We reference container, max-width, and we'll make it 1200 pixels. Now before we save it, I want to show you the current result versus the result after saving main.css. And we can see where it is currently at based on a 960-pixel container. Just reference where this end line right here is in relation to this little bookmark icon. So we'll go back, we'll save, and now we can see it did definitely extend. We can even go back and change this to something that's much more small, and we'll see that it works, and the grid will behave normally. So let's go back, and let's remove this override. We're going to stick with the typical 960 container width. Now another common practice is adjusting the column width based on the viewport width. Being that Skeleton is such a simple, lightweight boilerplate, there are no classes for controlling this behavior, but we can still create our own classes as needed. So going back to our index.html, let's say for instance that for whatever reason, we want our two columns to stack sooner, so let's go ahead and copy this row class right here. We'll paste it, and then let's add a custom CSS class on the top row columns. So after our columns class, we'll add smaller-than-tablet-stacked. We'll copy this, and paste it on this one, as well. Now referring back to our skeleton.css, if we go all the way to the bottom we'll see that we have a Media Queries section. So notice where it says 550 pixels right here. Well, that's where the grid becomes active, or the columns stacked. Now if we want them to stack sooner, we could copy the Larger than tablet media query right here, and go back to our main.css. We'll paste this in, but we don't want them to stack on tablet sizes and larger, but rather the reverse. So we can change this comment from Larger than to Smaller, and then in the media query we're going to change min-width to max-width. Inside of here is where we can reference our custom CSS class that we created earlier, smaller-than-tablet-stacked, and we'll change the width to 100%, important to override, and margin-left:0 to get rid of any gutters. So let's save this and check out the browser. So at the top, we can see our first two columns with our custom class added, as well as the bottom right here with them removed. So if we drag this in, we'll see that the top stacks sooner than the bottom. Notice the bottom are not stacked anymore. So if we go all the way, we'll see that the behavior is consistent across all of them. This is how you can control responsive adjustments in a custom manner within Skeleton CSS. So now that you have a solid conceptual understanding of the grid in Skeleton, let's gain practice with it by defining a layout for a fictional project.

Using the Grid Let's get started by defining the layout for our fictional landing page project. We're going to use much of what we just learned throughout this module to create a layout prototype. So let's go ahead and visit our index.html, and we're just going to remove everything here within the body tags. Now also, I'm going to hit Ctrl+B on Visual Studio Code just to give ourselves a little bit more room to work with. So starting at the top, we're going to use the header element. Inside we're going to have a div class of container, because remember we are going to stick with a standard fixed-width, centered layout. And then we're going to have a div class of row, and this is going to serve as a logo and a menu. So we're going to have div class of one column because the logo is really small. It's just going to be type-based. So for now, I'm just going to put in logo. I'm not going to add until we get to the typography section. Div class here, well, we have one and we need to get to twelve. So we'll use eleven columns, plural, and also, I'm going to reference this later on in CSS, so to do that I'm just going to add another class called uc. Inside of here, once again, we're not going to add the menu yet, so I'm just going put in menu. So that will be it for our header. Coming down here we're going to have like a main content portion where we have a heading and subheading, as well as an interesting image, div class, we're going to add a container again. And for this particular container later on, we're going to add more padding to separate it from the header and the content beneath it. So we'll put in padding, div class of row because we're going to have columns here, and then a div class of five columns here, and right here in the future, we will have an h1, but for now I'm just going to reference heading/subheading. Then div class, currently have five, so we'll need seven to get to twelve. And inside of here, we're going to have in the future an image of a plate. Continuing on beneath that, we're going to have a div id of purple-container. This entire section will have this purple container with a background image in it. I'm going to put in a div class of cut, and this is something that we're going to reference later on, which will create sort of a diagonal representation of this div, a div class of container, and we're going to add some padding as well, but we're going to be unique, so I'm going to put padding2. Inside of here we'll have a div class of row. Once again, there will be two columns in here. And inside of here we'll have div class of one-half column, and again, this is using the shorthand method. Up here, this time we'll have an image in the first column, and down here, we'll have just some type-based content, which will elaborate more on our fictional service. Finally, we're going to have one more container, so we'll put in a div id of dp-container, this will be something that we reference custom, a div class of container and padding3 this time, and then a div class of row, and then finally, we're just going to put in form for now, and we'll get to this later on in the course. So let's go ahead and save this. And of course, in the browser, this is really quite ugly, which is because we have our custom CSS adding 200 pixels to each column, along with making them gray, and also because we don't yet have any custom styling to some of our classes that we created. So for now, let's go back to our main.css, Ctrl+B, and we're going to go ahead and remove this right here, as well as our media query down there. So let's add simply for now, header, we'll make the background-color a custom code of ECECEC, which is a real light gray, and then padding 12 pixels, 0. Okay, that's much better, but of course nowhere a nice layout. So in the next module, we're going to focus on typography, as well as refining this layout.

Typography Font-sizing Throughout this module, we are going to take a look at typography in Skeleton. Skeleton uses rem units for font sizing. Rem, or root em, is a way of sizing fonts based on the value of the font-size property placed on the root element. Now by default, 1 rem unit is equal to the font size of the HTML element. If unspecified, that usually means it's 16 pixels, as that is the default value for most browsers. If you visit the skeleton.css file, however, the font-size property on the html element is set to 62.5%, which is equal to a base 10-pixel size. Now if we want to modify this, we can either do it here, or copy and paste it into our main.css file. Now before I save this, let's look at what the current type looks like in terms of the font size in our browser. Okay, we'll go back. We'll change this to, let's say we want everything to appear larger, to 80%. We'll save, and then go back and everything has increased just slightly. Now as it stands with the type we currently have on the site, no font size has changed based on the viewport width. Should you want to wait to control the font sizing based on media queries, we can simply adjust our CSS like so. Come down here, we'll put in @media max-width 400px, and we'll reference our html font-size property to 80%. Let's remove this ruleset up here, we'll save it, we'll go back to our browser, and now we can see that it's back to the regular size. However, if we bring this in, you'll see at certain point, everything will increase right there. Now, of course, when you adjust the font-size of the html element, it will affect the font size of all type that is specified in em or rem units. So if this result is unwanted, you can simply use media queries to set the sizing of specific type elements themselves. So for instance, if we go back to our HTML, let's go ahead and define our logo type here. So we'll put in a link, a href, and it won't go anywhere. We'll give it an id that we can later reference of logo, and our fictional project is going to be named good. And we're going to pass in a span so that we can change the color of the next word, which is eats. All right, so let's save this and see what the result looks like currently in the browser. Okay. Now in our main.css file, let's get rid of the underlying of this anchor text, as well as slightly increase the font size. We'll reference header a, text-decoration:none, and font-size:1.8rem units. So we'll save, and go back to our browser, and it has slightly increased, as you can see. However, this is currently overriding, so let's go ahead and get rid of that menu text real quickly. We'll fill this in later. Okay, so now going back to our original point about adjusting the font size of specific elements, we can do so, just as a demonstration, with our new logo element. So if I bring everything in, we'll see that once we get to that certain size, everything goes up in size. Well, let's go ahead and change it so only the logo does. We'll go back to our main.css, and inside of our media query, this time we'll simply reference our header a, font-size, we're going to take from 1.8 to 3rem units. So we'll go ahead and save, and then back in the browser, we'll see once we come in, now just that element is affected. Okay, so we don't really want this behavior for their project, so we'll go ahead and simply just remove it. All right, so now that we know how font sizing works, we're going to take a look at headings and paragraphs, and also begin to add type to our layout.

Headings and Paragraphs When it concerns headings and paragraphs, there's literally only 22 lines of code in Skeleton CSS. There are styles for h1 through h6 headings, a simple media query adjustment, and then a single adjustment on paragraphs that sets margin-top to 0. Our layout has several headings, sub-headings, and paragraphs, so let's write the HTML for those areas of type. I'll hit Ctrl+B to get our sidebar, and we'll go to our index.html. Okay, so the first area that we're going to add type is right here on line 49. We're going to make is an h1 element, and we're going to give it a class of uc, and we're just going to be transforming this class and setting it to uppercase text with text-transform. And we'll put in Absolutely Fantastic Meals. Under here, we'll put a paragraph with a class of subtxt for subtext, and uc as well to make it uppercase, and we'll say So good, you won't want to finish it! Now let's also put in an actual image on the right column, so over here, let's remove this, we're going to put in img src is /images/plate.png. And we'll make an id of plate that we can reference later on, and right now, make sure you download the project files and import the images into the images folder here in our project. By default, this is what it looks like, and I'm just going to put in the three images that we currently have right here. Okay, if you save and head on over to your browser, this is what it should look like, so far at this point. Now real quick, let's go head to our css. We're going to reference that uc class for uppercase. We'll save, and go back to the browser, all right. So next, whenever you want to make custom adjustments to specific type elements, you simply refer to the html element class or id, and then set our CSS properties. Now for this h1, I want it to be really thick, and I want to also make adjustments to the line height so that the three words are closer together, and also push it away from the top just a little bit. So we'll go back to our css, we'll reference h1, we'll put in a font-weight of 900, a line-height of .9em, and a margin-top of 1em. So we'll save this, and you'll also notice that the font weight, it did get a little bit bolder, but not quite as much as I would like. And that's simply because we currently don't have a font weight of 900 for this given font, which is based on Railway. So going back to the index.html, scroll to the top here, and we'll see we have the different weights here. We can add real quickly just 900, save it, and go back to our browser, and there you go. It looks much better this way. Okay, so next we have more type in the middle container portion down here, so let's get to that. So where it says image of donut, we'll put in img element. We'll give it an id of donut, and then for our content, we're going to use an h2 tag this time. Class is going to be uppercase, or uc, and also wt, which we'll define in a little bit, which is for white text, this is going to be on a darker background, Food Genius, and then we'll put a class of wt, as well, to make this text white for this paragraph. Now you can visit a site like lipsum, l-i-p-s-u-m, .com, and copy just some of the default filler text like Lorem Ipsum, which is what I will do now, and I've done that off-screen, and I've just pasted in just a few sentences here. We can save, and check out the result. And that image, of course, is not showing up because I forgot a u in donut. There we go. So everything is looking really big right now, and we're going to fix that momentarily. But we do have another heading just down here where we have a form. So let's go ahead and address that real quickly. This will be h3, class will be uc and wt once again. Ready for some goodeats? Later on, underneath this, we will create some columns with a form element. So we'll save this, and check out the result. Okay, so let's go ahead and first address this sub-header text right here. As you can see, it's way too small, so let's go ahead and go back, address our main.css, and momentarily I just changed our layout to a split-screen so we can see this without having to revert back and forth. So the class is on a p element called subtxt, color we'll make gray, font-size we'll make 2rem units, and then also a line-height of 2.3rem. Okay, so again I have the browser scaled down to 67% just so we can see the overall layout. So next, while we're here, let's fix the issue with these really large responsive images. We gave them two unique ids of plate and donut. Inside of here we'll use max-width: 65%. We'll also go ahead and put in margin: 0 auto, this will center them, and display:block. Okay. Now as you can see, our layout is starting to become a little bit more respectable, but right now things are squished just a bit too much. So let's space them out by defining the rulesets for our three padding classes that we created earlier in the HTML. So for padding, we'll just add padding-top of 3.5 em units. I'm going to copy this and paste it here, and in here we're going to make padding2 with a padding-top of 6em, and also a padding bottom of 2em. Copy this one more time, and paste it, change to padding3. This padding-top will be 4em, and bottom will be 4, as well. All right, so now let's make our logo type more bold and separate the words through color. So we'll go ahead down here, and if you recall the id is logo. We're going to make the font-weight 900, and we'll make the color black. Then we'll reference the span element that we placed on it, and this will be a color of 7C19DF. All right, so let's go ahead and view this at full size, and we'll reset this to 100%, and there we go. So in the next video, we're going to define our navigation in the header and style it appropriately with CSS.

Lists Skeleton does offer a little bit of custom styling for both unordered and ordered lists. You can find the rulesets under the Lists section of the skeleton.css file. So let's create our navigation based on an unordered list in the index.html file. Let's come down here, and just in our eleven columns section, we'll put in a ul element. Inside of here, we'll put in an li, list item element, with a link, and the first anchor text will be Our Food. Shift+Alt down to replicate it, just three times, Our People, and finally, we'll have a Contact us. All right, let's save it. And this is obviously not suitable for a horizontal navigation so let's fix that in our main.css file. Okay, so I'm going to get rid of that media query just temporarily, and what we want to do now is reference the header HTML element, and ul. So by default, we're going to put in list-style-type is none, and that will get rid of that circle. We'll float to the right of the column, and we'll put in margin: 0. So let's save, and check out the result. All right, so now we need to float them to the right of each other to make it a horizontal list. Float:left and margin-bottom: 0. Okay, so now we need to space them out from each other. Header ul li a, and we'll put in a color gray. For our font size, we'll make it slightly smaller, so .8em, and margin-left will be 40px. So now we can see the result is much better at this point in time. Okay, so by now you should have a pretty strong grip on working with typography here in Skeleton, but before we wrap this module up, let's give our containers some custom rulesets to really define this layout even more. So for our middle content section, we're going to create a purple background with a background image from the images folder that we imported earlier. So if you recall, the id is purple-container, and the background's going to be set to a purple color code that we used earlier, right here, so we can just copy that. And then also, we'll reference a background image, and that will be in the images folder, foodbg.jpg, and no-repeat. Background-size will be cover, so it fills out the entire section. Overflow we're going to set to hidden, and position will be relative. And this is important because we're going to add an effect momentarily. So we'll save this, and of course, the color is not white yet because we haven't yet defined that wt helper class, which we will in a little bit. But let's add a diagonal sort of element on top. So if you recall, we created a div with a class of cut, so let's define that in CSS to create that effect. The background's going to be white, so three f's, position will be absolute, as we'll lay it on top of the div, and the top we're going to put -20%, the left will be -20%. And by the way, if you're wondering how I came to some of these values, simply because it was due to trial and error. So the width is going to be 120% and the height will be 30%. Then we're going to use transform-origin: center-top, and then transform, we'll rotate it by -3deg. So let's go ahead and save and check out the result. Very, very cool. All right, awesome. Now let's define that wt white text helper class. It's wt, color will be white, we'll check out the result, and you'll see it's much, much better. Consequently, the text down here has now been hidden, so let's also define the container background for that. If you recall, the id is dp-container, the background color of 210031. Now this is kind of a darker, desaturated purple. All right, great. So it looks like we're really getting somewhere with this layout. In the next module, we're going to take a look at buttons and forms here in Skeleton.

Buttons and Forms Forms Throughout this module, we're going to focus on both buttons and forms. In doing so, we will also continue to complete our landing page. Now first, take a look at the Forms section in Skeleton. In skeleton.css, scroll to the Forms section, and you can see that all inputs have a custom styling applied to them to normalize height, padding, background color, borders, box shadows, and box sizing. Now this creates for a consistent appearance cross-browser. There are also adjustments made, but they're all very minimal, and deal mainly with applying margins, paddings, and borders. So let's add a form to our landing page example in the bottom container. So let's head on over to our index.html, and first we'll start out with a form element, and then use the Skeleton grid system to structure the layout of the form using columns. So for our form, we want a name, email, and button. So to get started, we'll add a form element underneath the h3, inside of here we'll have a div class of one-third, we're going to use a shorthand here because we want three different elements, and inside of here we'll have a label, for=name. This will be, for now, Your Name. We'll close out the label. Inside of here we'll put input, type is text, and id=name. All right, so for our next column, it's going to be the same thing almost, so div class, again one-third. We'll make a column here. Close out our div, put in a label, for=email. Inside of here we'll put in an input, id=email, put a label real quick. Okay, so now just over here, we're going to copy this real quickly so we don't have to keep on typing the same thing, essentially, and for now we're just going to add button, and we'll fill this in in the next section when we start covering the actual buttons. Okay, so let's save this. We'll go to our project here at the bottom, and yes, not exactly the best-looking form, and also, if we were to scale this down or zoom out, we would see that these would actually float left of the labels, which is something we also don't want. So let's go ahead and fix this here in our main.css. Come to the bottom, let's first fix the label colors because we can't really see them. So label, the color, it's going to be 836C8C, and this is just kind of a medium desaturated purple. Also, we'll make the font-weight here 300. Next we'll put in input, type=text, and we're going to style these to background:none, so that gets rid of the white background. We'll give it a border of 1px solid, and this is going to be 593E73. We're also going to add the important rule to ensure that it gets applied. Outline is going to be 0, and then color inside, we'll just make the text white. So let's save this and check it out in the browser. All right, much better. As we can see, we could still have some issues with this over here, and that's simply because of the Your Email's a little bit shorter than Your Name, otherwise, this would be floating to the right, as well. So let's go ahead and fix that. Skeleton actually offers a quick helper class that will extend these 100% width. So going back to our index.html, we'll add class of u-full-width. We'll copy this, and apply it to the other input, and save it. Ah, there we go, much, much better-looking. So now let's just do a quick test and change one of these inputs to a different type of input. So another common input would be a drop-down list so that we can see how it would look and what it takes to customize it. So let's go back to our HTML, and right here I'm going to change this label from Your Name to Issue, and let's just assume they're supporting, for instance, a contact form with some type of issue that they want to contact customer support. So select class=u-full-width. We'll close out the select, and then add our options, so option value=option, My option, and we'll use Shift+Alt and down just a couple times. Let's go ahead and save that, and now see what the result looks like in the browser. Okay, it doesn't actually look bad, but obviously it's not consistent, so how do you actually change the styling of this drop-down? Well, let's go ahead and fix that in CSS. So we'll go back to our main.css, and we'll reference the element itself, select, first we'll make the background:none. We'll take our same ruleset here, apply it there, and let's also make the color the same color of the label. So we'll save, and there we go, much, much better. So now you should have a pretty solid understanding of how to work with and implement form elements, as well as customize them. So in the next lesson, we're going to focus on adding a button here and the ways that we can control buttons. We may even add a call-to-action button up here, as well. I'll see you then.

Buttons Like other elements in Skeleton, button styling is made very simple. There are two styles of buttons that you can use. Now by default, basic styles are applied to common buttons such as the button element, input submit, and input button elements. You can attach the class of button onto links to give you the same appearance. To create primary button styles, you can attach a class of button-primary onto the standard button elements in links, as well. So let's add two buttons to our landing page project. Now first, let's create a standard call-action-button just underneath our main heading section area over here, which is a common practice within the hero section of most landing pages. So let's go back to our code editor, go to our index.html file, and right here just underneath our subtext class paragraph, let's add in an a href, it won't go anywhere, and then remember we'll add class=button. And we'll just say Order now for anchor text, and we'll save it, and go back to our browser. Okay, so it doesn't look bad, but it's not really an effective call to action. Instead, let's attach the button-primary class to it. So after the button class, we add button-primary. We'll save and go back, and now we can see that it's better and sticks out quite a bit more to grab a user's attention, but it does seem a little bit small, so let's adjust the size and padding appropriately. We'll go back to our main.css file, and let's go ahead and put in a cta id. We'll make the font-size 1.8rem units, a padding on the top of .5rem, and 3rem units on the right and left, and we're also going to reset the height to auto as Skeleton does apply a default height to the elements. So before this will work, let's attach an id of cta onto this button. Okay, make sure both files are saved, we'll head on back, and now we can see it has increased noticeably. Okay, so there we go. Let's also add a submit button to our form below. So we'll come down here where it says button, let's put in input of type=submit and class=button-primary. We'll set a value to Eat Good, and let's save it and check it out in the browser. All right, that's not bad, and actually does work with our color scheme, which is surprising. But anyhow, we do need to make a couple adjustments. It would probably make sense to make it extend to 100% width of the column to help with the visual consistency across the entire form. So let's go ahead and add our special class here of u-full-width. We'll save it. All right, that's better. And one order of business is to push down this submit button here through margin top. So we'll put in input type=submit, and then margin-top:24px. All right, much better. Now if I drag this browser here to the left to shrink it, we'll see that once we get to the mobile size, the menu looks pretty bad, and many of the elements would look much better centered. So in the next lesson, we'll go ahead and finish this layout by making responsive adjustments through media queries.

Media Queries We've come a long way so far, but we need to make some adjustments using media queries in our main.css file. Doing so will ensure that this landing page looks great on all devices. So just to do one more quick run through, we can see just some slight issues we will definitely fix. So to begin, let's go ahead and go to our main.css, and here at the bottom I'm going to create a media query of media max-width of 550px, and the very first order of business, we'll start from the top, is going to be the logo. So the id that we gave it was logo, and we want to center-align it, and also push it away from the bottom menu, or the navigation. So display:block, we'll text-align:center, and then margin-bottom will be 1rem. Okay, much better. Now I do want to adjust and kind of change how this particular menu appears. Right now it looks fine, but this is kind of a larger viewport width. If I end up shrinking this down a little bit more, we'll see it doesn't look very good in this manner. So first we're going to reference the unordered list element, ul, we're going to make the width: 100%. After that, the list item elements, we'll display:block, width:100%, and a margin at the top of 1px 0 0 0, and also padding will be 0. So if we save this, we'll see now that they are stacked vertically, however, they still don't look that good. The alignment is way off. So next we'll reference our header ul li a, and we'll put in margin-left of 0. All right, so now it's starting to come along a little bit better. Also we're going to put in a width of 100%. We'll display:block, we'll give it a border as well, of 1px solid lightgray, and then they're all kind of scrunched up, so let's give it a padding of 5px. Okay, so this looks good, but it's a little bit busy down here with this border, so let's go ahead and fix that by using last-child. So to do that, header ul li, so we're going to choose the very last li element with last-child, and we're going to put in border-bottom of 0, as well as padding-bottom of 0. All right, great. So that's much better. Now let's also reference our padding in padding2 classes. Right now there's a lot of unnecessary padding throughout here. So let's go ahead and fix that. We're going to set padding to padding-top of just 1.5em, and that brings it up, and then also padding2, padding-top of 3em, and that pushes this up just a little bit. Okay, next let's also adjust our headings so that we can center-align them. We'll also add in any of the paragraph elements, as well. So h1, we're using h2 and h3, as well as the paragraph, text-align: center. All right, we're almost there, but still just a couple adjustments to make, so we're also going to reference our plate. We're going to put in float:none !important, otherwise on a slightly larger viewport they start to float to the elements. And let's also reference our CTA button right here, a width of 100%, and margin-bottom of 4rem units, much better. Okay, so let's go ahead and extend this, and check to see if there's any other issues. Right here we can definitely see an issue. This is more on a tablet size, and you definitely wouldn't want this occurring, so let's go ahead and fix that real quickly. So I'm going to bring this over here just a bit, and we'll create a new media query for this. This will be @media max-width of 750px, and here we'll put in h1. We're going to turn down the font-size to 2.5em, and then also we'll reference the plate and we'll push it over even further by float:right. All right, great. So now that looks much, much better. Awesome. Now that our layout is complete, we're going to look into optimizing this layout even further.

Optimizations If you're using Skeleton CSS, it's usually for one of two purposes, to either create a prototype, or to use it as a quick boilerplate to create a page which you want to load really, really fast due to its small file size. I've uploaded the project that we just created to a server, and I ran a Google Insights PageSpeed test on it. Now if you know anything about SEO, which is search engine optimization, then you know how absolutely crucial your site's loading time is, which can affect your search engine result positions. So as you can see, mobile actually needs work for our project, as it only scored a 76 out of a possible 100. Now it gives us a list of possible suggested fixes, one of which is to minify the CSS. Now because we're using gulp, minifying CSS is made really easy. But I don't want to just minify the CSS, which means to remove unnecessary whitespace and comments, I also want to merge the three CSS files that we're working with in order to reduce server requests through a package called Concat CSS, and once minifying that bundled CSS, I want to run an awesome package called UnCSS. So first, let's install the package with npm that will concatenate all of our files, which means to merge them into one. So in the project folder in the console, we'll run npm install gulp- concat-css, and save it as a development dependency. Once that's complete, let's head back to our gulpfile.js, and we're going to import it at the top. We'll name it concatCss, and we require the package that we just installed. All right. Now what we need to do is pass in a new task that will create named CSS in the second argument of our serve task. So just right here we pass in the css task, and then we're also going to add it right here, and we put in through back brackets, css, and add the final bracket here. All right, and then we have to actually create the task of css. So just over here, gulp.task, we'll name it css. Inside of here we're going to return gulp.src method, and we're going to pass in all of our CSS files. Now if we simply use a wildcard for this, the order may get messed up and not the correct order. So essentially, what we need to do, I'm going to specify in order which CSS files need to be added. So /css, we're going to start with skeleton, next we'll pass in normalize, and then, finally, our main.css. Then we're going to pass in a pipe, and we're going to concat them, and we pass in the name of the new file that merges all of those CSS rulesets. At the end we put in another pipe, we use gulp.dest, and we'll just leave it in the same css folder. All right, great. So let's go ahead and save this, and then we'll head on over to our index.html file and only reference the new bundle CSS that will be generated. And this will speed up the site by reducing server requests. So remove this, and we'll simply reference bundle.css. Awesome. So now let's go ahead and run our gulp command. So we'll come here, run gulp, all right. Going back to our code editor, if we come here, we'll see the new bundle.css file. Now nothing has really changed with the exception that it just combined those three files together. Now if we open up the actual File Explorer, we'll see that this file right here, if we extend it just a little bit further, the file size is 21 KB, and these 3 added up here are 23 KB, so there's a little bit of a reduction on the file size. Now we can even take this a step further by minifying our CSS now. So let's go back to our console. We'll hit Ctrl+C to stop this, and then we'll run npm install gulp-clean-css, and save it once again as a development dependency. Then once finished, we'll head back over to our gulp file, we'll create a variable. This is going to be var cleanCss = require gulp-clean-css. And then just right after our concat is where we add in a new pipe. Now this we'll change to cleanCss. Inside of here we're going to pass in an option, and we put in compatibility to ie8. Okay, so now let's save this and re-run our gulp command. All right. Now if we go back and look at the file size, it went from 21 KB, and we cut it in half. So if we go back to our code editor and take a look at what exactly happened, we'll see that everything has been placed on one line, and there's also no whitespace or even any comments. So this helps saving file size tremendously. So what we want to do now, we're not just done yet, to make this even smaller, we're going to install a package called unCss, which allows you to specify your HTML files, and it will compare it against your CSS rulesets, and remove any of those unused CSS rulesets. So let's go back to our console, we'll stop our server once again, run npm install gulp-uncss, and save it as a development dependency. And then we'll go back here to our code editor in our gulp file, and one last time, just to make our life a little bit easier, we'll copy this, call this one uncss, and this is going to be simply gulp-uncss. And we're going to add this one just after merging the files with concat. So we run uncss, and then we pass in an object which accepts your HTML files. So we put in html: index.html. All right, let's go ahead and save this one last time. We'll go back to our console here, we'll run gulp, and there we go. It went from, first it was 21 KB, to 10, and now just down to 5. Awesome. So now I've re-uploaded the more optimized result, and re-ran the PageSpeed test. It increased from 75 to 79, which isn't a huge improvement, but then again, this is a tiny project. So hopefully you learned a lot throughout this course and now have a new skillset for use when prototyping and creating landing pages. I'm Gary Simon, and I'll see you next time.