Mina Mikhail fightingtheboss

HTML

HTML5 Doctor

Developer Tools

Discover Dev Tools

CSS

Hey Bitmakers,

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 three pieces we'll need to get your system ready for Sass projects:

Git is a free and open source distributed version control system that we'll depend on to track changes, back up and collaborate on code we write in class.
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.

Publish your first project to GitHub

Now that you've created your first design, you'll want to put it on the Internet (It's not real until it's on the Internet, right?). To accomplish that, we'll use GitHub Pages.

The following steps will walk you through creating a GitHub account, creating a repository for your project, and finally publishing your project to GitHub.

Create a GitHub Account

Visit http://github.com and create an account
Send your GitHub username to [email protected] with the subject "GitHub Username [FED February]"

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:

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.
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

	# These are examples of new features in Ruby 2.3.0

	#---------------------------------------------------------------------------
	## Did You Mean?
	"Typos suck less now".revers

	# NoMethodError: undefined method `revers' for "Typos suck less now":String
	# Did you mean? reverse
	# reverse!

	{
	"auto_complete_commit_on_tab": true,
	"copy_with_empty_selection": false,
	"ensure_newline_at_eof_on_save": false,
	"highlight_line": true,
	"ignore_packages":
	[
	"Vintage"
	],
	"tab_size": 2,

	<header class="page-title-bar">
	<h1 class="logo">Basic Neat Grid</h1>
	</header>
	<main>
	<article class="post">
	<h1>Post 001</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quia, dicta omnis illo, dignissimos unde culpa. Harum, nisi, earum fugit voluptas impedit totam adipisci dolore at velit magni delectus iste.</p>
	</article>
	<article class="post">
	<h1>Post 002</h1>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CSS Positioning & Display</title>

	<style>
	html {
	box-sizing: border-box;
	}