Categories
Archived Design Uncategorized

HTML5 Boilerplate – Quick setup script

Recently I’ve been setting up new websites left, right and center.  These have been almost exclusively for testing purposes and, since I’ve been basing them all off Paul Irish’s HTML5 Boilerplate, I needed a quick way to get a new site template up and running.

Enter automation

I set about making a quick script to automate the process of setting up a new website template based on the boilerplate (which I’ll refer to as h5bp from here on).  The steps it goes through are as follows (Bash-specific but could be retro-fitted to Windows without too much trouble).

  • Checks to see if git is installed.  This is required as the latest h5bp version is available from github.
  • If git isn’t installed, the script will fail gracefully and provide instructions on how to install git.

      • Checks for a single parameter.  If found, the script will use this as the name of the directory to create the project in, relative to “.”
      • If no parameter is specified, the destination folder is setup to a folder named after the current date and time.
      • Checks to see if the destination folder exists (almost impossible if using the date and time method).  If it’s not found, it is created.
      • Initialises a new git local repository in the new project directory.
      • Clones the latest h5bp version into the project directory.
      • Clones the latest h5bp ant build script into the project directory,
      • Cleans up the directory structure a bit, e.g. renames the ant build script from “ant-build-script” to “build”  I’ve found this to be a required step before the build script will run properly.
      • Converts the h5bp markdown documentation to HTML, if pandoc is found on the local system.
      • Does a bit more cleanup and moves some non-critical files into a directory called “_exclude”
      • Configures some global git options, i.e. the user name and user email address.
      • Adds all the project files to the new git repository.
      • Does a full commit of the new files.
      • Finishes up with a small message showing some steps that may be helpful to new users.

    Care to share?

    Sure.  If you’re interested in the script, here it is in its entirety.  On my system I have it installed as an alias by putting into ~/.bash_profile inside a function called h5bp.  If you want to use the script in a stand-alone way, that works fine, too.  For the purposes of this article, I’ll show the code in its function-based form.

    The script

     # function to create a new website based on the HTML5 BoilerPlate (http://h5bp.com) function h5bp { if [[ -z `which git` ]]; then echo " The git binaries were not found on this system and are required before this script will run properly." echo " If you are sure git is installed, please investigate why the 'git' command wasn't found, then try again." echo " To do this, you can try running "echo `which git`" (without the double quotes but keep the single ones!)." echo " If you don't have git installed, please download and install it by following the instructions located at http://git-scm.com/download." else echo "git binary found at `which git`." echo "Creating new website." if [ -z $1 ]; then newFolderName=`date +%Y-%m-%d_%H-%M-%S` echo "No folder name specified, using current date and time: $newFolderName." else newFolderName=$1 echo "Using '$newFolderName' as destination folder." fi if [ ! -d $newFolderName ]; then echo "Destination folder not found, creating it now." mkdir $newFolderName cd $newFolderName else cd $newFolderName fi echo "Initialising new git repository in `pwd`." git init --quiet echo "Getting latest h5bp build from github." git clone https://github.com/h5bp/html5-boilerplate.git echo "Getting latest h5bp build script." git clone https://github.com/h5bp/ant-build-script.git echo "Moving files into place." mv html5-boilerplate/* ./ rm -Rf html5-boilerplate/ mv ant-build-script/ build/ mkdir _exclude/ if [[ -z `which pandoc` ]]; then echo "Unable to convert the readme.md file to HTML for viewing. You can fix this by installing 'pandoc' from http://johnmacfarlane.net/pandoc/." else echo "Converting markdown documentation to HTML." pandoc readme.md -o readme.html mv readme.html _exclude/ fi mv readme.md _exclude/ echo "Setting git global options." git config --global user.name "Put your name here" --quiet git config --global user.email you@yourdomain.com --quiet echo "Adding new files to new git repository." git add * echo "Running initial project commit." git commit -m "Initial h5bp project creation" --quiet echo "" echo "You should edit humans.txt in the '$newFolderName' directory before going any further." echo "Also, if you're not familiar with how to use the h5bp, you should go through the readme file in the _exclude/ directory (readme.md, or readme.html if you have pandoc installed)." echo "" echo "Done!" fi } 

    Can we see it in action?

    Of course you can.  I’ve recorded the script in action and put it up on YouTube – see below.  To view the video in HD so that your viewing experience doesn’t suffer from small-video-itis, I’d highly recommend watching it on the YouTube website (opens in a new window).

Categories
Archived Design Uncategorized

Typekit is so much awesomeness

Today I finally got around to implementing Typekit on digitalformula.net.  It’s something I’ve been meaning to do for ages but because of other commitments I just haven’t had time.

Anyway, I use ExpressionEngine to publish this site and a local build of Debian Linux to develop the site with.  Because I have a ‘Portfolio’ account on Typekit it means I can have unlimited sites, unlimited fonts per kit and access to the entire font library.  I tried cufón a while ago but had mixed results whereas Typekit kinda just works.  Yes, yes, cufón is great but personally I prefer Typekit.  🙂

Because of the two build environments it means that the Portfolio license can be used to create two different kits and that means telling ExpressionEngine which kit to load.  I have the following code in the section of this site and it works perfectly.

<?php
	if (strpos($_SERVER["SERVER_NAME"], "local"))
	{
	?>
		<!-- typekit - dev -->
		
		try{Typekit.load();}catch(e){}
	<?php
	}
	else
	{
	?>
		<!-- typekit - live -->
		
		try{Typekit.load();}catch(e){}
	<?php
	}
	?>

Just replace [dev kit code] and [live kit code] with your own codes and you’re good to go.  Super simple and super effective.

Categories
Archived Design Mac & OS X Uncategorized

A couple of deviantART submissions

