Skip to content

Instantly share code, notes, and snippets.

@fightingtheboss

fightingtheboss/README.md

Last active August 29, 2015 14:10
Show Gist options
  • Save fightingtheboss/531a937d7082f6a0fb9e to your computer and use it in GitHub Desktop.
Save fightingtheboss/531a937d7082f6a0fb9e to your computer and use it in GitHub Desktop.
Download ZIP
Setup Instructions for Sass with Node and Yeoman
Raw
README.md

Hey everyone,

Now that we've covered the fundamentals of CSS, I'll be introducing the topic of CSS pre-processors, specifically Sass, that augment CSS with a bunch of superpowers, the use of which is more or less an industry best practice at this point. Here I'll provide steps to prepare your system for projects that use Sass for this class and beyond.

There are two pieces we'll need to get your system ready for Sass projects:

  1. NodeJS is a platform that allows us to run the V8 JavaScript engine, the very same one that the Chrome web browser uses to interpret JavaScript, on the command line on our computer. We need it to run some tools that will help us scaffold new projects and render our Sass files into regular CSS.

  2. Yeoman is a combination of three tools that will help you quickly create new projects with everything you need to get working on your prototypes quickly. The three tools are Yo, a scaffolding tool that will setup project directories and files for you, Grunt, a task runner, and Bower, a package manager that will fetch JavaScript and stylesheets from around the web for use in your project.

PRE-FLIGHT: THE COMMAND LINE INTERFACE

Before we get going with the setup, if you're not familiar with using the command line interface of your operating system, it'll be useful to learn the basics so that you'll feel more comfortable going forward with these instructions and in general with the course. I know it seems super hardcore, but you're developers now and these are the fundamental tools that developers use. To get up to speed, follow the tracks on this site, at least until you hit "Moving a file" (you can keep going if you want to learn more, obviously!). It shouldn't take too long and it'll be worth the investment.

To get setup, follow these steps:

WINDOWS USERS

  1. Go to http://git-scm.com/ and download Git
  2. Install Git from the download
  • Accept all of the default options
  1. Go to http://nodejs.org and click the big Install button to download the installer for your platform (Win/Mac/Linux)
  2. Install NodeJS via the installer
  • Accept all of the default options

MAC USERS

  1. Go to http://brew.sh
  2. Scroll down and copy the code underneath 'Install Homebrew'
  3. Paste it in your Terminal window and hit enter
  • If you're running an older version of OS X, it may prompt you to download Xcode Command Line Tools. Read the instructions and follow 5. them. You will either be able to do it from the command line or you'll have to download it from https://developer.apple.com using your iTunes username and password
  1. Type brew doctor into your Terminal and read the instructions carefully for anything that comes up
  • Pay particular attention to any lines that mention that /usr/local/bin must come first in your PATH. There's a snippet they recommend in that case that looks something like echo export PATH="/usr/local/bin:$PATH" > ~/.bash_profile. Run that on your command line (copy & paste) if you see it, then open a new Terminal window (Cmd-N) or Terminal tab (Cmd-T) for the changes to take effect
  1. Now run brew install git
  2. Now run brew install node
  3. If at any point you have errors that mention a lack of permissions, try running the following command:
  • sudo chown -R <your-username>:admin /usr/local
  • Replace <your-username> in the above with your username on your computer
  • It will prompt you for your password, type it in and press enter (nothing will show up on screen for security, but it's working!)

ALL TOGETHER NOW!

  1. Go to your command line
  • On Mac and Linux, open the Terminal program (or iTerm if you've installed it). On Mac, you can use Spotlight (Cmd-Space) or find it in Applications -> Utilities -> Terminal.
  • On Windows, open the Command Line by typing 'powershell' in the Run box of the Start Menu (you can open the Run box by pressing WindowsKey+R). This will only work if you're running Windows 7 or later.
  1. Verify the installation by doing the following:
  • Type node -v => It should return the version of NodeJS installed on your system.
  • Type npm -v => It should return the version of NPM installed on your system.
  1. Run the following command: npm install -g yo grunt-cli bower
  2. NPM will fetch the required files and install them on your computer.

When running Step 3 on a Mac or Linux machine, you may encounter an error similar to this:

Error: EACCES, ...
...
Please try running this command again as root/Administrator

If this happens, see Step 7 above (in the Mac section) for a possible resolution.

ALMOST THERE!

As long as there are no errors, your system should now be ready to run a generator to setup a new project. There are a bunch of them out there, but they're often too complicated for our purposes.

Here are the final setup instructions for scaffolding out new projects. This is the workflow we'll be using from now on when developing with Sass.

Part 1 (One-time installation)

  1. Go to your command line and type npm install -g generator-bitmaker-prototyping
  2. This will install the Bitmaker Prototyping Generator which will help you scaffold out a new project

Part 2 (Any time you're creating a new project)

  1. Run the Bitmaker Prototyping Generator by running yo bitmaker-prototyping
  2. Answer the questions it asks you and watch it go!
  • Give your project a cool name or the generator will pick one at random for you
  • Accepting the defaults is probably a good way to start
  • At the end it will have created a project folder using your project name (it'll turn spaces into dashes and make it all lowercase)
  • Once it's done, switch into that project directory (cd <project-name>) and run grunt to get to work!
  1. Open that project directory in your editor of choice to take a look at what it created for you.

You'll find that all the files you need to edit are under an app/ directory in your project folder. You can safely ignore the rest of the stuff for now, it's just supporting files that help make the magic happen.

Now that the project is setup, run the grunt command at the command line to start up a server that will serve your page in a browser and watch for changes to your files. Whenever a file changes, the page in the browser will automatically reload.

We'll see how this helps us get up to speed quickly in class on Tuesday. Please try to get this setup done before coming to class as it will make our brief time together a lot smoother.

If you did run into errors or problems with the above instructions, send a message to the group and I'll work with you to sort it out. Sending it to the group allows anyone with similar problems to benefit from the responses. I've tested this out on both a Mac and an old Windows XP machine so hopefully everything will "just work".

As always, if you have problems with the above instructions or questions in general, don't hesitate to ask. Mina

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment