SpyreStudios

Web Design and Development Magazine

  • Design
  • Showcase
  • Inspirational
  • Tutorials
  • CSS
  • Resources
  • Tools
  • UX
  • More
    • Mobile
    • Usability
    • HTML5
    • Business
    • Freebies
    • Giveaway
    • About SpyreStudios
    • Advertise On SpyreStudios
    • Get In Touch With Us

How To Create A Simple Portfolio Site Running On Surreal CMS

August 12, 2009 by Jon 23 Comments

I always enjoy working on new things and learn about new CMS and how they work and all. I recently connected with Cory at Surreal CMS, and I decided to write a tutorial on how to create a portfolio site and run it with Surreal CMS.

It’s pretty simple actually. In this tutorial I’ll show you how I came up with the basic design, we’ll also go through coding that layout (markup and CSS) and I’ll show you how to integrate Surreal CMS and how it can be used to run your site and your client’s sites. We’ll also go through the process of branding the CMS so that your clients see your own logo instead of the Surreal CMS logo.

Now let’s get started!

First We Need A Design

I used Adobe Fireworks to create the basic layout and graphics. You can check it out below – This is what we’ll slice, code and use to run Surreal CMS with. It’s a rather basic layout, but it’ll be perfect for the purpose of this tutorial.

Here’s the layout:

SurrealPortfolio Mock-Up

Quick Overview Of The Layout Design

I created a new document in Adobe Fireworks and set the width and height to something I’m comfortable working with. In this case I went with 1200x1000px. And I chose #EEEEEE as the background color.

In the first layer I created a rectangle and gave it a height of 130px and a width of 1200px. The rectangle has a linear gradient that goes from #70A033 to #48761C (the green rectangle at the top – which we’ll use as our body background image).

I then created the logo using Century Gothic and the nav menu is set in Helvetica. I made it uppercase and put a -1px letter spacing. Then I created a main content box and set the color to #FFFFFF (so it contrasts a bit with the #EEEEEE in the background)

Then it was just a matter of figuring out what to put in those content boxes. I figured it’d be cool to have some thumbnails of recent projects (that would open in a lightbox when clicked) and a little ‘about us‘ blurb. I used some cool free icons from Function.

And then at the bottom there’s the usual footer with a Copyright notice and all.

Slicing Up The Images

I grabbed a 1x130px sample of my green gradient box. This will become our body background image and it will repeat horizontally.

Body Background Image Slice

I also saved the logo and tagline as a transparent PNG file.

Logo - Transparent PNG

And then I just sliced the icons.

Coding The Layout

Our portfolio site will have 4 pages:

  • Home
  • About
  • Work
  • Contact

First of all we’re going to have to create the following files:

  • nav.php
  • footer.php
  • index.php
  • style.css

We’re going to need more PHP files for the about, work and contact pages, but for now let’s focus on writing the markup and CSS for the homepage.

Let’s Start With The Header

You’ll notice that I use a class=”editable” on many divs and paragraphs. This is because Surreal CMS will look for those regions and make them editable via the CMS admin panel. Make sure you never use a class=”editable” for anything else than what you want to show up in the CMS.

So, we’ll need to declare the DOCTYPE and then we can start coding away. Here’s the first part of the website:

[html]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="This site is a live example of what can be done using Surreal CMS" />
<meta name="keywords" content="Surreal CMS, CMS, tutorial, portfolio, Surreal" />
<title>Simple Portfolio Site Running On Surreal CMS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
</html>
[/html]

Then the logo and navigation:

[html]
<div id="header" class="editable">
<h1><a href="/" title="Surreal Portfolio"><img src="images/logo.png" alt="Surreal Portfolio" /></a></h1>
<ul class="menu editable">
<li><a href="/">home</a></li>
<li><a href="/about.php">about</a></li>
<li><a href="/work.php">work</a></li>
<li><a href="/contact.php">contact</a></li>
</ul>
</div>
[/html]

We’ll come back to the header section later, but that’s a start. :)

As you can see I gave my header an ID of ‘header‘, and I gave the unordered list a class of ‘menu‘. Obvious, right?

And Then The Main Index

We’ll start the main index file with the header we just did and then do a php include to grab the nav.php file, like this:

