I just launched billseaver.com. On the home page, each “stripe” is considered a module. This gives Bill the freedom to rearrange the elements on the home page on the fly. If he has a podcast release that day, he can move the podcast stripe to the top, increasing its visibility.

As a designer, I don’t feel like the design of the site is being compromised because I’ve designed how each section should look. It’s just providing more flexibility and more value to my customers accommodating their digital strategy.

So, how did I pull this off?

The trick is the Advanced Custom Fields (ACF) plugin. — It’s one of those WordPress Plug Ins I could not live without.

Let’s walk through the setup.

Within WordPress

I have the ACF Pro Plugin installed. Once it’s activated, it gives you a Custom Fields nav item in the left sidebar. Click on that and then the Add a New Field button.

Let’s call this field group “Home Page” but you can really call it anything you like. This label is will be displayed on the “Edit Home Page” above our form fields.

On the new Field Group screen

How the field will be displayed on the Edit Home Page screen

Before we start adding fields, let’s adjust our Location rules. I want this field group to display on the home page only. Meaning, Bill will have to click on Pages and then find the Home page to edit. There are several ways I could set the rules.

I could say if the Page is equal to Home.

or I could say if the Page Template is equal to Home.

Personally, I prefer the second option since the template itself is really dependent on these fields.

Then, in the Options box, below that, we can control the display and the other elements on the page. I try and hide all the elements I don’t need to minimize confusion:

• Content Editor (all content is within the stripes, no need for body copy which all means, no need for an Excerpt)
• Excerpt
• Comments
• Author (don’t need to set an author for the home page)
• Featured Image
• Send Trackbacks
• Custom Fields (this refers to the WordPress built in Custom Fields, not the Advanced Custom Fields we’re creating)
• Format
• Categories
• Discussion
• Tags

Now for the fun part, the actual fields. Click the Add Field button. I’m going to name this “Home Page Content”, but call it whatever you like.

On the new Field Group screen

How the field will be displayed on the Edit Home Page screen

You can see that the Field Name gets filled in automatically based on how you name the label field. I usually keep the default name unless it adds in dashes (“Home – Page” becomes home_-_page).

Select Flexible Content from the Field Type dropdown menu.

