Join Ray Villalobos for an in-depth discussion in this video Using the exercises for this course, part of Building a Responsive Single-Page Design with PostCSS.
- In order to work wth a realistic project, I've prepared a set of sample files that you can use to take a look at the features of PostCSS. All these files are available in the GitHub repo, which you can find at this URL. We're going to need to clone this GitHub repo, but I want to download not just the master branch, since that would have only the finished version of the project. I want to download of all the branches, so that I can get the starting version of this project to work, as well as all of the other branches that have links to all the videos in this course.
To do that, I'm going to need to copy the URL for this page, which you can get by using this little button right here in GitHub, so I'm going to click on that, and then I'm going to need to switch to my terminal. Now on a PC, you want to be using something like Git BASH. On a Mac, you can just use the regular terminal. We need to make sure that we are in the desktop, so I'm going to issue a cd, and then ~/Desktop command. And then I want to create a folder. I'm going to use the mkdir command for make directory and call this one postcsslayouts.
Now I need to switch over to that directory, so I'll do a cd postcsslayouts. And now I need to issue a git clone command, but this is going to be a slightly different one than normal. I'm going to issue a git clone --bare to get the bare version of the repository. And then I'll hit space and paste the GitHub URL and make sure that I also add a space and then a .git right after that. So I'm going to hit return, that's going to clone everything as a bare repository.
And then I'm going to modify this repository so that it acts as a normal repository. So I need to use the git confic command to modify one of the boolean variables called core.bare, and make sure that that's set to false. This will convert this to a regular repository. And it looks like I do need to add two dashes, so make sure you do that. Once you do that, you can do a git reset --hard command, and this will finish converting everything into a normal repository.
Let's go ahead and clear this out. Now it's time to issue an npm install command. Now before you do this, you need to make sure that you have Node.js installed. So let's do npm install. Right, so let's go ahead and clear this out. And if you got any errors in the previous command, depending on how you have your permissions set up, you may have to run that command as the super user. So just add sudo to the beginning of the previous command.
Now we're ready to run the gulp command. Once again, you do need to have gulp installed before you do this. Let's go ahead and just run gulp. And once this is running, you should see a copy of the final version of the project come up in your browser. Now, I'm going to start each video with the PostCSS layouts folder already open in my favorite text editor. I'm using Atom right now. And at the beginning of each video, I'll need to be in the proper branch for that video as well.
So I'm going to create a new terminal. I can do this on a Mac by issuing a new tab. And I need to make sure that I'm in the right folder, so I'll do a pwd command. That'll show that I'm in in postcsslayouts. And then from here, I can issue a git branch command. This will list all of the branches. The branches are named according to the name of the video, so 01_03 means that this is in the first chapter, the third video. The letter afterwards means that this is the code as it was at the end of that video.
If you look at this other one, this is a b for how the code looked at the beginning of the video. You can switch to any of these branches by issuing a git checkout and then the name of the branch. Now if you see something like this happen, it means that there are some local changes that would be overwritten by this checkout. So you can use a git stash command to temporarily hide those changes. And then you can issue the git checkout command. Now it's properly switched to the proper branch, and you can go on with watching the video.
In this course, I'm assuming that you have a bit of experience working with Git and GitHub. If you need a refresher, or just want to learn how to work with Git and GitHub from the beginning, then check out Up and Running with Git and GitHub.
- Structuring the HTML markup for a single-page design
- Using PreCSS Sass-like imports in PostCSS
- Creating Sass-like variables with PreCSS
- Building styles
- Creating a layout for the header and navigation with Flexbox
- Creating and styling sections
- Animating page elements with PostCSS