[html]
< ?php include(‘nav.php’); ?>
[/html]

And then we’ll need a main div (maincontent) that will hold all of our content. Right before that maincontent div I put a paragraph and gave it a class of ‘message‘. This is the box that’s between the header and the content on the homepage.

[html]
<p class="message editable">Hello there! Welcome to surreal portfolio. This site is an example of what you can do with <a href="http://surrealcms.com/?referer=SpyreStudios" title="Surreal CMS">Surreal CMS</a> – an easy to use and powerful CMS that can make your life as a designer much easier! <span>(oh hey, and this section is easy to edit via the Surreal CMS admin panel)</span></p>

<div id="maincontent" class="editable">
</div>
[/html]

And of course we close this file with another php include, our footer file:

[html]
< ?php include(‘footer.php’); ?>
[/html]

A Simple Footer

The footer is pretty simple, just a paragraph inside a div. Then we end the document with the closing body and html tags.

[html]
<div class="footer editable">
<p>Copyright 2009 – Jon Phillips &amp; SpyreStudios – Powered by <a title="Surreal CMS" href="http://surrealcms.com/?referer=SpyreStudios">Surreal CMS</a>.</p>
</div>
[/html]

We’re Getting Somewhere

Now we have a somewhat functional homepage (though it’s butt ugly since we didn’t write any CSS yet) Here’s what our homepage should look like now:

Layout Without CSS

Here’s the homepage markup in it’s entirety (we’ll add some content and javascript soon):

[html]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="This site is a live example of what can be done using Surreal CMS" />
<meta name="keywords" content="Surreal CMS, CMS, tutorial, portfolio, Surreal" />
<title>Simple Portfolio Site Running On Surreal CMS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>

< ?php include(‘nav.php’); ?>

<p class="message editable">Hello there! Welcome to surreal portfolio. This site is an example of what you can do with <a href="http://surrealcms.com/?referer=SpyreStudios" title="Surreal CMS">Surreal CMS</a> – an easy to use and powerful CMS that can make your life as a designer much easier! <span>(oh hey, and this section is easy to edit via the Surreal CMS admin panel)</span></p>

<div id="maincontent" class="editable">
</div>

< ?php include(‘footer.php’); ?>
</body></html>
[/html]

Now We Need Content

So, before we write any CSS, let’s add some content. Let’s take the ‘maincontent’ div and add some stuff in there:

[html]
<div id="maincontent" class="editable">
</div>
[/html]

We have 2 sections:

  • Latest From The Portfolio
  • About Our Company

Since the first section to come up is the ‘Latest From The Portfolio‘, let’s create a div and add some images:

[html]
<div id="maincontent" class="editable">
<div class="content1 editable">
<h2>Latest From The Portfolio</h2>
<a href="images/portfoliosample1full.jpg" title="Work Sample 1 Full" rel="lightbox"><img src="images/portfoliosample1.jpg" alt="Work Sample 1"/></a>
<a href="images/portfoliosample2full.jpg" title="Work Sample 2 Full" rel="lightbox"><img src="images/portfoliosample2.jpg" alt="Work Sample 2"/></a>
<a href="images/portfoliosample3full.jpg" title="Work Sample 3 Full" rel="lightbox"><img src="images/portfoliosample3.jpg" alt="Work Sample 3"/></a>
<a href="images/portfoliosample4full.jpg" title="Work Sample 4 Full" rel="lightbox"><img src="images/portfoliosample4.jpg" alt="Work Sample 4"/></a>
<a href="images/portfoliosample5full.jpg" title="Work Sample 5 Full" rel="lightbox"><img src="images/portfoliosample5.jpg" alt="Work Sample 5"/></a>
</div>
</div>
[/html]

See, I also added rel=”lightbox” to my image links. We’ll need to go back in the header.php and add the JS file for this to work. I used Lightbox 2 and you can download it here and instructions are also available on the website.

Let’s go back to our header and add the JS files and the Lightbox 2 CSS file in there. Like this:

[html]
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="This site is a live example of what can be done using Surreal CMS" />
<meta name="keywords" content="Surreal CMS, CMS, tutorial, portfolio, Surreal" />
<title>Simple Portfolio Site Running On Surreal CMS</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
</html>
[/html]