You can add instructions if you’d like. I usually leave this blank unless it’s a link (I’ll remind people to include the http://) or an image (I’ll include the image dimensions).

Within the Layout Row let’s start naming our stripes. We have 5.

Let’s name the first one “Receive Email Updates.” We don’t need any additional fields here since it’s simply a MailChimp Signup Form.

Click on the Add New link under Layout to add another row.

Name this one “New Podcast”. It will automatically pull in the most recent podcast. The only additional fields we might need is a background image. Click on the Add Field button. Name it (Podcast Background Image) and select Image from the Field Type dropdown menu. In this particular case, I’m going to select the Image URL radio button, but the Image Array option is useful when you want to grab a particular size and include the alt text.

Click on the Add New link under Layout to add another row. You get the idea. I went through the same process for the “Testimonials” (no input fields), “From the Blog” (no input fields), and the “Services” stripe with the following input fields:

• Column 1 Heading
• Column 1 Content
• Column 2 Heading
• Column 2 Content
• Column 3 Heading
• Column 3 Content

Within the Code

Within my WordPress theme folder, I have a subfolder called partials. This includes smaller elements that I can reuse in other places on the site. In the case of Bill’s site, that folder contains a file for every stripe:

• stripe-email.php
• stripe-podcast.php
• stripe-services.php
• stripe-testimonial.php
• blog-excerpt.php

You’ll see the folder structure in the left pane and the code for the services stripe on the right.

My page-home.php template has this code. I tried to include comments, explaining what each section does:

<main class="main" role="main">
<?php // open the WordPress loop
if (have_posts()) : while (have_posts()) : the_post();

	// are there any rows within within our flexible content?
	if( have_rows('home_page_content') ): 

		// loop through all the rows of flexible content
		while ( have_rows('home_page_content') ) : the_row();

		// EMAIL UPDATES
		if( get_row_layout() == 'receive_email_updates' )
			get_template_part('partials/stripe', 'email');

		// NEW PODCAST
		if( get_row_layout() == 'new_podcast' )
			get_template_part('partials/stripe', 'podcast');

		// SERVICES STRIPE
		if( get_row_layout() == 'services' )
			get_template_part('partials/stripe', 'services');

		// TESTIMONIAL
		if( get_row_layout() == 'testimonials' )
			get_template_part('partials/stripe', 'testimonial');

		// FROM THE BLOG
		if( get_row_layout() == 'from_the_blog' )
			get_template_part('partials/blog', 'excerpt');

		endwhile; // close the loop of flexible content
	endif; // close flexible content conditional

endwhile; endif; // close the WordPress loop ?>
</main>

If you see the have_rows() and get_row_layout() functions, that’s all ACF. You can get additional documentation for the Flexible Content fields on ACF’s site.

The get_template_part() function is built into WordPress (more information within the WordPress Codex). The first parameter of the function is the folder name (partials) and the first part of the file name before the dash (remember I named my files stripe-email.php?). The second parameter is the fiel name after the dash (email).

The get_template_part() function is great for other places in your WordPress themes, not just within Flexible Content. I mentioned the blog-excerpt.php snippet is also used within the archive.php template:

<?php if (have_posts()): while (have_posts()) : the_post(); ?>
	<!-- article -->
	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
		<?php get_template_part('partials/blog', 'post'); ?> 
	</article>
	<!-- /article -->
<?php endwhile; ?>

The beauty in this method is if I need to change the way the blog excerpt is being displayed, I only have to change one file! I don’t have to remember every place that a blog excerpt is being implemented.

Other implementations

This modular method is also useful for formatting content. I used it on the portfolio section of my site.

I knew each page would need a different format depending on whether it was a website or a print project and what assets I have for each.

Landing page for Jimmy Needham

Small Groups Handbook

The post A Modular Approach to WordPress Theming, Using Flexible Content appeared first on AMY HAYWOOD.

This has saved my butt on more than one occasion. I’ve vowed to always use source control, regardless of how big or small the project is.

So, now that you’re interested in git, where do you begin? To get started, you’ll need to install git on your local machine (don’t worry, I’ll explain). Eventually, you’ll want to use an online service to store your code, like GitHub, BitBucket, or Beanstalk. (more on that below, too)

Installing git Locally

The easiest way to to install Git on your Mac (if you’re on Mavericks or older) is to install the XCode Command Line Tools. This is as simple as trying to run git from the Terminal.

$ git

If you don’t have git installed already, it will prompt you to do so.

If you want a more up to date version, or would rather run the binary installer, you can grab that here.

The first thing you’ll want to do is configure your git settings.

$ git config --global user.name "John Doe"
$ git config --global user.email "john@doe.org"
$ git config --global color.ui auto

Git is typically run from the Terminal. However, as a designer, I tend to be a little leary of the Termianal. Granted I’ve gotten more comfortable, but I still prefer a GUI (Graphical User Interface) when I can get one.

I think the easiest thing to do is learn the vocabulary. Then, it doesn’t matter whether it’s the Terminal or GUI, the same concepts apply no matter what.

Learning the vocabulary

Let’s walk through this as you would for a real project.

You’ll want to create a folder on your computer for your project. In my user folder, I have a folder called Code. Then, a subfolder called GIT. I keep all my project folders there.

If you’re trying to do everything from the command line, these commands create a new folder and then navigates inside:

$ mkdir new_project
$ cd new_project

Let’s initiatize our git repository. (All your git projects are called repositories.)

$ git init

So what does initializing really do? It creates an empty repository in a hidden folder, .git.

$ git rm -rf .git

Notice, I said empty. It did not add the current content within your folder. You have to tell it to do that yourself.

All the content within your project folder is considered the working copy. Once you get to a place where you want to save those files, you’ll stage your changes and then commit them to your local repository.

The advantage here is not all of the files you’ve modified since your last commit have to be staged and committed.

Status

Let’s get an overview of everything that has changed since we last committed:

git status

Git will put your changes into three main categories:

• Changes not staged for commit
• Changes to be committed
• Untracked files

Add

You can add all these changes by using:

git add .

If you don’t want to add the changes you’ve made, but cherry pick files, you can list them out:

git add assets/dist/css/main.css assets/dist/js/production.js

Remove

If we removed a file, we’d need to confirm that too:

git rm something.html

Commit

Now, let’s commit our updates:

git commit -m "Initial commit"

The first commit, I usually title as “Initial commit” but as you continue to make changes and commit your code, you’ll want these messages to be meaningful. This will make it easier for you (or your teammates) to understand the changes you made later down the road.

Your message should include information like, “What was the motivation for the change? How does this differ from the previous version?”

If you need a longer commit message than 50 characters, you can leave out the “-m” parameter and Git will open an editor application for you to write a longer message.

Here are a few guidelines from Tower’s eBook, Learn Version Control with Git:

1. Related Changes A commit should only contain changes from a single topic. Don’t mix up contents from different topics. This will make it harder to understand what happened.
2. Completed Work Never commit something that is half-done. If you need to save your current work temporarily in something like a clipboard, you can use Git’s “Stash” feature. But don’t eternalize it in a commit.
3. Tested Work You shouldn’t commit code that you think is working. Test it well — and before you commit it to the repository.
4. Short and Descriptive Messages A good commit also needs a good message.

Log

If you want to review a history of all the commits that have been made to a project:

git log

You’ll see a list in chronological order, beginning with the newest item.

If there are more items than what can be displayed on one page, you’ll see a : at the bottom of the screen. You can go to the next page by hitting the <SPACE> key and quit with “q”.

You’ll notice from the log, every commit has:

• Commit Hash This is that crazy long string of letters and numbers (i.e. aa093b890c78e9d0869a3f267b2530cf2cbeb83f)
• Author Name and Email Remember when we set our name and email address within the git configurations above? This is where it gets used.
• Date
• Commit Message

Remote

Now that we’ve made a bunch of commits, let’s publish (or push) them online. First we need to tell Git where our remote repository is.

There’s several services you can use, three of the most popular ones are:

• GitHub
• BitBucket
• Beanstalk

I go into a little more detail on each service’s features below.

Regardless of the service you use, when you create a repository, they will give you an SSH address and HTTPS address.

You can use either:

$ git remote add origin git@bitbucket.org:ahhacreative/git_blog_post.git

OR

$ git remote add origin https://ahhacreative@bitbucket.org/ahhacreative/git_blog_post.git

In this case, we named our remote repository “origin.” This is the default within Git. However, I could just as easily name it something else. I usually name mine based on where the remote repository is. This makes it easy within Tower (my GUI of choice) to tell where it’s being saved:

From the command line:

$ git remote add BITBUCKET git@bitbucket.org:ahhacreative/git_blog_post.git

You can see a list of all your remotes:

git remote -v

You’ll notice there are two URLs listed (fetch and push). One is for read access (fetch) and the other is for write (push). Uusally, the two URLs are the same, but you could use different URLs for security and performance issues.

Push

Now, we need to push our code up to our remote:

$ git push origin master

Hopefully, some of these things are starting to look familiar. origin is the name of the remote repository and master is the name of our branch. (We haven’t talked about branching yet. It’s OK, just trust me for now, but it’s coming.)

Let’s pause for a moment. I just want to take a moment to point out: you’re more than halfway there! It wasn’t that hard, was it?! You know everything you need to know to save, commit, and publish your files online! There’s still more topics to cover, but you already know the basics. That’s worth celebrating!

Pull

OK. So far, we’ve just published our changes online. But, what if we’re collaborating with another developer? They’re publishing their changes too. How do we pull down there code?

First you may want to see what you’re pulling:

$ git fetch origin
$ git log origin/master

If you want to integrate these changes into your local working copy:

$ git pull

If you have multiple remotes and branches, you may need to specify:

$ git pull origin master

Branching

OK, so let’s (finally) talk about branching.

When you’re coding, there are usually several different contexts or “topics” you’re working with:

• features
• bug fixes
• experiments

In the real world, these all happen simultaneously. You’re trying to fix a bug while a teammate is working on the new about page design.

If branching didn’t exist, how would you integrate some of these changes, but not all of them? You need to post the code for the bug fix, but your teammate isn’t ready to launch the new about page. You find out the new “members only” code you’ve been working on is going in a different direction, but you’ve already integrated that code in with everything else. How do you separate it out?

Branching!

You can create a branch to handle each of these topics. It stays separate from all the other contexts. When you make changes, they only apply to the current active branch.

Your current branch can be referred to as the active branch, checked out branch, or HEAD branch. They all mean the same thing.

Whenever you run git status, it will tell you what branch you’re currently on.

To create a new branch:

$ git branch feature/about-page

We’ve created a branch, but it’s still not our current branch. To change branches, you’ll need to checkout:

$ git checkout -b feature/about-page

To view a list of all our branches:

$ git branch -v

The -v (verbose) flag, provides more information, than just git branch.

Now, that you know how to create and change branches. What happens when you’re ready to commit that code to your main (master) branch?

First, you’ll want to navigate to your master branch. Then, merge in your new branch:

$ git checkout master
$ git merge feature/about-page

Once a branch is merged and deployed, you no longer need it. To delete a local branch:

$ git branch -d feature/about-page 

Stashing

Remember when we talked about not committing half done work? How do you get around that?

Stashing.

git-tower.com explains it well:

Think of the Stash as a clipboard on steroids: it takes all the changes in your working copy and saves them for you on a new clipboard. You’re left with a clean working copy, i.e. you have no more local changes.

To stash your local changes:

$ git stash

To see an overview of all your current stashes:

$ git stash list

The most recent Stashes will always be listed first.

When you want to apply a Stash, you can run:

$ git stash pop

This will pull the latest Stash and clear it from your clipboard. Or

$ git stash apply <StashName>

This pulls the specified Stash, but unlike pop, it remains saved. To delete it, you’ll need to run git stash drop <StashName>

Clone

These things are all great, but what if you’re not starting from scratch? What if you’re joining a project that already exists?

Then, you’ll want to use clone.

$ git clone https://ahhacreative@bitbucket.org/ahhacreative/git_blog_post.git

This will automatically set the remote to the “origin.” Anytime you pull, it will grab any updates made to the repository.

Sometimes, you’ll want to grab the code from a repository, but start with a clean history. To do so, simply add the flag --bare:

$ git clone --bare https://ahhacreative@bitbucket.org/ahhacreative/git_blog_post.git

.gitignore

There will be times when you don’t want to put all your code within your repository. For example, if you’re using bower, you probably don’t want the bower_components folder. Or, if you’re running grunt or gulp, you don’t need node_modules. A teammate only needs to run bower init or npm install to get those files. Committing them would only bloat your repository.

You can create a file called .gitignore and list all the files or folders to exclude. For example, here’s my .gitignore file for a WordPress project:

Remote Repositories

There are several services that you can use to host your remote repositories.

GitHub

GitHub is probably the most popular. If you make your repositories public, then you can create an unlimited number of repositories for free. You start paying when you create private repositories.

GitHub also has an excellent issue tracker built in among several other great resources.

Even if you don’t plan on paying for a GitHub account, I would highly recommend signing up for an account anyway. GitHub has practically become a standard for developers. Meaning, if you’re applying for a programming job, your potential employer could ask to see examples on GitHub.

BitBucket

I actually store all my code on BitBucket. BitBucket does everything that GitHub does, but is missing the community that surrounds GitHub.

For me, the decision came down to $$. GitHub’s business model revolves around the number of private repositories you create. BitBucket’s bases its pricing tiers on the number of users. As long as you have under 5 users, it’s free.

As a one-woman web shop, I was easily in the top tier with GitHub. But, with BitBucket, I can have as many free private repositories as I want. That’s a no brainer.

BeanStalk

BeanStalk is another great service. Like GitHub, you’re paying based on the number of repositories you use.

It’s missing a lot of the features that the other two services provide, but the biggest benefit it has is built in deployment. Meaning, you can push changes to your repository and it will automatically send those updates to your server via FTP (or however you specify). That’s almost enough to make me switch.

In the meantime, I’m using dploy.io instead. It’s made by the same company (WildBit) that makes Beanstalk. Dploy.io allows you to deploy commits from BitBucket or GitHub. Pricing is based on the number of repositories you’ve connected.

The Apps

OK, now that you know the correct terminology, I want to introduce a few GUIs:

Tower

I use Tower. IMHO, it’s the best. Just from glancing at the screenshot, you can see the buttons along the top for most of the vocabulary terms covered in this post. If you want a little more information, check out this screencast (from the Tower app team):

GitHub

GitHub has their own GUI. Unlike Tower, it’s free. I’ve downlaoded it, but I rarely use it since I have Tower.

At the end of the day, it’s whatever you’re the most comfortable with. They all accomplish the same thing. My thing is don’t let the tools get in the way of making cool stuff.

Additional Resources

Granted, we’ve covered the basics, it should be enough to get you up and going. However, if you want to dig a little deeper, here are a few additional resources to check out:

• Learn Git from the people that make Tower
• Try Git – This is a resource created by CodeSchool. It’s pretty great since it’s interactive. You can type commands into their web interface for feedback.

The post Getting your Git On: A Beginner’s Guide to Git appeared first on AMY HAYWOOD.

Naming Breakpoints

In my SASS breakpoints file, I’m using Chris Coyier’s Breakpoint trick. — It’s a mixin within _2_helpers / _breakpoints.scss file. It takes a break point name and builds out the media query for me.

@mixin breakpoint($point) 		{
	@if $point == zurb-xxlarge {
		@media (max-width: 1921px) { @content; }
	}
	@if $point == large-screen {
		@media (max-width: 1600px) { @content; }
	}
	@if $point == zurb-xlarge {
		@media (max-width: 1441px) { @content; }
	}
	@else if $point == retina {
		@media (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) { @content; }
	}
	@else if $point == regular-screen {
		@media (max-width: 1250px) { @content; }
  	}
  	@else if $point ==  zurb-medium {
		@media (max-width: 1024px)  { @content; }
  	}
	@else if $point ==  smaller-screen {
		@media (max-width: 800px)  { @content; }
  	}
	@else if $point ==  ipad-portrait {
		@media (max-width: 768px)  { @content; }
	}
	@else if $point ==  zurb-small {
		@media (max-width: 640px)  { @content; }
	}
	@else if $point ==  iphone-four {
		@media (max-width: 360px)  { @content; }
	}
	@else if $point ==  iphone {
		@media (max-width: 320px)  { @content; }
	}
}

I name my breakpoints according to the device (I know. I know.) I’m using: ipad-landscape, ipad-portrait, smaller-screen, iphone. I know the world exists outside of Apple and we are becoming (if not there already) device independent. However, I think in those dimensions.

I also have breakpoints for zurb-medium and zurb-small. I use the Zurb Foundation framework and those breakpoints already exist within the framework. Since, the grid is already collapsing at those points, I need to be able to make adjustments in my code as well.

When I want to implement these breakpoints within my SASS, it will look like this:

.something {
	padding: 100px;

	@include breakpoint(zurb-small) {
		padding: 10px;
	}
}

I have a snippet set up Sublime Text 3 that makes this really easy to implement.

Arrows

On CSS-Tricks, there’s a post about creating triangles in pure CSS. I decided to turn that into a mixin.

@mixin arrow ($direction, $size, $color) {
	@if $direction == up {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-bottom: $size solid $color;
	} @else if $direction == down {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
		border-top: $size solid $color;
	} @else if $direction == right {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-left: $size solid $color;
	} @else if $direction == left {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
		border-right:$size solid $color;
	}
}

Then, when I want to implement it:

.read-more { 
		&:before {
			@include arrow (right, 3px, black);
		}
}

That’s easy enough.

Color

I have a set of functions for dealing with color:

@function darkest( $color ) 	{ @return darken($color,20%); }
@function darker( $color ) 		{ @return darken($color,13.333%); }
@function dark( $color ) 		{ @return darken($color,6.667%); }
@function light( $color ) 		{ @return lighten($color,16.667%); }
@function lighter( $color ) 	{ @return lighten($color,33.333%); }
@function lightest( $color ) 	{ @return lighten($color,50%); }

I can easily make the rollover color, a shade darker by using:

a {
	&:hover {
		color: darker($red);
	}
}

I don’t have to open Photoshop or create an additional variable.

Black and White (and Color)

%black-and-white {
	filter: grayscale(100%);
}

%color {
	filter: grayscale(0%);
}

Now, I can easily convert anything to black and white:

.my-image {
	@extend %black-and-white;
}

Then, if I want to give it color, say on rollover:

.my-image {
		&:hover {
			@extend %color;
		}
	}

Columns

@mixin columns ($columns: 2, $gap: 90px) {
	column-count: $columns;
	column-gap: $gap;
}

This mixin makes it easy to implement columns. You can tell from the code that I have defaults set for 2 columns with 90px between each column. Meaning, I can implement it without adding any parameters:

.two-columns {
	@include columns();
}

Or if I want to over ride it I can:

.three-columns {
		@include columns(3, 30px);
}

If I want to get crazy, I can even use some of my mixins together:

.two-columns {
	@include columns();

	@include breakpoint(zurb-small) {
		@include columns(1);
	}
}

This just says that the two column class will display 2 columns, unless we’re on mobile. Then, display 1 column.

path

I have a path function that makes it easy to include images within my SCSS:

@function path($src, $dir: img) {
	$src: unquote($src);
	@return url(unquote("..")/$dir/$src);
}

When I set a background image, it might look like this:

.background-image {
	background: path("my-background-image.jpg") center top no-repeat;
}

By default, it puts my images within a img directory. I can override that, either by passing in another parameter or adjusting the function.

Floats

%left,
.left {
	float: left;
}

.right,
%right {
	float: right;
}

%text--left,
.text--left {
	text-align: left;
}

%text--right,
.text--right {
	 text-align: right;
}

%center,
.center,
%text--center,
.text--center {
	text-align: center;
	width: 100%;
}

Tehse are a few alignment classes that make it easy to knock something left, right, or center. You’ll notice I have an extends (%) as well as the class (.) that way I can use these classes on the within my HTML as well.

List Styling

.no-bullets,
%no-bullets {
	list-style: none;
}

This is great when I’m working on site navigation:

nav ul {
	@extend %no-bullets;
}

No Margin, No Padding

.no-margin-padding,
%no-margin-padding {
		margin: 0;
		padding: 0;
}

Just as the name suggests, using this will remove any margin and padding from the element:

nav ul {
	@extend %no-margin-padding;
}

Circles

.circle,
%circle {
	border-radius: 50em;
}

This turns any item into a circle:

.circle-thumbnail {
		@extend %circle;
}

Conclusion

These are all great, but what’s the point? Well, instead of having to write these styles everytime I sit down to work on a project, I have a starting point. Don’t reinvent the wheel every time if you don’t have to. Make it easier on yourself!

Second, any project that I work on, I know I have certain classes available to me. I don’t have to look up the class names. I’ve established a set of standards. Remember, smarter not harder.

The post My SASS Extends, Mixins, and Functions appeared first on AMY HAYWOOD.

There’s been a lot of talk recently about SASS and CSS structure and Style Guides. It’s kind of cool, really, to see front-end take the “front stage.”

I thought I’d add my two cents and pull back the curtain a little bit. Or…watch this video and replace “tight pants” with “SASSy pants.”

Jokes.

Preprocessing

Yes, please.

To me this is a no brainer. Any tool that is going to make my job easier, sign me up!

I’ve run the gamut on these.

I started with LESS because I could put less.js on the server and not worry about compiling. Granted, this isn’t ideal, COUGH graceful degradion.

Then, I started looking into SASS. I was curious because it seemed to be more popular and have more features. At the time, I was running an older verison of MacOS that wasn’t supported by CodeKit. So, I turned to LiveReLoad.

When I did upgrade, though, CodeKit was one of the first things I installed. I LOVED CodeKit…until I started working on a larger project that took a minute plus to compile. In all fairness, I don’t think it was CodeKit’s fault. It was probably the result of Compass building sprites and RubySASS.

Regardless, it forced me to turn to grunt and then finally, to gulp. — And gulp, I shall remain (for now).

The good part about this progression is that it allowed me to experiment with a variety of tools. When I’m collaborating with another developer, I’m able to use whatever method they’ve already put into place.

Prefixing

I used to rely on Compass for prefixing, but Autoprefixer is awesome. The best part is that it utilizes the most recent data from Can I Use to add only the necessary vendor prefixes.

Organization of Files

I keep all my images, fonts, sass, css, and javascript files in an assets folder. They are separated into 2 subdirectories, dist for distributed, compiled files, and src for source, original files.

Back in the day, when I used to write long form css by hand, I would list my redefined styles at the top: p, a, hr, you get the idea. Then, layout specific styles, pieces I would use on multiple pages, and finally page specific styles. This made sense from a cascading standpoint.

I’ve tried to maintain a similar structure for my SCSS files:

• _1_base This contains Zurb Foundation overrides and WordPress specific styles
• _2_helpers These are functions, extends, mixins, variables, and thene files
• _3_vendor Any third party styles I want to incorporate: fonts, icomoon, etc.
• _4_redefine Start to lok familiar now? These are the redefined styles that I mentioned earlier.
• _5_layout Layout specific styles
• _6_pieces Pieces that I’ll reuse in multiple places (like social media icons)
• _7_pages Page specific files.

Within each folder, there’s a file with a similar name as the folder (within _7_pages, there’s a _pages.scss file. It lists out all the other files within that directory to include:

@import "home";
@import "blog";
@import "clients";
@import "ebooks";
@import "coaching";
@import "podcast";
@import "speaking";
@import "contact";

Within the main scss folder, there’s a main.scss that imports Foundation and each folder’s “index” file:

@import “_1_base/base";
@import “_2_helpers/helpers";
@import “_3_vendor/vendor";
@import “_4_redefine/redefine";
@import “_5_layout/layout";
@import “_6_pieces/pieces";
@import “_7_pages/pages";

This means all my SASS gets compiled into 1 large CSS file. If I do end up having multiple CSS files, it’s to account for IE specific styles.

All my partial files are prefixed with an underscore.

Naming Conventions

If you didn’t know, naming CSS stuff is really hard. Plenty of really smart people, people much smarter than me debate about these things. There seems to be two main camps: BEM and SMACCS.

BEM stands for block, element, modifier.

SMACSS stands for Scalable and Modular Architecture for CSS

A lot more alphabet soup to add to the equation!

When I started trying to figure out my guidelines, cssguidelin.es became a terrific resource. There’s a section there on BEM-like naming conventions.

The fastest way to describe it is nested elements have double underscores:

.social-media__icons {}
.social-media__text {}

You don’t want to repeat the DOM in your CSS, but you do want to make it easier to identify.

Modifiers or statuses have double dashes:

.social-media-—large {}

You can also tell from my example that multiple words are not camel cased, but rather have a single dash between each word.

.social-media {
    &__icons {}
    &__text {}
    &—-large {}
}

.social-media {}
.social-media__icons {}
.social-media__text {}
.social-media—-large {}

Extendable Classes

When I’m writing classes I know I want to extend, I’ll prepend the class name with a %.

%no-margin-padding {
     margin: 0;
     padding: 0;
}

There are several advantages here: (1) The class doesn’t actually get written unless it’s used. So, I’ve been able to create a small library of elements that are available to me in all my projects. (2) The % signifies it’s was meant to be extended and is being used in multiple places = don’t change it unless you want it to risk changing multiple elements across the board.

Classes vs IDs

I try to use classes instead of IDs. The main reason is because of specificity. You want your code to be as reusable as possible and all your ID elements should be unique.

If I’m using JavaScript to hook on to a particular element, I’ll add an addition class, prepended with js-. This lets me know later that JavaScript is using that particular tag, so don’t change it!

Naming Variables

All my colors are stored in variables:

$brown     : #847b6c;
$green     : #35b774;
$sky-blue    : #5ecbea;
$teal     : #3a6a77;

When I’m naming grays, instead of trying to remember the difference between $dark-gray, $darker-gray, and $darkest-gray, I name them by the first letter / number in their hex value: $gray-a, $gray-8, or $gray-c.

All my font names are stored as variables. If you’ve used fonts.com or Google Fonts, you’ll know sometimes it’s hard to remember the exact syntax for a font name. So, storing these values within a variable makes this a no-brainer.

I’ll try and abstract this even further by creating a _themes.scss file. I’ll write an extendable classes with a more generic name:

%body {
    font-family: $dagny;
}

%sans-serif {
    font-family: $brandon;
    text-transform: uppercase;
}

%serif {
    font-family: $adelle;
}

Now, if a client wants to change the font, this becomes really easy. Instead of finding and replacing all my $dagny variables, I simply, change the typeface within my %body definition.

The same concept extends to colors:

$border-color : $gray-c;
$heading-color : $red;

When I’m defining the typography, I’ll write an extendable class and then include it:

%h1 {
    @extend %sans-serif;
    font-size: emCalc(72px); /* emCalc() is Foundation function */
}

h1 {
    @extend %h1;
}

Separating it out that way, helps me do things like this easily:

.page-title {
    @extend %h1;
}

Tabs vs. Spaces

I know I will be judged here. It’s OK, go ahead pull out your stones.

I prefer tabs. I just like seeing the extra space.

CSS Rule Sets

• I have one selector per line. The main reason is that it makes git commits far more meaningful. Plus, it means the display width of my scss file is not very wide. I can keep it in a second pane within Sublime without sacrificing to much of my screen.
• 1 space before the opening curly bracket {
• A line break after the opening curly brace
• No space before the colon
• 1 space after the colon
• No space before the semi-colon
• A line break after the semi colon. (this wasn’t always the case)
• No space before the closing curly bracket }
• Put the closing curly bracket on its own line
• A line break after the closing curly bracket
• Most properties have 1 blank line between them. But, if they’re not related, they’ll have 5 blank lines between.

SASSY things

I try to stick to the following order of properties:

• @extend

  • @includes
  • Regular property values (in alphabetical order)
  • Pseudo element nesting
  • Regular element nesting
  • Media queries

I know the alphabetical order thing sounds dumb, but it really does help when you’re skimming for a specific property.

Nesting

I try not to nest. I’m not always great at it, though. SASS just makes it way too easy.

Comments

At the top of every file, I have a comment labeling the file:

/*------------------------------------*\

VARIABLES
/*------------------------------------*/

The # is supposed to make it easy to find within the project.

Sprites

I’ve finally moved to an SVG spriting system.

Let me describe a little bit of the history, here. I originally started with Compass. It worked great, but I was having to create multiple sprite sheets to account for retina, an icon might have multiple versions within one sheet to account for the various sizes, and on larger projects, it’d take a while to render out.

Then, I discovered icomoon. It was great because it handled a lot of the problems I found with Compass. I was able to resize icons on the fly, change colors on the fly, and it cut down on my render time. However, every time I wanted to make a change, I had to visit the icomoon site, upload the new icon, download the new files, and replace my existing files.

Then, once I got a setup for SVG sprites, all these things magically fell into place.

<Insert picture of the unicorn here> Just kidding.

Within my src / img / svg folder, I’ll save all my exported svgs. Then, gulp will handle the rest. Awesome!

Other Style Guides

I’ve compiled a short list of some of the other “style guides” I’ve read on the Internet:

• CodePen
• CSS-Tricks
• Trello
• Lonely Planet
• GitHub
• SitePoint

Additional Resources

• styleguides.io – This is a fantastic resource that compiles style guides and style guide information from all over the inter webs.
• cssguidelin.es – I know I mentioned it earlier, but seriously, check out this site and take the time to read it. It definitely helped me.

In the Comments

How do you structure your style sheets?

The post My SASS(y Pants) appeared first on AMY HAYWOOD.

Let’s face it, developers are opinionated about the tools we use. I’m no different.

In my humble opinion, Sublime Text is it. Dreamweaver and Coda have too many WYSIWYG features that are unnecessary to my workflow. I originally started coding with TextMate which I loved, however, the development seemed to stall out and Sublime offered several key features that TextMate was missing.

So, if you’re interested in Sublime or if you’re trying to trick it out, this post is for you! I figure if you’re going to spend all day with a tool, why not take the time to determine the best and most effective way you can use it. Let me share some of my workflow.

Features

Some of my favorite features are actually native to the app:

Multiple Cursors

You can Cmd + Click in multiple places within your file to create multiple cursors or Alt + Drag Click to select multiple lines.

Multiple Panes

You can have multiple panes within Sublime.

I prefer 2 columns, but you could have rows instead. — If this excites you, check out the Orgami plugin (also listed below).

I’ll usually keep my HTML on the left and my SCSS and JS on the right.

I’ve also found this feature useful, if I’m working with a longer file and constantly scrolling up and down. I can pull the top of the file up in one pane and put the bottom of the same file in another pane.

Search within a project

Cmd + Shift + F will open the project search pane. You can also limit your search to certain files and folders.

If you want to limit the search to the current project type <project> within the “Where” field.

Ever since I started splitting my SASS into multiple files, this feature has become invaluable. Within the “where” field, I usually include “assets/src/scss/“ so that the results are only within my SASS directory. I don’t want the compiled .css returning.

Within the “Find Results” screen, you can double click on the file name and it will take you to that particular file — or you can click on the line of code and it will take you to that spot specifically.

Lastly, you’ll see buttons to the left of your search fields that allow to toggle regular expressions, case sensitive, whole word, show context, and use buffer. I only make use of show context and use buffer.

Keyboard Shortcuts

Your options here are limitless. I don’t know about you, but I can only remember so many at a time. I’ve included the ones I’ve found to be the most useful that I find myself using on a daily basis.

Cmd + t

This is by far my most used shortcut.

This opens a panel at the top, type the name (or part of a name) of a file within your project, hit <ENTER> and it will open.

Cmd + Shift + p

This short cut runs a close second. Similar to Cmd + t, this will open a panel at the top of my screen. Except, instead of opening files, it allows you to run commands. This could be a command from a plugin or extension or a command you might find in the menus (but don’t want to use your mouse).

Cmd + r

This allows you to easily find and jump to a piece of code within the current file. Within a CSS or SASS file, you can easily find a class or id tag. Within a PHP file, you can easily find a function.

Cmd + Shift + t

This will re-open the last tab that you closed.

Cmd + 1

Cmd + 2

Cmd + 3 (through 9)

If you numbered your tabs, left to right starting with 1, hitting Cmd + 2, would allow you to jump to the second tab. Cmd + 4, the fourth. You get the idea.

Ctrl + 1

Ctrl + 2

If you have multiple panes open and numbered them left to right starting with 1, hitting Ctrl + 2 would allow you to jump to the second pane. Ctrl + 1 will jump back to the first pane.

If you’re using this shortcut in conjunction with Cmd + 1 (through 9), the tab numbers restart within each pane. For example, I might type Ctrl + 2 to jump to the second pane, and then Cmd + 3 to jump to the third tab within that pane.

Cmd + k + l

Cmd + k + u

The sequence, here, took me a while to “get.” Basically, keep the Cmd key held down the whole time, and then type k (release) l (or u).

This will transform your selected text to all uppercase or all lowercase. I can’t tell you how many times I’ve started typing with the CAPS lock on by accident. Being the anal retentive programmer that I am, instead of having to delete that text and retype, Cmd + k + l. (I remember it by thinking konvert to upper or lower.)

Cmd + [

This will indent your entire line of code (or selection) to left.

Cmd + ]

Similar to Cmd + ], this will indent your entire line of code (or selection) to the right.

Cmd + Shift + v

This will paste and indent, automatically applying the correct indention to the pasted text.

Cmd + k + b

Slides the sidebar in and out. I use this more when I’m working remotely on my laptop and screen real estate is an issue.

Cmd + d

This will highlight the entire word that your cursor is in. If you hit it again, it will select the next instance that word is used.

Ctrl + Shift + w

I use this one all the time! It wraps your current selection with a tag.

Cmd + Shift + .

This is another one that has become second nature for me. This will automatically complete an open tag.

Cmd + l

This will select the entire line your cursor is on.

Cmd + j

This will get rid of the return at the end of the line.

Ctrl + Shift + k

This will get rid of the entire line your cursor is on. Great for cleaning up code.

Cmd + Shift + K

This will highlight the wrapping tag.

Cmd + /

Will toggle a comment block on and off.

Cmd + Shift + <Enter>

This will move your cursor to a new line above your current position.

Cmd + Enter

Same thing as Cmd + Shift + <ENTER> except, it will move your cursor to a new line below your current position.

Ctrl + Cmd + Up Arrow

Ctrl + Cmd + Down Arrow

This is great when you have a list you’re trying to reorder. Ctrl + Cmd + Up Arrow moves your current line up. Similarly, Ctrl + Cmd + Down Arrow moves your current line down.

Setting up Your Preferences

One of the “weird” things about Sublime is that the preferences file uses JSON. Admittedly, not the most user friendly.

Go to Sublime Text > Preferences > Settings – User to edit the file.

I’ve included mine:

Within my preference, I make the folder labels bold:

“bold_folder_labels”: true,

I use the Cobalt theme (goes back to my TextMate days).

"color_scheme": "Packages/Color Scheme - Default/Cobalt.tmTheme",

You can actually set that through the menus. Just go to Sublime Text > Preferences > Color Scheme > Color Scheme – Default > Cobalt

I’ve also experimented with Dayle Rees’s color schemes, if you’re looking for more options. There are instructions on his GitHub page on how to install.

Other things I’ve defined in my preference file?

"folder_exclude_patterns":
[
".svn",
".git",
".hg",
"CVS"
],

This prevents center file extensions from appearing in my sidebar and project search.

“font_size”: 14

Controls the font size. Surprise!

“highlight_line”: true,

Highlights the line that your cursor is on.

“highlight_modified_tabs”: true

This setting changes the color of the file name in a tab if the file has been modified.

“spell_check”: true

Runs spell check.

Snippets

This is where Sublime starts to get really powerful and workflow efficient.

“Snippets” of code that I find myself typing all the time, I’ll turn into a Sublime Snippet. It’s as easy as going to Tools > New Snippet. Sublime will open a new file with a template:

<snippet>
<content><!CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<!-- <tabTrigger>hello</tabTrigger> -->
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>

To understand snippets, let’s talk through the default snippet and how it would work. If we uncommented line 6 and saved this snippet as hello.sublime-snippet (all snippets must have a sublime-snippet extension), every time we typed “hello<TAB>”, Hello, this is a snippet. would appear. You’ll notice that this is highlighted. We could type whatever we want to replace “this”, hit <TAB> again and snippet would be highlighted. <TAB> again, and our cursor goes to the end of the line.

So what just happened? Well, on line 3 of our, between <content><![CDATA[ and ]]</content> is our code. The ${1:this} and ${2:snippet} signifies our tab stops.

Technically you don’t need the :this and :snippet, but they serve as placeholder values to remind you what content needs to go there.

The number tells Sublime what order to tab through.

If you want to get fancy, you can have multiple ${1:this}s in your snippets. That means that you’d have multiple cursors as you’re tabbing through. Let me give you a practical example:

This is my starting point for creating a JavaScript controller file. You’ll see two ${1}s, two ${2}s, and two ${3}s.

When I type “start_js<TAB>” my code appears with my cursor in two places. I can type the name of my variable on line 5. I’ll know I’ll initialize it on line 6 using the same name. Why not do it all at once? I hit <TAB> and I have cursor on line 5 and another on line 10. I can create a new instance of my object (line 5) and define the name of my object (line 10) at the same time… you get the idea.

<tabTrigger>hello</tabTrigger>

This is the text you’ll type (followed by the <TAB> key) to trigger the snippet. By default, this line is commented out, so make sure to name it appropriately and uncomment that line before saving it.

— It’s OK if you forget the tab trigger. Type Cmd + Shift + P. You’ll see a bar appear, type “snippet”, and then as you continue to type, Sublime will drill down and try to find the snippet you’re referring to. It will also remind you of the tab trigger on the far right.

<scope>source.python</scope>

This line will help scope your triggers. What does that mean?Well, in the case of my JavaScript starter file, I’ve limited it to only working with JavaScript files. Instead of “.python” it says “.js”. Any file I want to use that snippet in, must be saved with a .js extension.

If I have trouble with a snippet loading, it’s usually related to the scope.

By default this line is commented out, so it’s not necessary, but it prevents your snippets from conflicting with each other.

Tips and Tricks

When you’re saving your snippets, they’ll be placed in your User’s Library folder > Application Support > Sublime Text 3 > Packages > User >. From there, though, I like to keep my snippets organized. I have folders for each of the languages (CSS, HTML, JS, and PHP).

Other Snippets

If you’re curious what other snippets I use, I’ve created gists that you’re more than welcome to download and use.

CSS

• Media queries and defining breakpoints – I use Chris Coyier’s Naming Media Queries trick. This snippet follows that syntax.
• Z-Index Map – I use Chris Coyier’s trick for handling z-index.

HTML

• Picturefill for retina displays – I use Scott Jehl’s Picturefill syntax for responsive image polyfills.
• Placeholder images using placehold.it – Placehold.it offers a great service for providing placeholder images if you’re creating mock-ups. By changing a few parameters within the URL, you can control the size, color, and text color of the image.

JS

• Starter JavaScript file, referenced earlier.

WordPress (PHP)

• Creating a file include
• Using get_template_part

Plugins and Extensions

At the end of the day, the plugins and extensions are ultimately what tie me to Sublime. I’ve become so reliant on them that it would be really hard for me to change editors.

Package Control

The first thing you’ll need to do is install Package Controll. This makes it super simple to find and install packages and keep them up to date.

If you go to the Package Control install page they do a good job of explaining how to get started:

• Go to Sublime, hit ctrl + ` (it’s above the <TAB> key).
• Copy and paste the code they provide on their site and hit <ENTER>

Easy Peasy Lemon Squeezey.

Installing Packages

Now that Package Control is installed, anytime you want to install a package, just hit Cmd + Shift + P and then start to type “install”. Package Control: Install Package shoud come up as an option. Hit <ENTER>. Then, you can search for whatever package you want to install. Select it. Hit <ENTER> and it will automagically download and install itself and stay up to date. You can watch the progress in the bottom left gray bar.

Advanced New File

Advanced New File makes it easy to create new files and folders from your keyboard. I simply type Cmd + alt + shift + n, a line appear at the bottom of window and I can type the name of the file I want to create. If I want it to be within a particular folder, I simply include the path as well: assets/src/scss/_1_base/globals.scss. If I want to create a folder, I still type Cmd + alt + shift + n, but instead of typing the file name, I type the folder name. It knows the difference because instead of ending in a dot extension, end with a trailing /. For example: assets/src/img/svg/.

[
	{ "keys": ["shift+super+alt+n"], "command": "advanced_new_file_new", "args": {"is_python": false}},
]

Alignment and AlignTab

The Alignment and AlignTab make it easy to correct alignment within your code.

With the Alignment package, you can press Cmd + Ctrl + a and your selection will indent consistently. If the lines are already indented properly, it will then check to make sure the first = on each line is aligned.

The AlignTab package is a little more versatile. I will typically call it by typing Cmd + Shift + P then selecting AlignTab and <ENTER>. A input field will appear at the bottom of your window and your type the character you want the text to align by.

It’s also worth noting that AlignTab has a Live Preview Mode option that allows you to preview the change before hitting <ENTER>.

Auto File Name

AutoFileName will autocomplete the folder and file names as you’re typing. So handy! If you’re referencing an image source, it will also fill in the height and width of the image.

Bracket Highlighter

BracketHighlighter will highlight the matching tag, plus it will put an icon in the gutter to help you identify the bracket, parenthesis, tag, etc.

This has been a tremendous help in helping me troubleshoot code, when my nesting gets off.

Comment Snippets

Comment Snippets is a set of snippets that help you build comment blocks. For example, comm + tab would render

/* Comment */

Or, comm-section + tab would produce:

/*=============================================
    =            Section comment block            =
    =============================================*/



    /*-----  End of Section comment block  ------*/

You can see more examples by reading their documentation.

DocBlockr

DocBlockr is similar to Comment Snippets in that it helps create comments, but it’s more robust. For example, if you’re writing a comment block, it will maintain your style and indentation.

Also, if you’re going back and documenting variables and functions, DocBlockr will pick up on your variables and parameters, pre-filling your comment.

It can also do fancy things, like surrounding you content with slashes. // SomethingCTRL + <ENTER>:

This is just the tip of the iceberg.

Syntax

You can extend Sublime to support different languages and syntax highlighting through plugins too. There’s one for just about anything you can imagine:

• Laravel’s Blade Templating System<
• SASS
• Less
• CodeIgniter
• HAML

You get the idea.

Emmet

If you don’t install any other packages, install this one! I use Emmet (html) and Emmet CSS Snippets and Emmet Style Reflector.

It makes coding SO MUCH easier. Just to give you an idea, you can type ul>li*3>a[href=#] and then hit tab and it will generate this for you:

<ul>
<li><a href=“#”></a></li>
<li><a href=“#”></a></li>
<li><a href=“#”></a></li>
</ul>

The > sets up the nesting, the * sets up how many elements, and the [] establishes any attributes.

The CSS version is somewhat similar. I can just start to type (typically) the first two letters of each word in a property, hit <TAB> and it will generate that property for me.

For example ff <TAB> will produce font-family: ; or td <TAB> will give me text-decoration: ;.

Chris Coyier has a 20 minute screencast on how to use Emmet (embedded below). I can’t tell you how many hours Emmet has saved me, it’s more than worth taking 20 minutes to familiarize yourself.

GitGutter

If you’re running .git on your project (which you should! …no excuses!), then GitGutter will put an icon in the gutter, next to the line number, letting you know what has changed since your last commit.

…and while we’re talking about Git, you may want to check out Git and GitHub Tools. Git provides git integration directly in Sublime. (I still use Tower, though.) GitHub tools provides GitHub integration (I’ve moved most of my code to BitBucket.)

HTML-CSS-JS Prettify

Admittedly, this is not the most used plugin that I have installed. But, when I do use it, it’s like magic.

HTML-CSS-JS Prettify will take an HTML, CSS, or JS file and make the code look really pretty. It comes in handy if I copied the source from somewhere or if I’m dealing with someone else’s code.

Open Finder

Open Finder gives you the command “Finder: Open here”, which will open the current file’s folder in Finder. Sounds simple, but very useful.

Origami

This is one of my favorites. It makes opening and closing panes so easy. I simply type Cmd + K + arrow to open a new pane. Arrow up, opens a pane above. Arrow down, one below. Arrow right, to the right. Arrow left, to the left.

If I want to close a pane, I simply type Cmd + K + Shift + arrow. (Be careful not to get this mixed up with Cmd + Shift + K, just remember hold down the command key, press and release the k button, then hit shift, then arrow) Arrow up, closes the pane above it. etc.

Placeholders

Placeholders provides placeholder content. So, I can simply type lorem<TAB> and a paragraph of Lorem Ipsum will be generated.

Sidebar Enhancements

SideBarEnhacements provides some additional functionality to your sidebar. For example, it provides some additional menu options when you right click on a file or folder in the sidebar (“move to trash” and “open with…”) just to name a few.

Sublime GitHub

Sublime GitHub is a must for me. It allows me to access my gists directly from Sublime. We talked about snippets earlier and I suppose gists could provide some overlap. The difference, for me, though, is a snippet requires some interraction (tabbing through). A gist, however, could be a whole piece of code or an entire file that I reuse quite frequently. My bower.json, package.json, or gulpfile.js are perfect examples.

Within Sublime, I will type Cmd + Shift + P, then I’ll start to type gist. I’ll select GitHub: Copy Gist to Clipboard and hit <ENTER>. Within the top panel, it will list all my gists. I can start to type the name of the gist, select it with my arrow keys if it’s not already selected, hit <ENTER> and then Cmd + V to paste it into my current file.

ToDo Review

Last but not least: ToDoReview. As I’m typing code, sometime I’ll write a line, but know that I need to come back and work on it. Say I’m stubbing out a page and have a placeholder for a JavaScript slider. I know I’ll need to come back and work on the slider, but I don’t have time in the moment to implement it. So, I’ll type <!-- TODO: Implement Slider -->

The great thing about this method

1. It’s a comment, so you can’t see it on the front end.
2. It identifies the exact spot and line number in my code that still needs work.
3. It doesn’t interrupt my flow of stubbing out the page.

Later, I can go back and run TodoReview: Project Files (by hitting Cmd + Shift + P and it will generate a list of all the places in the code where I listed TODO items. That list then comes my checklist. I can double click on the TODO in the list and it will take me to that spot in the code. Once I’ve reworked it, I’ll remove the comment, and regenerate the list.

Looking for more?

Whew! That’s all I got. If I’ve just whetted your appetite or you’re looking for more information, here are a few additional resources:

• Tuts+ has a free course: Perfect Workflow in Sublime Text: Free Course!
• Sublime Text Unofficial Documentation
• Sublime Text Power User, a book and video package that is quite awesome
• A post on CSS-Tricks by wesbos who wrote the ^^^Sublime Text Power User book

I know this seems like a lot, but I know Sublime is so powerful and extendable that there’s plenty more. I’m interested to hear in the comments, what are some of your tips and tricks? Snippets? Plugins? Macros?

The post A Brain Dump on Sublime Text 3 appeared first on AMY HAYWOOD.

What do you do? How do you prevent that from happening?

Let me present another scenario. Maybe this one will hit a little closer to home. Everytime you set up a WordPress site, you have to go through the same motions of downloading, installing, and activating a set of plugins. Maybe you’ve upped the ante a little bit and have a set of files on your local machine you just copy and paste everything over. Regardless, it’s still a pain when those plugins are updated. You have to visit each individual site, download the revised plugin code and replace the existing copy on your hard drive.

There must be an easier way…and there is!

I’ve started using Composer in my workflow, now most of those headaches have evaporated.

First things first

Let’s get Composer on your machine (COUGH Mac).

If you visit Composer’s site, it will explain your options in more detail. My preference, though, was to install it globally so that the composer command can be run anywhere on your system.

Open the Terminal and from the command line, run:

On to the fun part…

Within your WordPress project directory, create a file called composer.json.

As the extension suggests, this is a preference file, written in json that describes the plugins you’ll be installing and their version numbers.

Here’s my broilerplate. Feel free to copy it and use it as a stating point for your own projects.

Let me walk through it line by line.

The first few lines are pretty obvious. Name is the name of your project. You can replace ahaywood/PROJECTNAME with your information. Ideally, this should reflect your repo name.

Under authors, you can change “Amy (Haywood) Dutton” and “email” to include your name and email address respectively.

I’m going to jump down to line 27, where it reads extras. This defines the paths for both plugins and themes. As you can tell, I have a wp-content folder within the root that includes sub directories for plugins and themes.

On line 33, I’ve listed all the plugins that the project requires.

WP Packegist makes this easy. They mirror all the WordPress plugin and theme directories as Composer repositories.

What does that mean?

If you got to WordPress.org and find a plugin you want to implement, you can also find it on WP Packegist.

Take the first plugin I have listed: Backup WordPress. The part of the URL that comes after /plugin is the name of the WP Packegist repo.

If you’re still not exactly sure what the name of the repo is, WP Packegist just implemented a search on their site. (Quick Note: I searched for “Backup WordPress,” first, and it did not return any results. But, searching for “backupwordpress” returned what I was looking for.)

Line 34 includes the full name of the repository: “wpackagist-plugin/backupwordpress”.

You can also see there are several other plugins from Wp Packegist that I’m referencing:

"wpackagist-plugin/backupwordpress" : "3.0.*",
"wpackagist-plugin/intuitive-custom-post-order" : "2.1.*",
"wpackagist-plugin/wordpress-seo" : "1.7.*",
"wpackagist-plugin/wp-help" : "1.3.*",
"wpackagist-plugin/user-admin-simplifier" : "0.6.*"

The number following the name is the version number. The star serves as a wildcard. This means for Backup WordPress, versions 3.0.1 or 3.0.4 would both qualify. You also have the option of being explicit when you define the version number:

"wpackagist-plugin/backupwordpress" : “3.0.4”

The only reason that Composer knows to look at WP Packegist for these packages, is because it’s defined as a reference on line 11 and 12.

"type" : "composer",
"url"  : "http://wpackagist.org"

Setting up a Premium WordPress Plugin (or a plugin on a private repository)

You’ll notice several other repositories are referenced on lines 14 – 25:

{
     "type" : "vcs",
     "url" : "git@bitbucket.org:ahhacreative/ahha<em>plugin</em>acf.git"
},
{
     "type" : "vcs",
     "url" : "git@github.com:ahaywood/ahha-gravityforms.git"
},
{
     "type" : "vcs",
     "url" : "git@github.com:ahaywood/ahha-wp-db-migrate-pro.git"
}

and implemented on lines 39 – 41:

"ahaywood/ahha-gravityforms" : "1.8.*",
"ahaywood/ahha-wp-db-migrate-pro" : "1.3.*",
"ahhacreative/ahha<em>plugin</em>acf" : "5.1.*"

The reason these are different is because they are premium plugins and unavailable on WordPress.org. I still want to use Composer, though, so I’m hosting them in private GitHub and BitBucket repositories

First, I tell Composer what type of files they are (vcs) and where they are located (url).

{
     "type" : "vcs",
     "url" : "git@github.com:ahaywood/ahha-gravityforms.git"
},

Then, I reference them as project requirements:

"ahaywood/ahha-gravityforms" : "1.8.*",

That takes care of our composer.json file. Woo hoo

Now let’s talk about actually getting that plugin set up correctly on your BitBucket, GitHub, Beanstalk, or whatever account.

Here’s what I do: Download the plugin code. Create a folder on my computer where this code can live. I actually have a folder called COMPOSER for this exact purpose.

Within the plugin folder, create a composer.json file

This file is a lot smaller than before:

• name is the name of the repository
• type is the type of file it is. — It could be “wordpress-plugin” or “wordpress-theme”. (Remember, when we talked about installer-paths in our first composer.json file? We defined the install paths for both a wordpress-plugin or wordpress-theme. Line 29 and 30. It actually looks at this line to know what the type of file it is and to make sure it gets installed in the right place.)
• require this line refers tothe version of composer we’re running, NOT the version of the plugin. (Can you tell I’ve gotten that mixed up before?)

Add this folder as a local repository. My app of choice is Tower.

Run an initial commit.

Then, create a remote repository and link it to your repository.

Now, you’ll also need to create a tag for your commit. This relates to the version number you’re referencing in your composer.json file. I like for my numbers to match the develpers’ release numbers.

In Tower, you can click on the branch, then right click on a particular commit. Select “Create New Tag from…” in the drop down menu.

In GitHub, tags are referred to as releases. So, if you’d prefer to do it from their site, you can click on the Releases tab, then Draft a new release.

Updating your plugin

When you get ready to update the plugin, simply download the latest release from the developers’ site, then replace all of the code in your local repository with theirs.

Commit it, tag it, and push it to your remote repository.

F-I-N-A-L-L-Y

Let’s download all these plugins and actually install them on WordPress.

Within the root of your project folder, inside the Terminal, run composer install.

It might take a while, but when it’s done, you can go to the Plugin screen of WordPress and activate all your plugins.

Troubleshooting

If you get an error within the Terminal about not having the right privileges to download the plugins, it’s probably related to your SSH keys.

I actually wrote a blog post about Setting up a Site with SSH. I can’t tell you how many times I actually reference that post myself! The post refers to SpringLoops, but the same applies here. Scroll down to where it says, “First, you’ll need to check for existing SSH keys.” Once you copy the keys to your clipboard, you can go to your service of choice, find the section that says SSH keys, and paste them there.

"require": {
     "ahhacreative/ahha_plugin_gravityforms" : "dev-master",
     "ahhacreative/ahha_plugin_wpdbmigratepro" : "dev-master"
},

{
  "name": "ahhacreative/ahha_plugin_wpdbmigratepro",
  "version": "master",
  "type": "wordpress-plugin",
  "require": {
    "composer/installers": "v1.0.6"
  },
  "dist": {
        "url": "git@bitbucket.org:ahhacreative/ahha_plugin_wpdbmigratepro.git",
        "type": "git"
    }
}

[submodule "wp"]
	path = wp
	url = git://github.com/WordPress/WordPress.git

[submodule "ahha_plugin_acf"]
 	path = wp-content/plugins/ahha_plugin_acf
 	url = git@bitbucket.org:ahhacreative/ahha_plugin_acf.git
[submodule "ahha_plugin_gravityforms"]
 	path = wp-content/plugins/ahha_plugin_gravityforms
 	url = git@bitbucket.org:ahhacreative/ahha_plugin_gravityforms.git
[submodule "ahha_plugin_wpdbmigratepro"]
 	path = wp-content/plugins/ahha_plugin_wpdbmigratepro
 	url = git@bitbucket.org:ahhacreative/ahha_plugin_wpdbmigratepro.git

composer.lock

You’ll also notice that now, in addition to your composer.json file, there should be a composer.lock file. This file locks things down. It records the exact version of the file being installed.

If you want to update your site, simply go to the composer.json file, update the version numbers and then go to your project folder, inside the Terminal, and run composer update. Yep! That simple.

This seems awfully complicated…

Like a lot of things in the dev world, it can be a lot up front. That’s the learning curve talking. But, once that’s mastered, things go a whole lot faster. So, here’s my process now:

1. Create a WordPress project using Yeoman.
2. Within the root folder, create a composer.json file, copying and pasting my own GitHub boilerplate gist.
3. Go to my project in the Terminal and type cu (I have Oh My Zsh! installed with the composer plugin activated.)

That’s it! 3 steps!

The post How to install WordPress Plugins with Composer appeared first on AMY HAYWOOD.

When you get ready to set up a WordPress site, typically your process looks something like this:

1. Download the latest version of WordPress from wordpress.org
2. Unzip it.
3. Copy and paste the files into a local directory (you are developing locally, right?)
4. Create a MySQL database.
5. Run the 5 minute WordPress install.
6. Download your starter theme.
7. Unzip it.
8. Copy and paste the theme file into WordPress’s theme directory.
9. Find your base plugins that you know you’ll need. Download each of them individually.
10. Copy and paste the plugin files into WordPress’s plugin directory.
11. Start your custom work.

That’s 11 steps, at least! I know, if you do it enough times you could probably get that down to a 15 minute setup, and that’s probably only if you have local versions of your boilerplate theme and plugins that you can quickly copy and paste into the respective directories.

But, why? Why would you even want to waste your time doing such mindless work every time you start a project when you could be spending that time designing and developing something beautiful and original?

What if I were to tell you that you could cut down that down to two minutes…on a bad day? Interested?

If you can hang with me for the length of this post, we can get you set up and you can start being more efficient.

Remember in English class, how they told us to (1) say what you’re going to say, (2) say it, and then (3) say what you said. I always remember thinking, “That sounds redundant.” Well, I’m going to take a lesson from Mrs. Nooks. I’ll tell you a little bit about the tools we’re going to put in our tool chest, then I’ll show you practically how to use them. It may get a little technical from time to time, but try to stick with it, it will be worth it.

Node.js

A lot of services are built on Node.js. If you visit the Node.js site it says it’s built on Chrome’s JavaScript runtime. Just know, that means f-a-s-t.

If we’re going to use it, we have to install it. Fortunately for us, this is easy. There’s a big green “install” button their site. Click it.

Once the package is downloaded, unzip, and double click on the package to install it. Hooray!

Yeoman

Yeoman is a project generator. It can do quite a bit, setting up sites and scaffolding (and not just for WordPress). We’re going to take the easy way out and use a generator Wesley Todd has already created specifically for starting a WordPress project: YeoPress.

Now, for installing Yeoman (yo) and YeoPress (at the same time). Within the Terminal run:

npm just means that it’s a node command.

Easy.

Now, within the Terminal, we just have to navigate to the folder we want to install WordPress inside of.

Now, run:

You’ll see the WordPress logo appear and it will start to ask you a series of questions about how you want to set up your WordPress install:

WordPress URL
If you’re doing local development (as you should), enter that URL in.

Table Prefix
This is the table prefix for your WordPress database. By default it’s wp_. Stay with that. It makes it easy when you’re looking at your database to be able to tell which tables are related to your WordPress install.

Database Host, Name, User, Password

I use a free app on my Mac, called Sequel Pro to manage my databases. But, if you’re using MAMP, you can do everything through PHPMyAdmin.

MAMP will also list all the credentials you need (host, user, and password) on the WebStart page.

Use Git?
More on this later, too, but for now, take my word and just say “Yes”…err, rather “Y”.

Would you like to install WordPress as a submodule?

There are people that sit on both sides of the fence on this one, people for and against.

My personal take?

First, let me explain what a submodule is. Submodules are a “Git thing”. It’s essentially an external Git repo that your repo references. Think of it as a nested repo that you can update it independently.

When you think of it in those terms, it makes sense to implement WordPress as a submodule. I don’t manage the WordPress core, so why not make it seperate and reference the actual WordPress repo itself?

If you implement WordPress as a submodule, you’ll using the following commands to update WordPress later:

Not too shabby.

So… “Yes” install WordPress as a submodule.

WordPress install directory
My personal preference is “wp.”

This means when I log in to the admin panel, the address will be: http://SITENAME.dev/wp/wp-admin

WordPress content directory
I go with “wp-content.”

Install a custom theme?
I choose “no.” But, I think this would be a good area, in the future, to streamline my process even more.

Does this all look correct?
It’s always comforting that it asks you to double check. “Yes.”

Boom! It will download WordPress for you and set up your config file. Granted, the set up may sound a little verbose, but we just condensed that 11 step process into a few lines of code.

For future reference:

If you clone your repo and the wp directory is blank (WordPress is a submodule, remember), run:

Also, if you need to update YeoPress, it’s as simple as running the following line:

The post The Lazy Smart Programmer’s way to set up a WordPress Site appeared first on AMY HAYWOOD.

For years, I’ve been afraid of the Terminal. I was scared that I would erase my entire hard drive with a single typo.

But, then I started using grunt. I found it to be so much faster and allowed far more task automation than the tools I had been using previously. IMHO, anything that will speed up your workflow is worth investing in (whether that’s time or money ).

Once I started spending more time in the Terminal, I became more comfortable and confident. Trust me, I still prefer a GUI (graphical user interface), but I’m no longer afraid I’m going to delete my entire harddrive. — And let’s be honest, you could delete your entire hard drive with a GUI too. Drag your harddrive to the trash and click “Empty Trash.” But, nobody in the right their mind would do that. Similarly, you’d have to type a very specific command in the Terminal to delete your entire harddrive and nobody in their right mind would do that either. — Plus if you have a typo in the Terminal, it will tell you and the command won’t run.

So, here are the commands that I’ve found to be the most useful:

cd stands for change directory. Similar to the Finder where you click on the folder, in Terminal, you just type in the directory that you want:

You can type cd .. to go up a level or cd ../.. to go up 2 levels. cd / will take you to your home directory.

The Terminal also supports tab auto completion. So you could type cd De<TAB> and it will fill in cd Desktop for you. Handy!

ls will list all files and directories in your current location.

pwd will show you the current file path to your current location.

mkdir FOLDERNAME will create a folder named FOLDERNAME. mkdir stands for “Make Directory.”

Anytime, you hit the up arrow on your keyboard, it will fill in the last command you ran. Hit it again and it will cycle to the command before that. The down arrow cycles in the opposite direction.

Just to give you an idea of how these commands are used together: when I first open the Terminal, I might type ls to see what my file / folder options are. Then:

This navigates to the GIT folder and then creates a new directory for a project. Then, navigates inside the folder I just created.

If this is still making your head spin, here’s a WYSIWYG way that I saved until the end: Open up your Terminal type in cd . Then, open up Finder, navigate to the Folder you want to open in Terminal and drag that folder from the Finder onto your Terminal window. It should enter the location for that file path for you. Now, hit <RETURN>. — You’re welcome.

If you’re feeling ambitious, a few other tips and tricks:

I use iTerm2 instead of Mac’s default Terminal. It has a little bit more functionality. My favorite feature, I have a shortcut set up so that any time I hit ALT + Cmd + Space, the Terminal overlays my entire screen. Using the same command sequence will toggle it off. This is great for quickly checking on a grunt or gulp task.

If you want to set this up:

1. Download and install iTerm2.
2. Go to iTerm > Preferences. Click on the “Profiles” tab.

3. Click on the + button in the bottom left. I labeled my profile “Hotkey Window”

   

4. In the Window tab, I tweaked the transparency, checked Blur, changed the Style to “Fullscreen”, changed the Space to “All Spaces.”

   

5. Then, under the Keys tab, check “Show/hide iTerm2 with a system-wide hotkey. As I mentioned, I’m using ALT + Cmd + Space, but do whatever works best for you.

   

6. Also check “Hotkey toggles a dedicated window with profile:” and make sure “Hotkey Window” (or whatever you named your custom profile is selected from the dropdown.

Lightning Round.

I’ve always wondered how people were able to customize their Terminal to be all kinds of cool colors.

Then, I was introduced to Oh My Zsh = Awesome.

Even if you could care less about Terminal colors, there are other short cut codes packaged within Oh My Zsh that make Terminal life even better.

I took a leap of faith and trusted Robby Russell and simply ran his automatic installer via Curl. Just copy and paste the following line into your Terminal (remember you don’t need to copy the $ sign):

Then, you can start Zsh by simply restarting or opening a new command window.

There are plenty of themes to choose from. I went with the agnoster theme and then the colors in my Terminal to use the Solarized theme.

Slow down

Sorry.

To change the theme for Oh My Zsh, copy and past the following line into your Terminal:

nano is a simple text editor that runs within the Terminal. So, we’re simply telling it to open our preference file in nano.

Go to the line that’s called ZSH_THEME=“”. Change that line to the name of the theme you want to use, in our case agnoster.

Then, type Ctrl + O for “Write Out” (also save). It will ask for the file name, just hit enter to keep the same file name.

Then, type Ctrl + X to exit.

To install the Solaraized theme, click on the download link on their site (also available on their GitHub page).

Unzip the file. Navigate to iterm2-colors-solarized.

Double click on the Solarized Dark.itermcolors file. It should launch iTerm2 with a pop-up message explaining that the color scheme has been loaded into the iTerm2 Preferences (Preferences > Profiles > Colors > Load Presets).

Make sure your “Hotkey Window” profile is selected and choose “Solarized Dark” from the Load Presets… doprdown.

As you begin using the new theme, you may notice some of the characters are not appearing correctly.

I’m using Menlo for Powerline. You can go to their GitHub repository, download, and install the font. There are some other options in the Powerline font repo.

If you’re using a font manager like Suitcase, be sure to mark the font as permanent.

If you’re still having trouble, check the Text tab within iTerm2 and make sure the appropriate fonts are marked.

Tripe Bonus.

As I mentioned earlier, “Oh My Zsh” has several shortcuts included. For example, if you’re running Composer, instead of typing composer update, you can simply type cu. Instead of git status, gst. Still not convinced? Here’s one of my favorites: you can type stt and it will open the current directory within Sublime Text. These might not sound like much, but the more you live in the Terminal, the more time it will save you.

All of these shortcuts are considered plugins. You can check out all the ones that available on the Oh My Zsh’s wiki page.

Once you decide which plugins you want to use, you can activate them similar to setting the theme.

Find the line that says plugins=()

Include the plugin name within the parenthesises.

Mine reads:

Last trick.

I have an alias set up so that anytime I type projects into iTerm, it will go directly to my projects folder, where I keep all my code. Essentially, it’s the same as typing cd ~/Code/GIT/ (just in case you were wondering the ~ references your home directory. If you’re not sure what I’m referring to, just type cd ~ and then pwd or ls in the Terminal. You’ll see.)

If you still have your preference file open (nano ~/.zshrc ), look at the bottom. There are a few examples already set up, but commented out (the # in front means the line is commented out). Add a line at the very bottom, below the examples, that reads alias projects="cd ~/Sites".

Then, write out the file (^O) and exit (^X). Restart iTerm2 (or open a new command window). Test it out. Nifty!

The post How to Overcome your Fear of the Terminal appeared first on AMY HAYWOOD.

There are eight plugins that I put on all the WordPress sites I build. Not only do they speed up development, but they also enrich my clients’ experience.

Advanced Custom Fields (ACF)

http://www.advancedcustomfields.com/

From a development standpoint, this WordPress plugin is a MUST HAVE. It makes it easy to create custom fields within posts, pages, or custom post types.

Sure, you can enter values into custom fields or program post meta data. However, this plugin makes customization much, much easier. Plus, there are several different field options (if you have a PRO): repeater field, photo gallery, options panel, flexible content.

I can’t tell you how many clients have told me how intuitive I’ve made the backend, simply because I use this plugin.

You can download version 4 for free or buy a personal license (1 site) for $25 or a development license (unlimited sites) for $100.

Gravity Forms

http://gravityforms.com/

This plugin allows you to create all kinds of forms for your site. You could argue that Contact 7 accomplishes the same purpose, however this is much more extendable.

• You can create forms with multiple pages.
• By default, all submissions are also saved within the backend and can be exported as a CSV.
• You can write in form logic (if there user answers this way, display these questions).
• I can write conditions to determine who receives email notifications, based on the type of content entered.
• With the Developer edition, you can connect the form to MailChimp so that users are automatically added to a mailing list.
• With the Developer Edition, you can also connect your PayPal or Stripe account to accept payment and / or donations.

The price tag on Gravity Forms is a little steeper than ACF:

• $39 – Personal license (1 Site)
• $99 – Business (3 Sites)
• $199 – Developer (Unlimited Sites), advanced form add ons

Yoast

https://yoast.com/

This is a FREE plugin that has practically become the standard for Search Engine Optimization within WordPress. As you enter content, it will make recommendations on how to optimize your post for Google. People pay big money for SEO consultants, when this plugin can tell you practically everything you need to know.

WP DB Migrate Pro

https://deliciousbrains.com/wp-migrate-db-pro/

Anytime I’m working on a site, I want to streamline my workflow. Migrating a site by hand is multi step process:

• Copy the database
• Change the Site URL and the Homepage URL
• Replace the dev URLs with the production URLs
• Update the permalinks

Once this plugin is set up, it reduces that process to 1 step:

• Click the button.

It costs a little bit of cash, but well worth the cost:

• $90 – Personal (12 Installs)
• $199 – Developer (100 Installs)
• $450 – Elite (unlimited installs)

<div class=“box”>NOTE: If you’re concerned about site speed and conscientious about the number of plugins you install, once you’re done developing a site, this plugin can be disabled.</div>

Backup WordPress

https://bwp.hmn.md/

This plugin is peace of mind. It does exactly as the name suggests = Backs up WordPress.

When you’re backing up your site, there are 2 things to consider: backing up the database and backing up your files. This plugin handles both.

You can use either the free version or the developer version ($99). The Developer version can be installed on an unlimited number of sites and unlocks a number of different ways to backup your site: FTP, Dropbox, Amazon S3, Google Dropbox, etc.

This is not the only option out there. Backup Buddy, iThemes Security (formerly Better WP Security), and VaultPress all offer similar services. The important thing, here, is that you are actually backing up your site. You’ll sleep better at night, especially, if you’re managing someone else’s site!

Intuitive Custom Post Order

https://wordpress.org/plugins/intuitive-custom-post-order/

Almost every time I create a custom post type for a client, they’ll need the ability to customize the order that the content appears in. This plugin allows them to go to the post listing and drag and drop posts into the order that they want. It lives up to the name = intuitive.

WP Help

https://wordpress.org/plugins/wp-help/

I wrote a post about how I create screencasts for all my clients, training them on how to use WordPress. This plugin creates a panel on the backend, where I can easily post all the screencasts I create. It’s nice because it places everything in one central location.

User Admin Simplifier

https://wordpress.org/plugins/user-admin-simplifier/

Sometimes, I want to limit what the client has access to, making it as easy as possible for them to update their site. This plugin allows me to quickly and easily control menus and navigation panels they have access to within the WordPress backend. I can even make modifications on a per user basis.

I’m all about workflow and systems and making the development process simple. It’s not about being lazy, it’s about being efficient. If installing a plugin, accomplishes that purpose, I say, “Go for it! Do it!”

What are some plugins that are must haves for you?

The post 8 WordPress Plugins I Put on All my Sites appeared first on AMY HAYWOOD.

A while back, I wrote a post on displaying a Vimeo feed using jQuery.

Recently, I had to do this for a client site. Knowing, I had written a blog post, I naturally, pulled up my blog post, so I could follow my own advice. (One of the good things about blogging = documenting your own process)

However, I quickly discovered, my code was outdated. None of it worked! Even the site that I referenced in my post, their code didn’t work! My Google Search returned my post as the top hit! — and any links after that were outdated too!

So, I wanted to update my content, using code that actually works (go figure).

The Actual Work

I found a code repository on GitHub that had everything I needed. So, download the code (direct link).

You’ll see there are several examples for you to work from. No need to reinvent the wheel!

For the site I was working on, I neeed to display a featured video at the top with thumbnails beneath it. Within the simple-api folder, there’s a folder called gallery, then I grabbed the js-example.html file. It already has everything you need.

I copied the CSS out of the header, and placed it in my site’s CSS.

#thumbs { 
  height: 298px; 
  width: 300px; 
  border: 1px solid #E7E7DE; 
  padding: 0; 
  float: left;
  
    ul { 
      list-style-type: none; 
      margin: 0 10px 0; 
      padding: 0 0 10px 0;
      
      li { 
        height: 75px; 
      }
  }
}

.thumb { 
  border: 0; 
  float: left; 
  width: 100px; 
  height: 75px; 
  background: url(http://a.vimeocdn.com/thumbnails/defaults/default.75x100.jpg); 
    margin-right: 10px; 
}

#embed { 
  background-color: #E7E7DE; 
  height: 280px; 
  width: 504px; 
  float: left; 
  padding: 10px; 
}

#portrait { 
  float: left; 
  margin-right: 5px; 
  max-width: 100px; 
}
  
#stats { 
  clear: both; 
  margin-bottom: 20px; 
}

I also copied the javascript and pasted it in my site’s JS folder. (Don’t forget to make sure you’re using jQuery).

var apiEndpoint = 'http://vimeo.com/api/v2/';
var oEmbedEndpoint = 'http://vimeo.com/api/oembed.json'
var oEmbedCallback = 'switchVideo';
var videosCallback = 'setupGallery';
var vimeoUsername = 'brad';

// Get the user's videos
$(document).ready(function() {
  $.getScript(apiEndpoint + vimeoUsername + '/videos.json?callback=' + videosCallback);
});

function getVideo(url) {
	$.getScript(oEmbedEndpoint + '?url=' + url + '&width=504&height=280&callback=' + oEmbedCallback);
}

function setupGallery(videos) {

	// Set the user's thumbnail and the page title
	$('#stats').prepend('<img id="portrait" src="' + videos[0].user_portrait_medium + '" />');
	$('#stats h2').text(videos[0].user_name + "'s Videos");

	// Load the first video
	getVideo(videos[0].url);

	// Add the videos to the gallery
	for (var i = 0; i < videos.length; i++) {
		var html = '<li><a href="' + videos[i].url + '"><img src="' + videos[i].thumbnail_medium + '" class="thumb" />';
		html += '<p>' + videos[i].title + '</p></a></li>';
		$('#thumbs ul').append(html);
	}

	// Switch to the video when a thumbnail is clicked
	$('#thumbs a').click(function(event) {
		event.preventDefault();
		getVideo(this.href);
		return false;
	});

}

function switchVideo(video) {
	$('#embed').html(unescape(video.html));
}

Replace the vimeoUsername name with the vimeo user you’re trying to pull from.

Then, copy and paste the containers within the HTML, into yours. it’s important that you leave the id tags alone so that the JS can grab them…errr.. if you’re going to change them, change them within the JS file too. Also, make sure those tags don’t conflict with your existing DOM.

<div id="stats">
  <h2></h2>
	<div style="clear: both;"></div>
</div>
<div id="wrapper">
	<div id="embed"></div>
	<div id="thumbs">
		<ul></ul>
	</div>
</div>

You should be good to go! — Unless of course, you want to restyle some elements (which is what I did). But, this will at least get you pointed in the right direction.

The post Step by Step Instructions for Displaying a Vimeo feed with jQuery appeared first on AMY HAYWOOD.