Over the last couple of days I’ve been hacking about with theming in OS X.  It’s something I’ve always quite liked since back in the day when WindowBlinds used to be the way forward on Windows.

The first theme setup I tried incorporated the Gill Sans Text Dock Icons available from deviantART.  Because the icon collection didn’t have icons for some of the apps I use, I made my own and submitted them for others people to use.  The first collection extension is available on deviantART by going to Gill Sans Text – More Icons.  I’ve also made an icon for Traktor Scratch Pro after another user requested it – it can be downloaded from Traktor Scratch Pro for Gill Sans Text on deviantART.

New theme?

I then tried the Float Dock Icons that I found on a MacThemes forum – they’re awesome!  That didn’t have icons for some of the most popular apps, either, so I made some for the best-known Adobe apps.  The icons can be downloaded from Round shiny Adobe dock icons on deviantART.  Cool.  🙂

What did I come up with?

After playing about with a ton of different combinations I came up with one that I quite like.  It’s simple (in my opinion) yet functional without being overly garish – check it out.

Modified OS X desktop
Modified OS X desktop

Why?

Why did I do this?  There’s really no good reason other than being a bit of a geek and needing an excuse to dive back in the graphics software that I’ve been missing lately.  I’m no designer (obvious, huh) but doing this stuff is pretty relaxing.  🙂

How?

I’m in the process of writing up how I made those changes now so if you’re interested in doing this yourself, stay tuned.

Categories
Archived Design Uncategorized Wordpress

New blog design for Erin King Photographer

At the end of last week Erin decided that her Erin King Photographer blog, while really nice and functional, needed a bit of a face-lift. There were a couple of reasons for this:

  • The NextGen Gallery plugin being used didn’t work 100% correctly with the WordPress theme we chose.
  • The best way to showcase photography isn’t to use thumbnail-based galleries anymore.
  • The existing theme was getting a bit dated – not because it used old techniques but because it just needed a change.

What changed?

Without going into detail that people aren’t interested in, the basic way forward was to choose a new theme and modify it to suit our needs. I’m running the blog on WordPress 3, my blogging engine of choice for client sites that don’t require extreme levels of customisation. I’m also a bit of a WordPress fan, which helps. 🙂

So, with the blogging engine already well-established, the major decision had to be made – which theme to use. Now, when I say ‘which theme’ I’m sure there are a ton of people that always design their own. This isn’t ideal for Erin’s site because it needed to be updated quickly and still needed to retain the management/configuration options Erin was used to. For this reason I decided to use the built-in Twenty Ten theme and modify the CSS as required. For this particular redesign I was kinda the "hired hand", with Erin dictating how the site should look.

I’m pretty happy with the result because it’s not garish or over-the-top and doesn’t have a stupidly high number of on-screen elements. It retains all the customisation options that Erin needs (widgets etc) but now shows the blog posts’ photos full-size without the use of any 3rd-party gallery plugin.

What does it look like?

Here’s a low-resolution view of what the site looks like now. It’s clean, simple, and draws the reader’s eye to the photos, not away from them. To visit the real site, please feel free to check Erin King Photographer’s blog.

Erin King Photographer Blog - Screenshot

Categories
Archived Design Uncategorized

HTML5, div and section elements

Finally, some clarity!

When I started making the version of Digital Formula before this one, I decided to have a go at creating semantically-correct markup that also validated using the industry-standard W3C Validator.

This turned out to be more difficult than I thought but not for complexity reasons. I was battling with figuring out which elements to use and when, mostly because the number of articles online that spout various opinions number in the tens of thousands. Not what I was looking for at all. So, here’s what I came up with.

Resources – are any of them correct?

The WhatWG draft says the following:

The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element’s contents would be listed explicitly in the document’s outline.

That’s one of the resources that makes the most sense to me, especially when talking about semantic markup. I couldn’t go any further, though, without mentioning A Blog Not Limited, the website of Emily P. Lewis. Emily’s series The Beauty of Semantic Markup contains what I’d consider to the best 1-person collection of articles re markup semantics. Part 3 of that series includes the following:

<section> is used for content that can be grouped thematically. A <section> can have a <header>, as well as a <footer>. The point is that all content contained by <section> is related.

That makes perfect sense & combined with the draft specification from WhatWG really helps clear things up for me.

So I guess, no. None of them are correct as such but taken in appropriate measures any resource can be used to help your understanding of semantic markup.

Categories
Archived Design Non Technical Opinion Uncategorized Wordpress

Pay it forward …

For a few years now I’ve been dabbling in a bit of 3D design here and there. Purely as a hobby though and I’d never even dream of calling myself any good at it.

Anyway, I used to learn from a bunch of talented dudes over http://www.3dcaffeine.com, a site that unfortunately no longer exists (internal problems? I don’t know.) One of the members there was a Romanian guy by the name of Flavius, a very talented 3D designer with a pretty scary level of skill for someone his age, around 20 as I write this I think … no he’s not a Romanian scammer!

He’s in the unfortunate position where web hosting and all the bits that go with it are pretty hard to come by so I decided to do as the title of this post says – pay it forward. To do this I offered to pay for web hosting and domain registration for a website to be created, a site where Flavius could showcase his work, demonstrate his skills and get the word out there so that people know there are talented designers everywhere.

The site’s now live and, while it’s yet to have much content (it’s been live around an hour now but will undergoing plenty of changes over the next little while), is coming along nicely with a decent gallery to get started, backed up by a beautiful WordPress theme by Nick Roach over at Elegant Themes. Go there if you want themes – it’s the site I choose to use for all my WordPress themes.

Flavius’ new site can be found at http://flaviuscristea.com and will have more content added as time goes on. Please feel free to let me know if you find any problems there as I’ll be doing the back-end maintenance of the site even though Flavius will be maintaining the actual content.

Cool. 🙂