Troat is still in early development, and created mostly out of experimentation and the fun of creating another font. A colleague was the originator of the design for its minimalist block style.

The structure is perfect for large in your face designs, and as an accent to a design versus a font intended to be read easily. There are four variants of Troat. Lowercase characters as an outline style, and uppercase as filled of both a heavy block style and a more legible style.

Troat is far from complete, but I figured this would be a great time to see what some people think. Currently it consists of only A-Z. We are going through the process of designing numbers and symbols that would fit the current style of Troat, while being discernable from the rest of the characters.

Please do not redistribute until we create the final version.

Troat by AJ Troxell is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.
Based on a work at http://ajtroxell.com/.

While my written spelling and grammar are rated a B+ on a good day, I am still a huge fan of Markdown. If you are a blogger at any level, Markdown is the language, I mean tool, for you.

But while Markdown is a wonderful tool in and of itself, how can we make working with WordPress and Markdown better? In comes Sublime Text. Yes, the best editor created thus far can also function as a blogging tool.

Getting Set Up

The process is fairly simple, but you’ll need a few things to get set up. If you are reading this, I assume you already use Sublime Text, and of course have a WordPress blog.

1. Get familiar with the Markdown syntax and then install the Markdown on Save Improved plug-in for WordPress and activate it.
2. Now you need to fetch Sublpress for Sublime Text. You can download it from the website using GitHub, or install it using Package Control.
3. Configure Sublpress per the instructions after you install it, and ensure that you have XML-RPC enabled in your WordPress dashboard if you are running a version of WP previous to 3.5.
4. Since you may be using some custom fields, and may have inline images, you really don’t want your posts getting published automatically when you save. At this time Sublpress does not support these options. So you need to edit your wp-includes → class-wp-xmlrpc-server.php file.
5. Open it up and search for

   $post_status = ($publish) ? 'publish' : 'draft';

   and change every instance of it to read

   $post_status = ($publish) ? 'draft' : 'publish';

   which will ensure that each post you make is made as a draft.
6. Now you are ready to start publishing within ST.

Blogging with Sublpress

To get started, access ST commands palette by pressing shift + ⌘ + p (shift + alt + p in Windows). Then type “WP” to see all the commands available to you for Sublpress.

You’ll want to choose WP: New Post so you can get familiar with it, and to start using Markdown in your posts so you can see how things translate to WordPress with Markdown on Save Improved.

You can use copy this sample, or write your own:

#Sample Post H1

This is a sample post written in markdown. __Markdown on Save Improved__ will ensure that when this post is saved, it will retain its syntax.

##Markdown Items (H2)