Now let’s do the ‘About Our Company‘ section. Another div and 2 paragraphs inside it. You’ll notice I’ve also put H2 headings for each section.

[html]
<div id="maincontent" class="editable">
<div class="content1 editable">
<h2 class="computer editable">Latest From The Portfolio</h2>
<a href="images/portfoliosample1full.jpg" title="Work Sample 1 Full" rel="lightbox"><img src="images/portfoliosample1.jpg" alt="Work Sample 1"/></a>
<a href="images/portfoliosample2full.jpg" title="Work Sample 2 Full" rel="lightbox"><img src="images/portfoliosample2.jpg" alt="Work Sample 2"/></a>
<a href="images/portfoliosample3full.jpg" title="Work Sample 3 Full" rel="lightbox"><img src="images/portfoliosample3.jpg" alt="Work Sample 3"/></a>
<a href="images/portfoliosample4full.jpg" title="Work Sample 4 Full" rel="lightbox"><img src="images/portfoliosample4.jpg" alt="Work Sample 4"/></a>
<a href="images/portfoliosample5full.jpg" title="Work Sample 5 Full" rel="lightbox"><img src="images/portfoliosample5.jpg" alt="Work Sample 5"/></a>
</div>
<div class="content2 editable">
<h2 class="coffeecup editable">About Our Company</h2>
<p>We’re a small, yet highly focussed, team of designers and developers from Montreal, Canada. We build websites for clients from all over the world and we love what we do!</p>
<p>This website is our home on the web – please take a minute to have a look around or <a href="/about.php" title="About Surreal Portfolio">click here to learn more about us…</a></p>
</div>
</div>
[/html]

Now The CSS!

I don’t think it’s necessary for me to explain the whole CSS file. Everything is pretty self explanatory: maincontent div for the main content, content1 div for the first block of content, same for the second block of content, unordered list with a class of menu for the navigation menu. Pretty easy, right? (you can always leave a comment and I’ll try my best to answer your questions)

Here’s the CSS in it’s entirety:

[html]
body {
background:#eee url(images/bodybg.jpg) repeat-x;
color:#444;
width:900px;
font-size:14px;
font-family:helvetica, arial, sans-serif;
margin:0 auto;
padding:0;
}

#header {
margin:0;
padding:0 0 15px;
}

h1 {
float:left;
width:397px;
margin:0;
padding:30px 0 20px;
}

h2 {
font:bold 26px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:0 0 20px;
}

h2.computer {
background:url(images/computericon.jpg) no-repeat;
font:bold 18px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:8px 0 30px 56px;
}

h2.coffeecup {
background:url(images/coffeeicon.jpg) no-repeat;
font:bold 18px helvetica, arial, sans-serif;
color:#000;
letter-spacing:-1px;
margin:0;
padding:12px 0 30px 50px;
}

h3 {
font:normal 22px georgia, serif;
color:#000;
margin:0;
padding:25px 0 12px;
}

img.right {
float:right;
background:#eee;
border:1px solid #ccc;
margin:0 0 15px 20px;
padding:10px;
}

img.left {
float:left;
background:#eee;
border:1px solid #ccc;
margin:0 20px 15px 0;
padding:10px;
}

ul.menu {
text-transform:uppercase;
float:right;
margin:0;
padding:50px 0 0;
}

ul.menu li {
font-size:18px;
font-weight:700;
letter-spacing:-1px;
display:inline;
margin:0;
padding:0 8px;
}

ul.menu li a,ul.menu li a:visited {
border:none;
background:transparent;
color:#fff;
display:inline;
margin:0;
padding:0;
}

ul.menu li a:hover,ul.menu li a:visited:hover {
background:transparent;
border:none;
color:#000;
display:inline;
margin:0;
padding:0;
}

p.message {
clear:both;
font:normal 24px helvetica, arial, sans-serif;
background:#fff;
letter-spacing:-1px;
color:#313F4C;
line-height:30px;
margin:0 0 30px;
padding:30px;
}

p.message span {
font:18px normal georgia, ‘Time New Romans’, serif;
color:#888;
font-style:italic;
margin:0;
padding:0 0 0 10px;
}

#maincontent {
float:left;
width:840px;
font:14px normal helvetica, arial, sans-serif;
background:#fff;
color:#313F4C;
line-height:34px;
margin:0 0 10px;
padding:30px;
}

