1. Introduction

1.1 Grids and Layout Tricks With "postcss-ant"

Hi this is Case Bracey for Envato Tuts+ and in this course, you'll be learning grids and layout tricks with postcss-ant. Postcss-ant is a grid and layout management system created by Cory Simmons who you might know from the other grid systems that he's created Lost and Jeet. Now, this grid system is one of the most powerful grid systems around. But it's also very clean, requires minimal code to use, and is very low on bloat. It runs on top of the awesome PostCSS, which means that you have the option to use it with just straight up vanilla CSS or if you prefer, you can use it with your favorite pre-processor. In this course, we're gonna step through all the basics of working with postcss-ant and we're gonna go through how to use it to create real world layouts. We're also gonna dig into some of its really interesting and unique functions with a little look at some of the advanced things that you can do with it towards the end of the course. So let's go ahead and get started learning grids and layout tricks with postcss-ant. I'll see you in the first lesson.

2. Postcss-Ant Basics

2.1 Getting Set Up

Hi I'm Kezz Bracey and this is Envato Tuts+. Welcome to the first lesson in grids and layout tricks with postcss-ant. Now before we can get into actually coding some things with postcss-ant, we need to get you set up with a system that is going to watch the files that you're working on and then compile them as you make changes. To do this we're gonna be using a little bit of command line. Now if this is the first time that you've worked with command line don't worry because we're gonna walk you through everything and we're keeping the command line that we are doing to just a couple of steps. The first thing you're going to need is npm. Npm is a really awesome package manager that lets you just pull in a whole bunch of different card packages from the npm registry. If you haven't worked with npm before and you need to get it installed on your system, then you can check out this tutorial that I wrote previously. It will explain everything about what in npm and Node is, and it'll step you through the installation process. Once you've confirmed that you have node and in human your system have a look at the source files that are being included with this course, and you should find this is ZIP, outer runend.zip. So, go ahead and extract that ZIP file, and then rename the folder to something to represent your current project, then go into the folder and open up a terminal inside that folder. And by the way, if you wanna know how to right-click and open up a terminal inside a specific folder, I'll include a link to another tutorial that will explain how you can do that on either Windows or Mac. So everything that you need to get started building with postcss-ant is already here, all you have to do is install it. I'm gonna do that by typing npm install and hitting Enter. Now you just need to wait while npm grabs all of the code that you need and download it into your project. Now everything is being downloaded and installed. So we're ready to run our automated ant system. Now this is powered by Gulp, so what we're going to do is type gulp serve and that's a command that's been preconfigured inside this package to do a few things. It's going to watch the files that you're working on and it's going to re-compile them If there are any changes. And it's also going to set up a preview of the site that you're working on, that will then automatically be refreshed every time your files re-compile. So let's see all that working. The folder that you're gonna operate inside for this course is this source folder. So you jump in there, and then open up style.css for editing. Now if we just make a change, let's say we just make the background black And we save, the system has automatically detected that change has recompile the CSS and it has refreshed the preview. Now if we look back inside a folder structure, the pile that we're working on is being compiled into this final file. So you work inside this source folder, you work on this version of your style.css file, postcss will then turn that into your final style sheet. Now if you want to, you can alternatively work with the preprocessor language instead. So let's open this one up. Now without automated builder, if you don't work with a preprocessor language what's gonna happen is .scss file is gonna be compiled into this file which will then in turn be put through postcss into your final style sheet. So there's two steps to that process. So just bear in mind that if you are working with this file, it's going to over write anything that you put into this file. If you do want to work with the preprocessor there's just one little change that you need to make to your compilation package. So if we jump into the root level of the folder and open up gulpfile.js, down the bottom here you'll fine a line that's commented out. This line activates the preprocessor compilation so if you wanna use it, just uncomment it, save it. If you already have this running press control C to stop it. And then restart by running go up server again. Now this time if you make changes to your .scss file. Let's this time say we'll make the background red. Now your preprocessor file is controlling what's happening in your preview. So what you put into this file, gets pumped through to the style.CSS file in your source folder. So you can see a background red has come through there. Then that gets processed by postcss and put into the CSS folder as our final style sheet. If you want to use a different pre-processor with postcss_ant you certainly can. But you just need to be a bit familiar with working with gulp, so you know how to modify the file that is being provided to use a different preprocessor. And the other thing to keep in mind is, when you're working with methods and you're using stylus, if you wanna break methods into multiple lines, you need to include a backslash before each new line at the end of the line preceding it. Right, so that's the set up now all done, and we're ready to move on to doing some coding. In the next lesson we're gonna start at the very beginning by creating a grid using postcss-ant. I'll see you in the next lesson.