Writing Markdown is extremely simple, but incase you have problems you can read about the syntax of Markdown [here](http://daringfireball.net/projects/markdown/syntax "Markdon: Syntax"), or read a useful cheat sheet [here](http://support.mashery.com/docs/customizing\_your\_portal/Markdown\_Cheat\_Sheet "Markdown Cheat Sheet")

###Lists

####Unordered

- An unordered list is super simple.
- Just use a dash, esterisk, or plus sign.
* You can even mix and match.
+ Not that you would want to.

####Ordered

1. Numbers.
2. Just numbers.
3. As simple as that.

####Definition List

List Defined
: A number of connected items or names written or printed consecutively, typically one below the other.
Item Defined
: An individual article or unit, esp. one that is part of a list, collection, or set.

###Emphasis

####Italic

_Italicising text_ is easy and can be *done* a couple of different ways.

####Bold

__Bolding text__ is also easy and can be **done** a couple of different ways as well.

###Escaping

Escaping some symbols is required to make sure that Markdown doesn't interpret them as one of its own. These characters include \\`\*\_\{\}\[\]\(\)\#\+\-\.\!\:\|

<small>Note: The good thing about markdown is that it also supports standard HTML. Oh, and you don't have to escape periods all of the time. So you ended a sentence with, "in 1984 PERIOD". Well, you would want to escape that period, like "in 1984\." so that Markdown doesn't interpret this as a list item.</small>

At any point during the creation of your post can you save it or access the menu and upload images.

Finishing Up

When you have finished,save your document in Sublime Text and it will be published as a draft in WordPress.

Although it is possible to add images to your posts using Sublpress, I haven’t quite gotten everything working flawlessly. I can upload images, and then add them to my posts using regular HTML, but as far as assigning it as a Featured Image, it has given be a “500 Internal Server Error” each time.

Sublpress is still under heavy-development, so features and stability will only get better. Th major benefit is not having to log in to the WordPress dashboard to edit or create a post. I draft many ideas at once and then come back the write the content. Using Sublpress saves me a ton of time.

Note: If you do not wish to edit your XML-RPC settings, you can always create another user as a Contributor to ensure that all posts are made as drafts. Doing so however, will deny you the ability to manage any posts made by your admin account. Of course, a plugin named User Role Editor can solve this problem.

Wait, wait, wait. There’s Something Else!

I love markdown, it is so simple compared to writing HTML markup for blog posts. But I am lazy, so Sublime Snippets to the rescue. Here are a few snippets you can use to even further your blogging/Markdown efficiency.

• Markdown H1 - Type mh then press tab to insert an H1.
• Markdown H2 - Type mh2 then press tab to insert an H2.
• Markdown H3 - Type mh3 then press tab to insert an H3.
• Markdown H4 - Type mh4 then press tab to insert an H4.
• Markdown H5 - Type mh5 then press tab to insert an H5.
• Markdown H6 - Type mh6 then press tab to insert an H6.
• HTML Image with Link and Class - Type mimg then press tab to insert

  <a href="http://YOURDOMAIN.COM/wp-content/uploads/YEAR/MONTH/FILENAME.EXTENSION" rel="lightbox[3117]" title="TITLE TEXT"><img src="http://YOURDOMAIN.COM/wp-content/uploads/YEAR/MONTH/FILENAME.EXTENSION" alt="ALT TEXT" class="aligncenter"></a>

  into your post. You must change YOURDOMAIN.COM, YEAR, MONTH (two digits), TITLE TEXT, rel, ALT TEXT and set your class. You can edit most of these before you even install the snippet and then just edit the date, link, and image info each time you use it.

These may not be of any use to you, as Markdown is pretty easy already, but then again. The higher H tags were the reason for the creation of these snippets, and the lower ones are in there just for consistency. Unzip the download and place the files in the Packages → User folder.

What It Is

The Kit Language will generate static HTML files for you upon save, but what about compression? Well, CodeKit doesn’t provide HTML compression. So you are left using a separate app, or a plugin that resides within the Tools → Build System menu in Sublime Text. But the only plugins I could find for ST generated a renamed file or a file in another folder. But in this scenario, working with the Kit language, a duplicate HTML file is unnecessary, and wastes time. I didn’t want to waste this time, each time a change needs made, to delete the CodeKit compiled HTML files and rename the compressed versions output by ST. So born was the extremely simplistic HTML Compress and Replace.

Usage

Until HTML Compress and Replace is available using Package Control, you can download it directly from the link below or from the repo on BitBucket.

1. In ST, go to Preferences → Browse Packages and take note of the location of this folder.
2. Place the HTML Compress and Replace folder in this directory. (You may need to restart ST for it to be available.)
3. In ST, go to Tools → Build System and click on HTML Compress and Replace.
4. While viewing an HTML file, press F7.
5. The window at the bottom of ST will tell you when the build is finished.
6. Wait for the view to refresh or simply click on another tab or file and then click back to view the compressed HTML.

Note: There is a file embedded within this post, please visit this post to download the file.

Inspiration for this came from darkdelphin.

One of my favorite although minuscule features, is The Kit Language. Kit is described as:

A .kit file is HTML with special comments. Kit adds two things to HTML: imports and variables. CodeKit compiles .kit files into regular HTML files.

Kit replaces the need to run a local server environment in order to make streamlined static web sites. Instead of having to use Server Side Includes or PHP includes, you can simply give your files the .kit extension and start using the Kit syntax.

Imports & Variables

Kit works by using Imports and Variables. Both are very flexible in their syntax and allow you to pull off things you couldn’t previously do without a local server environment.

Imports

Kit imports allow you to include any file of any type into any Kit file. When your Kit file is saved, CodeKit does the work and replaces these tags with the contents of the imported file. The syntax is extremely flexible, giving you three options to choose from.

<!-- @include someFile.kit -->
<!-- @import '../../someFileAtRelativePath.html' -->
<!--@include no_spaces_at_beginning_or_end.txt-->

If you are importing a .kit file, the extension is not required. For any other file, it is.

Variables

Declaring variables is also very flexible. You can use any of the syntax options provided below.

<!--$myVar:This text is amazing-->
<!--@var2=Some other incredible text-->
<!-- @width = 40px -->
<!-- $manifesto Who needs colons and equals signs? -->

So how does it work? Here is how!

How to Use Kit

Here is a few bits of code that show you how I have used Kit to streamline the creation of a static HTML website.
In this example I am using four files. _variables.kit, _header.kit, page.kit, and _footer.kit.

_variables.kit

My _variables.kit file contains any paths that I may need to use throughout my project. Keep in mind this is a static HTML site, that is in the development process. And is on my local machine as well as a staging server, so my paths need to remain relative. This may not be the case for you, especially is you are using .htaccess to remove the .html extensions from your URLs.

So my _variables.kit file looks like:

<!-- $images = ../assets/css/images/ -->
<!-- $css = ../assets/css/ -->
<!-- $js = ../assets/js/ -->

Variables are your friend. Use them wisely though, if you have incorrect paths you could end up having to fix them.

page_1.kit

You would expect to see my _header.kit first, but I am showing my page_1.kit template so you can see more variables being declared, that will then be used by my _header.kit file. My template, page_1.kit represents a default layout for all of your site’s pages. Remember when looking at this file how HTML comments are declared and how Kit variables are declared as I have commented each set of variables so you know what they are for.

<!-- Header Variables -->
	<!-- $pageTitle = Page Title -->
	<!-- $pageDescription = Lorem ipsum description of this page. -->
	<!-- $pageKeywords = keyword keyword keyword keyword keyword keyword keyword keyword keyword keyword keyword -->

<!-- Body Class -->
	<!-- $bodyClass = home -->

<!-- Nav Class -->
	<!-- $page_1_Nav = active -->
	<!-- $page_2_Nav = inactive -->
	<!-- $page_3_Nav = inactive -->
	<!-- $page_4_Nav = inactive -->
	<!-- $page_5_Nav = inactive -->

<!-- Import Header -->
	<!-- @import "_header" -->

			<section>
				<div class="row">
					<div class="span12">
						<div class="span7 offset6">
							<article class="message">

								<h1>Page Title</h1>

								<p>Urna tortor velit, vut vel ridiculus augue arcu velit facilisis in ac! Hac habitasse dignissim turpis? Mattis urna ultricies porta dolor? Pid sociis sagittis placerat, nec integer. Habitasse, rhoncus scelerisque, scelerisque hac, eu pulvinar, nisi enim? Ut aenean enim turpis, et hac sed odio pulvinar.</p>

								<p>Odio? Dis elementum dignissim in penatibus adipiscing nisi quis massa! Diam ridiculus ac placerat. Montes magnis nec. Sit vel a vel urna, aenean turpis. Porta in! Sit ac adipiscing nunc, urna ac mid hac vel? Dolor sit penatibus mauris platea ut hac, odio cras.</p>

							</article>
						</div>
					</div>
				</div>

			</section>

<!-- Import Footer -->
	<!-- @import "_footer" -->

It should be pretty obvious as to what we have done here. But here is a rundown.

• Header Variables are for meta tag data.
  • $pageTitle – Title of the current page.
  • $pageDescription – Description of the current page.
  • $pageKeywords – Duh. Keywords.
• Body Class
  • $bodyClass – Each one of my pages has a different background image, so I declare my custom class here.
• Nav Classes is so I can assign a variable to each and call them in the nav according to which page is being viewed and which nav item should have an active state.
  • $page_1_Nav – The current page is set to active as this is the page I am working on.
  • $page_2_Nav through $page_5_Nav – These are set to inactive.
• Import Header
  • @import “_header” – imports our _header.kit file, after our variables are declared.
  • @import “_footer” – imports our _footer.kit file.

If you have any questions, ask in the comments and I will clarify.

_header.kit

Here is what my _header.kit looks like:

<!-- @import "_variables" -->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title><!--$pageTitle--> | Website Title</title>
		<meta name="keywords" content="<!--$pageKeywords-->">
		<meta name="description" content="<!--$pageDescription-->">
		<meta name="author" content="AJ Troxell, aj@ajtroxell.com">

		<!-- HTML5 shim, for IE6-8 support of HTML elements -->
		<!--[if lt IE 9]>
		  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->

		<!-- Stylesheet -->
		<link href="<!--$cssPath-->master.css" rel="stylesheet" media="screen">

		<!--[if lt IE 9]>
			<link rel="stylesheet" type="text/css" href="<!--$cssPath-->ie.css" />
		<![endif]-->

	 </head>
	<body class="<!--$bodyClass-->">

		<div class="container">
			<header class="row">
				<div class="span3">
					<a class="logo" href="/"><h1 class="ir">Website Title</h1></a>
				</div>
				<nav class="span9">
					<ul>
						<li class="<!--$page_1_Nav-->"><a href="../page_1.html">Page 1</a></li>
						<li class="<!--$page_2_Nav-->"><a href="../page_2.html">Page 1</a></li>
						<li class="<!--$page_3_Nav-->"><a href="../page_3.html">Page 2</a></li>
						<li class="<!--$page_4_Nav-->"><a href="../page_4.html">Page 3</a></li>
						<li class="<!--$page_5_Nav-->"><a href="../page_5.html">Page 4</a></li>
					</ul>
				</nav>
			</header>

First we import our _variables.kit in order to fill in the paths to our asset files.

I then execute the other variables that were defined within my page_1.kit. The title, description, keywords, and classes for the nav will be filled in by CodeKit.

Currently the Kit Language does not support conditional statements, so for each page template I will need to change the values of my Nav Class variables so the proper nav items are given a class of active or inactive.

_footer.kit

Our footer is pretty basic, but it does call our Javascript and active or inactive classes.

</div>
		<div class="footer_container">
			<footer class="container">
				<div class="row">
					<nav class="span12">
						<ul class="secondary">
							<li class="<!--$page_1_Nav-->"><a href="../page_1.html">Page 1</a></li>
							<li class="<!--$page_2_Nav-->"><a href="../page_2.html">Page 1</a></li>
							<li class="<!--$page_3_Nav-->"><a href="../page_3.html">Page 2</a></li>
							<li class="<!--$page_4_Nav-->"><a href="../page_4.html">Page 3</a></li>
							<li class="<!--$page_5_Nav-->"><a href="../page_5.html">Page 4</a></li>
						</ul>
					</nav>
				</div>
			</footer>
		</div>
		<script src="<!--$jsPath-->master-ck.js"></script>
	</body>
</html>

Of course, yours may be much more complicated than this, and utilize Kit much more.

Saving

Each time you save your page_1.kit, CodeKit will compile it and create your static HTML page, appropriately named page_1.html.

Any imported files will not be compiled outside of their containing .kit file.

Wrapping Up

So there you have it. The Kit language is versatile, simple, and a life-saver for small static web projects, or for anyone that doesn’t want to run a local environment for a small project.

In the future I hope conditionals within the Kit language will become a reality. I spoke with Bryan Jones, the developer of CodeKit, and asked him about this and the possibility of HTML compression becoming part of CodeKit, and here is what he had to say.

Regarding Conditionals

I get a lot of requests for IF statements to solve this exact problem. I plan to address it within the next couple months.

I am ecstatic to see conditionals becoming a possible reality, and even offered my own ideas as to what the syntax could look like.

<!-- $itemActive = {if:kit = page_1}
	activeClassName
{else if:kit = page_2}
	activeClassName
{else}
	inactiveClassName
{/if:kit} -->

Where if:kit = page_1 would indicate to CodeKit that if the currently compiled page is page_1.kit to insert the string activeClassName but if not to insert the string inactiveClassName.

Or a simplified version I threw together since speaking with him. Remember, as of right now Kit variables MUST have a value.

<!-- $itemActive = {if:current_kit = page_1}
	activeClassName
{else:current_kit}
	inactiveClassName
{/if:current_kit} -->

Where if:current_kit = page_1 would indicate to CodeKit that if the currently compiled page is page_1.kit to insert the string activeClassName but if not, to do nothing.

Regarding HTML Compression

I’ve looked at this frequently and the sad truth is that there are no *bulletproof* HTML minifiers out there right now. Each one I find breaks in specific edge cases, which results in bad markup. Because CodeKit is used by many thousands of developers on all sorts of websites, I can’t support any tools that don’t work correctly in all cases. As a result, I’ve held off on HTML minification until the available tools improve.

I do agree that HTML compression cannot be fully trusted. But if CodeKit created a folder named “compressed” and placed all the compressed files inside it, this would allow developers to double check the compressed syntax and output. But I understand that CodeKit is here to make lives easier, and not create extra steps.

Using Kit alongside an altered plug-in for Sublime Text 2 that i’ve created, I have had absolutely no issues with HTML compression. But I am also guaranteed safe, since working files are .kit and not .html and nothing is permanently overwritten upon compression. I will release this plug-in shortly for those that are interested.

SQUAR3D is a free minimal WordPress theme designed to be responsive and attractive. Below you will find a list of features, a gallery, the simple setup instructions, and a link to download the theme.

Features

• Parent theme and four child themes of varying colors.
• Responsive design.
• Hidden comments on mobile that expand with the “tap” of a finger.
• Widgetized sidebar.
• Threaded comments w/ Gravatars.
• Two menu areas:
  • Header menu for navigation.
  • Footer area for social icons (RSS, Facebook, Last.fm, Delicious, DeviantArt, Evernote, Vimeo, LinkedIn, YouTube, Dribbble, Digg, Google+, Flickr, Twitter, and Tumblr).
• Styles implemented for WP-PageNavi plugin.

Gallery

Setup

If you have never installed a custom WordPress theme before, check out Using Themes on WordPress.org. If you have previously installed themes then this should be no problem for you.

1. Upload the themes/folders within the SQUAR3D Theme folder to the wp-content » themes directory on your server.
2. Activate it via the Dashboard.
3. In Appearance » Menus, create two menus. One for your header navigation, and one for your social icons in the footer.
   1. The menu for header nav can contain any links you wish, but it is a good idea to include a link to your home page.
   2. The menu for your social icons requires that you enter a class for each item, in order for the icons to show.
   3. The social icon classes available to you are rss, facebook, lastfm, delicious, deviantart, evernote, vimeo, linkedin, youtube, dribbble, digg, googleplus, flickr, twitter, and tumblr, written exactly as seen here.
   4. For example: Create a custom menu item for your RSS feed with the appropriate link to your feed. Once the menu item is added to the menu, click the arrow icon on your new item, next to the text that reads Custom. Add the class rss to the field with the label of CSS Classes (optional).
      Note: If you do not see the CSS Classes field, click Screen Options at the top-right of the window and check off CSS Classes underneath the text that reads Show advanced menu properties.
   5. Save your menus, and then assign them to the appropriate area in the Theme Locations box, and then click Save.
4. Visit Appearance » Widgets and start adding your Widgets. All the work is done for you, minus any styling on the Search Widget as there is a search field in the header of the theme already.

Download SQUAR3D

Before you download please take a look at the licensing for this theme. It’s not complicated, just please leave the link back to me in the footer unless you donate.

As internet speeds have increased, sites have been able to utilize new technologies to improve user experience, but the average user has become accustomed to a faster internet and our patience has waned. So compressing your website has become increasingly important. Especially with the rise of responsive design and the increase in mobile usage.

There are thousands of tutorials on how to go about doing this, and any of them will work quite well. I just wanted to pass along the knowledge that I have gained and show WordPress users how I accomplished great compression.

Via Zlib

Chances are your server is capable of compression via Zlib, but we want to make sure.

Place the following line of php in a file named test.php and upload it to the root directory of your site. This is the directory where you uploaded your WordPress files, not your theme directory.

<?php phpinfo(); ?>

Go to this test.php page in your browser and you will be shown the capabilities of your server. Search the page for “zlib” and you will see if it is enabled or not.

Edit Header.php

Now that you have verified your servers ability to utilize Zlib, it is time to edit the header.php file of your theme.

Above the !DOCTYPE html declaration, paste the code below.

<?php
ini_set('zlib.output_compression', 'On');
ini_set('zlib.output_compression_level', '1');
?>

Save your file, and clear the cache of your caching plugin if you use one.

Congratulations, you are now compressed!

Compression Via .htaccess

Another easy way of enabling compression is via your .htaccess file.

In the root directory of your WordPress installation should be a. .htaccess file, but if you do not see it then it either does not exist yet, or you may need to set your FTP program to let you view hidden files.

If it does not exist, go ahead and create a htaccess.txt on your desktop. If it does exist, simply open it up and edit it.

Paste the code below into your .htaccess file.

<IfModule mod_deflate.c>
# Insert filters
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml

# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>

If you saved this as htaccess.txt, upload it to your WordPress installation directory and then rename it to .htaccess. If you edited your existing .htaccess, just make sure the change gets made on the server version of the file, not just on the locally downloaded copy.

Testing Your Compression

To test the results of your compression, head on over to Compression Check and enter your site url. You will see how large your site is before and after the compression.

Here is what Compression Check stated before I enabled compression using the .htaccess method.

And here is what my results were after compression.

Conclusion

As you can see, it made quite a bit of difference. Pair compression like this with one of many great caching plugins for WordPress, and your site will load faster than ever. But that isn’t all you can do. Here is a great write-up by Wptuts+, titled “The Ultimate Quickstart Guide to Speeding Up Your WordPress Site”, which is chock-full of information on how to compress, cache, and minify your WordPress site for a lightning fast user experience.

Here is how mine looks after using this Photoshop template and the included action.

Directions

1. Open included PSD file and create your cover/profile images using it as a template.
2. Copy profile photo to a new PSD and run the included action.
3. Save cover photo and profile photo to your desktop.
4. Upload to Facebook and watch as your friends stare at your magnificent creation.

Special Note

Facebook does not “scale to fit” profile images automatically when you upload a new one so you need to do this yourself. After you have uploaded your new profile image, you need to set it to “scale to fit”.

On your profile photo click “Edit Profile Picture” and then in the menu click “Edit Thumbnail…”. In the popup you will see a checkbox labelled “Scale to fit.”. If it checked, you will need to uncheck it and then check it again. If not, go ahead and check it, and then click “Save”.

Note: There is a file embedded within this post, please visit this post to download the file.

My reasoning for this rant, has come as a result of real life experiences I have had recently in regard to website prototyping. And the result of using grids; their translation over to the production environment. So let’s get down to it.

Grids Are, I Mean Should Be, for Prototyping

When I think of a grid, I think of a really slick way of throwing together a basic structural concept for a website, going as far as basic responsiveness. Some grids even have extra “features” that give you nice buttons, drop downs, sliders, content tabs, icon fonts, and so on. Allowing you to provide either yourself, or even a client, a quick look at the general structure of their project and how elements will react when scaled down for tablet and mobile viewing.

This is great! I love the time-savings with grids. In today’s world, time is money, and there is no better way to demonstrate to a client or graphic designer how a website will look in an easy to understand way than using a grid. Within a matter of minutes you can provide multiple page templates, including all the elements they may need.

A Tool, Not a Crutch

This is what I mean by prototyping. Depending on you or your companies work flow, grids can be a revolutionary tool.

For instance, a graphic designer is working on design concepts for a client, while meeting with you (the developer) to ensure his designs are coherent with you/your company’s development goals and website capabilities. When the concepts are done they will be shown to the client, but these concepts are just Photoshop files or presentations. There is no interaction. While this is ok, we can do better.

While the designer is working, you could be putting the grid to use. Using a responsive grid, such as Foundation, Bootstrap, or my personal project Division, you can emulate the designers concepts in an interactive way. Now your client can not only see visually how the design will look, in reference to colors, logo, typeface, etc., but they can see how it will look in an actual browser, and how the sections of content will respond to a tablet or mobile view.

It is after this step that it gets hairy.

Drop The Baggage

Of all the grid systems, I was a fan of Foundation. I preferred its fluid columns as opposed to the static width of other grids. Each person has their personal preference, and there is a grid for each of them. But as grids have become more and more stacked with features, I feel that they have perhaps gone a bit too far. They achieve their goal of rapid prototyping wonderfully. But it’s when you are in the process of actually developing the site, that your grid should be dropped like a bad habit.

Take What You Need, Leave Out The Rest

Your time invested in this step could be a bit more than you would like to spend, but in my opinion it is important to the maintenance of a project. It is easy to just use a grid and add your own class names where needed, which may end up looking like div class=”three columns meta”, where meta is your class name. It isn’t confusing to you of course, but what if another developer takes over one of your projects, or you have to come back a year down the road? I’m sure it doesn’t sound like a big deal now, but why not cut out the middle man, meaning the grid?

Once you are at the point of being able to implement the graphical elements, get rid of the grid altogether. So instead of our grid classes on our previous sample element, we would end up with div class=”meta”. Not only does this make your HTML easier to read, but it gives you more control of the elements and any fine tweaks that you may need to make now or down the road. You no longer need to override any grid styles if all of a sudden the elements width isn’t equal to three columns as specified by the grid.

This is especially important for me when it comes to unnecessary UI elements that come grids such as Foundation and Bootstrap. Granted you can do custom builds without these elements, but they are useful for prototyping. And they require that you over-write the grid styles in order to apply your own.

Without the Grid?

To get rid of the grid, I use Inspect element within Chrome and copy what styles I need, and apply them to the structural elements within my own CSS files. Not only have I consolidated my CSS, but I have cut out anything that I don’t need that came with the grid files. Whether you use SMACSS or a traditional single-file setup getting rid of the grid, once you get prototyping out-of-the-way, is a good idea.

From Here On Out

So although grids have done wonders for rapidly prototyping websites, they have backed some into a corner. A corner of believing that the grid is a must have for your site, and that they are appropriate for prototyping and live deployments.

If you are a graphic designer, don’t let the appearance of the grid keep you boxed in. The grid is only a tool, and not a strict set of rules to follow.

As a developer, don’t “rely” on the grid. Take advantage of it, but don’t let yourself believe that you must have it, and that it has to remain a part of your design from beginning to end. I don’t see a valid reason to load the CSS files of a grid on a live site, when you can simply pull what you need. It is cleaner, easier to maintain, and is just as future proof as a grid if your site is designed properly.

LESS Mixin

.font-size(@font-size: 16){
    @pxFontValue: (@font-size / 10);
    @pxLineValue: (@font-size / 10 * 1.5);
    font-size: @font-size * 1px;
    line-height: @font-size * 1.5 * 1px;
    font-size: ~"@{pxFontValue}rem";
    line-height: ~"@{pxLineValue}rem";
}

Mixin Usage

h1 { .font-size(14); }

Mixin Output

h6 {
    font-size:14px;
    line-height:21px;
    font-size:1.4rem;
    line-height:2.0999999999999996rem;
}

There you have it. Awesome IE proof font sizing using LESS.