#maincontent p {
line-height:28px;
}

ul {
line-height:18px;
list-style-type:none;
display:block;
margin:0;
padding:0;
}

ul li {
list-style-type:none;
display:block;
margin:0;
padding:0 0 8px;
}

ul li a {
list-style-type:none;
color:#556D84;
display:block;
margin:0;
padding:10px;
}

ul li a:hover {
list-style-type:none;
display:block;
color:#000;
margin:0;
padding:10px;
}

#maincontent img {
border:1px solid #ccc;
background:#eee;
margin:0 3px;
padding:8px;
}

#maincontent img:hover {
border:1px solid #bbb;
background:#ddd;
margin:0 3px;
padding:8px;
}

a,a:visited {
text-decoration:none;
color:#48771E;
}

a:hover,a:hover:visited {
text-decoration:none;
color:#000;
}

.footer {
float:left;
font-size:12px;
width:900px;
color:#999;
padding:10px 0 40px;
}

.content1,.content2 {
width:840px;
font:16px normal helvetica, arial, sans-serif;
background:#fff;
color:#333;
margin:0 0 30px;
padding:0;
}
[/html]

Creating The Other PHP Files

Now that we’re done with the header, navigation, main index, footer and CSS, let’s create our work, about and contact pages.

This is actually very easy: Simply duplicate the index.php file 3 times, rename to about.php, work.php and contact.php and you’re almost done. Open up those 3 new files in your favorite editor and remove the ‘message’ paragraph and insert some lorem ipsum in the maincontainer div. (at the end of the tutorial you have a download link so you can grab all the files from this tutorial)

Creating Your Surreal CMS Account – PROMO CODE!

We’ve partnered with Surreal CMS to give you guys and gals a little something. You can create a free account with Surreal CMS but there are some restrictions. With the upgraded account you’d be able to manage an unlimited number of websites, use your own custom logo and color scheme (clients will love this), and access the CMS via your own domain at cms.yourdomain.com instead of via surrealcms.com. Those features are not available with free accounts.

The Designer/upgraded account costs $25 per month, but Cory agreed to give the first month free to readers and visitors of SpyreStudios. You can read more about it and grab the promo code by visiting this page (this offer is valid up till September 31st).

Integrating Surreal CMS To Our Design

Now that we have a working website, let’s work on the fun (and actually pretty easy) stuff :)

Surreal CMS really is a simple, no-fuss CMS. All you have to do to make a region editable (I mentioned this earlier) via the CMS is to add a class=”editable” to an element. It’s that easy! You can also add a title=”something here” to elements, though if an element already has an ID, you won’t need to add the title attribute.

Step By Step

1- Go to Surreal CMS and signup. Once you’re done with the signup process, login with your email and password. You’ll be on the ‘My Websites’ page. Click on ‘Add a Website’ and enter your FTP information, test the connection and browse to your website root. The website root is where you will upload your website files, in most cases that’s the main folder, also called ‘root directory’.

Surreal CMS Config

Click ‘Save Changes‘ when you’re done.

2- Click on the website URL and then on ‘Enable Pages‘. Then select the pages you’d like to enable. Make sure you actually upload those files manually to your website root directory. For this tutorial I uploaded all my php files, my css file, the js folder that contains the lightbox script, a css folder that contains the lightbox css, and my images folder. When you’re done, you’ll be able to change the display name of the file so it’s easier to work with in the CMS.

Surreal CMS Rename Files

3- Since we put the class=”editable” to many of our divs and paragraphs, we’ll be able to edit those regions via the admin panel. Next to each of the file names you’ll see an ‘Edit‘ link, click on the one next to the index.php. It’ll load the Editor. There you will see the content regions you defined as ‘editable’, you’ll also have a ‘publish to web’ button which, when clicked, will update your html or php file. And you can also edit your markup by clicking on the ‘Edit Content Regions’ button. What that means is once you’ve uploaded your files, you don’t have to re-upload anything, you can manage everything via Surreal CMS.

Surreal CMS Editor

That’s basically it. You can manage your whole site from within the Surreal CMS admin. Want to add a new editable region? Easy! Just load up the ‘Content Region Editor‘ and add the class=”editable” to the element you want to edit with Surreal CMS.

The class=”editable” can be added to a number of html tags (more than this list – those are some of the most popular ones anyway):

  • blockquote
  • div
  • h1 — h6
  • img
  • ol, ul
  • p
  • pre
  • span
  • table, td, th

4- You can even change the title and meta description and keywords via Surreal CMS. Just click on ‘Properties‘

Surreal CMS Editor

Adding Editors

This feature is pretty cool. Say you’re building websites for clients and you want them to be able to edit their site themselves (that’s the whole point right?) Simply add an editor, edit the welcome message, and voila! You’re done! Your client will be able to easily edit the content of the pages the same way you would via the Surreal CMS admin.

Adding Editors In Surreal CMS

Use Surreal CMS With Your Own Domain

That part is pretty straight forward. This is if you would like to be able to access the CMS via your own domain instead of the default edit-content.com website.

  • Login to your web hosting account
  • Navigate to the DNS (or Name Server) Management section
  • Select a domain/sub-domain that you want to use to access the CMS
  • Create a CNAME record that points to edit-content.com

Branding Surreal CMS With Your Own Logo And Color Scheme

Of course if you use Surreal CMS to build websites for your clients you’ll want them to see your logo and color scheme instead of the default colors and logo. Click on the ‘My Account tab at the top, upload your logo and change the color scheme. It’s that easy. You can also change your contact information and password via this page.

Here’s the default design of the Surreal CMS admin:
Surreal CMS Branding

Here’s my own:
Surreal CMS Branding

It’s A Wrap!

That concludes our tutorial on creating a portfolio site running on Surreal CMS. I hope you liked it! Here’s our final result: Surreal Portfolio.

You can download the files from this tutorial here (downloaded [download#3#hits] times already!).

If you would like to try out Surreal CMS, remember that you can get a Designer Account for the first month for free (the offer is valid up till September 31st). The Designer/Upgraded account enables features that are not available with the free account! :)

Cheers!

Filed Under: CSS, Design, Tools, Tutorial

Comments

  1. Steven Snell says

    August 12, 2009 at 9:18 pm

    Nice tutorial Jon. Looks pretty similar to Cushy CMS. I like the simplicity of a CMS like this for certain purposes. There are times when using WordPress or some other CMS cause more confusion for clients than it is worth.

  2. Jon Phillips says

    August 12, 2009 at 11:39 pm

    Thanks a lot Steven! I’m with you, WordPress is great, love it, but sometimes it can be overkill especially when building a ‘static’ site and you don’t need a blog platform. Depends on the project :)

  3. Pablo Lara H says

    August 13, 2009 at 11:44 am

    Very useful. Thank you. I have recently won a free account for Surreal CMS and with your article I know how to use it.
    Thaaaaaank you¡¡

  4. Luci says

    August 13, 2009 at 11:57 am

    Nicely written tutorial! I am a big fan of WordPress though i agree with the previous comments – sometimes it can be completely over the top for a simpler, static site. Next time i need something simpler, i’ll consider Surreal after reading this tutorial.

  5. Selvam says

    August 15, 2009 at 9:31 am

    great news for non technical ppl

  6. Lucas Tadeu says

    August 15, 2009 at 10:57 am

    Great tutorial!It’s really easy-to-follow ;)

  7. cocinas baratas says

    August 18, 2009 at 3:54 am

    Doesn’t seem very dificult, and the CMS looks great!

  8. Webjohn01 says

    August 19, 2009 at 10:41 am

    Hi Jon!

    It was very impressive tutorial for us starting out designers. I would like to ask can you make another these but it was created in photoshop?

    Thank you!

  9. Matt Ward says

    August 23, 2009 at 10:49 pm

    I just want to say that I love the integration of the Tim Horton’s coffee cup into the design! Go Canada!

  10. Martin Sanders says

    August 26, 2009 at 8:45 pm

    Thanks for introducing me to Surreal CMS, I’ve just launched my ow new portfolio site using MODx. I found MODx supper easy to use and the templates are excellent if your unfamiliar with PHP.

  11. Lisa Santos says

    August 27, 2009 at 10:17 pm

    Thanks for introducing Surreal CMS. I had never heard of it until now. I have to agree with one comment about WordPress sometimes being over the top for some clients. It’s great to know there is something much simpler and cleaner. Great tutorial.

  12. Daniel says

    October 21, 2009 at 8:34 am

    This tutorial is fantastic. But I have a question, when I navigate through the pages wanted to maintain the current of each menu item? I try but I could not.
    Thank you for you help!

  13. Karen says

    September 6, 2010 at 10:27 am

    Thanks for tutorial – been searching for the answer to the following on forums and no luck so far. Does lightwindow v2 work in same way as lightbox?
    e.g. in lightwindow class=”lightwindow” and not editable

    so could you apply the same as lightbox e.g. class=”editable” and rel=”lightwindow”?

  14. pc says

    October 1, 2010 at 1:30 pm

    nice one man…i become a fan of urs..thanx

  15. Arturo Ryes says

    February 17, 2011 at 3:35 pm

    Loved it! This is a great post!

