3 Development Tools

You Shouldn't Live Without

Geoff Kliza / @elementsyeg

Why?

We become what we behold. We shape our tools, and thereafter our tools shape us.

― Marshall McLuhan

SASS

Syntactically Awesome Style Sheets

Scripting Language for CSS

Nested styles

More consistent, more readable, and more quicker.


#id {
	.class {
		font-size: 2em;
		color: blue;

		&:hover {
			color: red;
		}
	}
}
						

Mixins & Variables

Repeatable code snippets


@mixin big-fancy-italic-font($color) {
	font-family: "FS Albert Med Italic", arial, sans-serif;
	font-style: italic;
	text-transform: uppercase;
	font-size: 5em;
	color: $color;
	text-shadow: 3px 5px 10px rgba($color, 0.8);
	border-bottom: 2px solid $color;
}

h1 {
	@include big-fancy-italic-font(#f33117);
}
						

Partials

Break up your css into smaller chunks, reuse css


@import "compass";
@import "variables";
@import "reset";
@import "style/fonts";
@import "modules/mixins";
@import "modules/grid";
@import "modules/nav";
@import "style/style-guide";
@import "design/header";	
						

Resources

git

Teh Social Network for Nerds

Why?

Version control, duh.

Fork Yourself

Deployment

Sharing

Explore Github - Wordpress

Getting Started

Git Documentation

GitHub - The Social Network

Bitbucket - A great private repository

Beginner's Guide to Git

Grunt

The Javascript task runner.

Task Automation

Gruntfile.js


watch: {
	options: {
		livereload: true
	},
	js: {
		files: [ 'Gruntfile.js', 'js/reveal.js' ],
		tasks: 'js'
	},
}

grunt.registerTask( 'js', [ 'jshint', 'uglify', 'qunit' ] );

						

The Basics

  • concatenate and uglify javascript
  • compile sass, postprocess styles, minify
  • watch
  • run imagemin and move images to destination folder(s)
  • run a server
  • convert php to html

Resources

Putting it all together...

Node.js | Github | Yeoman | Grunt | Bower | SASS

Questions?