Leave a Reply

Your email address will not be published. Required fields are marked *

Please prove you're human *

Recent Posts

  • What Factors Determine the Best Digital Marketing Agency?
  • 31 Fresh Design Elements for Spring and Easter
  • 10 Templates for Music Concert Flyers
  • How to Build a Web Scraper Using Node.js
  • Best PHP Books, Courses and Tutorials in 2022

Archives

  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • June 2019
  • May 2019
  • April 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • October 2018
  • September 2018
  • August 2018
  • July 2018
  • June 2018
  • May 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017
  • August 2017
  • July 2017
  • June 2017
  • May 2017
  • April 2017
  • March 2017
  • February 2017
  • January 2017
  • December 2016
  • November 2016
  • October 2016
  • September 2016
  • August 2016
  • July 2016
  • June 2016
  • May 2016
  • April 2016
  • March 2016
  • February 2016
  • January 2016
  • December 2015
  • November 2015
  • October 2015
  • September 2015
  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • January 2015
  • December 2014
  • November 2014
  • October 2014
  • September 2014
  • August 2014
  • July 2014
  • June 2014
  • May 2014
  • April 2014
  • March 2014
  • February 2014
  • January 2014
  • December 2013
  • November 2013
  • October 2013
  • September 2013
  • August 2013
  • July 2013
  • June 2013
  • May 2013
  • April 2013
  • March 2013
  • February 2013
  • January 2013
  • December 2012
  • November 2012
  • October 2012
  • September 2012
  • August 2012
  • July 2012
  • June 2012
  • May 2012
  • April 2012
  • March 2012
  • February 2012
  • January 2012
  • December 2011
  • November 2011
  • October 2011
  • September 2011
  • August 2011
  • July 2011
  • June 2011
  • May 2011
  • April 2011
  • March 2011
  • February 2011
  • January 2011
  • December 2010
  • November 2010
  • October 2010
  • September 2010
  • August 2010
  • July 2010
  • June 2010
  • May 2010
  • April 2010
  • March 2010
  • February 2010
  • January 2010
  • December 2009
  • November 2009
  • October 2009
  • September 2009
  • August 2009
  • July 2009
  • June 2009
  • May 2009
  • April 2009
  • March 2009
  • February 2009
  • January 2009
  • December 2008
  • November 2008
  • October 2008
  • May 2008
  • April 2008

Categories

  • Accessibility
  • Android
  • Apps
  • Art
  • Article
  • Blogging
  • Books
  • Bootstrap
  • Business
  • CSS
  • Design
  • Development
  • Ecommerce
  • Fireworks
  • Flash
  • Freebies
  • Freelance
  • General
  • Giveaway
  • Graphic Design
  • HTML5
  • Icons
  • Illustrator
  • InDesign
  • Infographics
  • Inspirational
  • Interview
  • Jobs
  • jQuery
  • Learning
  • Logos
  • Matrix
  • Minimalism
  • Mobile
  • Motion Graphics
  • Music
  • News
  • Photoshop
  • PHP
  • Promoted
  • Rails
  • Resources
  • Showcase
  • Tools
  • Tutorial
  • Twitter
  • Typography
  • Uncategorized
  • Usability
  • UX
  • Wallpapers
  • Wireframing
  • WordPress
  • Work

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

SpyreStudios © 2022