You’ve been designing for print since college and have an eye for what makes visuals work. But the landscape has changed (and for some, might even look a little scary). So when the ball dropped at the start of 2012, your resolution was to learn a little more about the digital side of it all and make yourself that much more marketable.

Now is the time to get started. There are tons of resources out there to help print designers get their feet wet in coding, HTML and digital design. Because of the skills you already possess as a print designer, the transition might even be easier than you think. You already know how to use text, color and images, but need the skills to make it happen in the online format. With a little time and dedication, almost anyone can learn the basics with a few great (and free) tutorials right at your computer.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Coding for Beginners

Sites such as Codeacademy and Carl Herold’s Higher Computing for Everyone allow users to learn the basics of computer coding at no cost. Users go through a series of courses designed by developers.

Codeacademy, which started in the summer of 2011, boasts more than 500,000 users and received $2.5 million from investors to finance the venture in October, according to The New York Times. Higher Computing for Everyone, which started in 2009, claims about 6,000 subscribers. Each of the sites is easy to use and do not require previous knowledge of coding.

The bonus for Codeacademy is that the lessons are structured in an almost game-like way, allowing you to earn achievement badges for finishing lessons and sharing them online. Codeacademy lessons start at the most basic level – Lesson 1: Getting to Know You shows the syntax of programming – and moves on to lessons in Javascript functions. The only real downside is that the lessons lack context as to why things are done this way.

The game-like atmosphere of Codeacademy is fun. Going through the lessons gives you an immediate sense of accomplishment and understanding. With each entry in the practice area, the user gets immediate feedback on if the code was entered properly and if not, hints on how to proceed. The interface does not require sound and can be practiced at any pace, although it does work better if you complete whole lessons before logging out.

Carl Herold’s Higher Computing for Everyone is a much more structured setup. You do not have to register for the site to go through the lessons, which are more like reading lectures than the interactive nature of Codeacademy. Herold takes users through the history and background of coding and programming languages in the first lessons and moves on to writing basic programs.

The depth of information is impressive but the interface might be intimidating for first-time coders. The lessons require a lot of reading and the interface does not have a practice workspace.

Combining the lessons in the two online modules might be the best route for learning as much about coding as possible. Herold’s information explains the principles in a clear way so that you can get a grasp on what it all means. Codeacademy’s lessons offer hands-on experience working with programming in an easy-to-use format.

Learn HTML

Although a basic knowledge of coding can’t hurt anyone, most designers want to jump right into website design. That’s where HTML comes in. The markup language uses a set of tags noted inside angle brackets to describe what is on a web page.

Start with the free tutorials at w3schools.com or HTML Dog. Each site offers a series of short lessons for beginners from how to use basic HTML – setting up paragraphs and headers – to more complex functions, such as building tables or inserting images.

The lessons from w3schools.com are fairly interactive and simple to understand. Each module allows users try playing with bits of HTML and see the results on the screen. The lessons also add an extra element of teaching to the exercises, explaining why certain tags work the way they do and how tings correspond to old and new methods of building web pages.

The beginner’s lessons at w3schools.com are pretty basic, but can lay a great groundwork for someone making the move from print having never worked online. The advanced lessons can really help designers make a page look the way they want without having to rely on free templates or boxed design sheets. The lessons include information on how to set up the layout of a web page; go into detail about working with media, such as images, video and audio; and introduce users to HTML5.

HTML Dog’s lessons are much more of a guided tour. They serve as a direct guide that lets users practice on their own using Notepad and a web browser (which are standard on most computers). The lessons are pretty simple and direct but lack interactivity. The site though, does go into pretty good detail about all of the common usage terms that will pop up in HTML, such as “strong” and “em.”

HTML Dog does allow users to delve into more complex lessons as well, with an introduction to CSS and intermediate and advanced HTML courses that cover items such as Javascript and using forms.

More Advanced “Courses”

Now that you’re hooked on learning everything you can about the digital format, check out all the materials at Google Code University. The program, sponsored by web giant Google, has the look and feel of a college course guide.

Lessons and courses are free and don’t require any registration. There are a host of different things to try, including tutorials recorded talks and courses with exercises. Much of the coursework is pretty advanced, with lectures and materials from educators and students at Harvard, Duke and Carnegie Mellon universities.

The major advantage to Google Code University is the network of resources. Lessons are up-to-date and move with technology, such as “Building an Android Application 101.” Each course lists prerequisite knowledge needed for the course, necessary software or materials and learning objectives.

Practice New Skills

The best way to test what you have learned is to put the concepts in action.

Feeling good about some of your coding skills? Create simple game or program to showcase your work. Play with something you can continue to work with and keep refining new skills. Create a web page – and don’t use a template. Start simple, but over time try to add new elements. Look at things you like online and try to replicate them on your site.

If you are feeling extra-confident, ask your boss to collaborate with others on a digital project or look for a small one you can handle alone but with supervision and guidance if you run into trouble. Let people know you are trying to make the leap to digital design; it is likely your peers will assist you along the way.

Finally keep learning new things. Once you have mastered coding and HTML, think about design in other areas such as for mobile applications and tablets.

Conclusion

There are great resources out there to help you learn all the new skills you want in 2012 – and you don’t have to go back to school to do it. Set a few goals and start with online courses and tutorials to make the most of your learning experience.

Practice everything you learn; just running through tutorials is not enough to make the skills relevant. Seek out experiences and projects that will test your new-found knowledge. Remember that the basic concepts that determine good design don’t change from print to the web; the key to success in both areas is an updated toolkit.

This is the second article in our series on the absolute fundamentals of web development. Our first article explained in detail what HTML is on a conceptual level. We looked at what a markup language is, what tags are and how HTML compares to other important pieces of the web development puzzle such as CSS.

Join us today as we move on and take a look at each basic piece of an HTML document. I’ll explain all that stuff at the top of an HTML file that confuses you and outline the basic structure that you’ll follow for creating your own HTML files.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

DOCTYPE

The very first thing that you typically see in an HTML file is the DOCTYPE declaration. Before HTML5, this could be a very confusing bit of code that looked something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

There’s a lot going on here and every bit of it speaks to either the web browser, the reader or both. The “PUBLIC” part just speaks to the availability, the DTD stands for Document Type Definition, which declares the version of HTML being used and the final section is a URL pointing to where the DTD can be found.

The words “loose,” (or transitional) “strict” and “frameset” refer to different versions of HTML 4, which allowed for slightly different markup. These were essentially just to help transition developers from older versions of HTML.

The HTML5 DOCTYPE

There are several DOCTYPEs to choose from, which can be monumentally confusing for new developers. Fortunately, HTML5 completely simplifies the situation with a refreshingly simple DOCTYPE:

<!DOCTYPE HTML>

See how easy that is by comparison? It really is a beautiful thing.

What Does the DOCTYPE Do?

Now we’ve seen what a DOCTYPE looks like but we haven’t really discussed what it does. The answer is that the DOCTYPE tells the browser which type of HTML to expect, which in turn affects how the browser renders the page.

As you explore web development more, you’ll learn that there’s a huge emphasis on “standards-based development.” The general idea is that if we all follow certain rules and standards, web development will be a more cohesive and consistent practice. This is better for developers, better for browsers and most importantly, better for users.

DOCTYPEs were originally designed to trigger “standards mode” in browsers, which meant that the page was rendered using newer web standards. Similarly, older pages without a DOCTYPE triggered “quirks mode” in browsers, which allowed for older practices to be used that wouldn’t function properly in standards mode.

The new, very simple HTML5 DOCTYPE is supported in all major browsers, and it triggers standards mode in all of them. The DOCTYPE also helps you validate your code, which ensures that current standards are being adhered to. Every page that you create should use a DOCTYPE and hopefully be fully standards compliant.

Root Element

After the DOCTYPE, the HTML really begins. This is indicated by the HTML Root Element. If your entire HTML is a tree, this is the root from which everything else sprouts.

The Root Element is defined by a “tag,” which we learned about in our last article. In this case, it’s the “HTML” tag.

<!DOCTYPE HTML>
<html lang="en" xml:lang="en">
  <!-- Everything Goes Here -->
</html>

Notice that the root element includes a language attribute, in our case English. Always be sure to indicate the appropriate language for every page you create.

Everything else that we will add to this page is situated inside of the Root Element. It is the container for every scrap of information and piece of content, the only exclusion being the DOCTYPE.

Head Element

The next thing you’ll encounter in an HTML document is the “head” section. The head tag is exactly what you’d expect it to be:

<head>
  <!-- Some Code Goes Here -->
</head>

The stuff that goes into the head section is primarily informational, it tells both you and the browser certain things about the page such as the title, the charset, etc. This is also where you traditionally load in important external resources.

There are a few important things that go into a head tag. Let’s look at them one by one.

Meta Tags

As you can probably guess, meta tags hold metadata about the page. Metadata takes many forms and can include keywords, authors, descriptions, etc. Here are a few notable inclusions:

Charset
This is pretty boring stuff, the charset is typically set to UTF-8 and essentially tells the browser which character encoding to use.

Your pages should definitely include an indication of which charset to use. Don’t over think it, it’s just one of those things you need to stick in your template. Below is a typical charset declaration in HTML5.

<meta charset="utf-8">

This is yet another thing that has gotten easier with HTML5. Check out the version of this snippet required for HTML 4.01:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

Some other typical metatags include description and author. Here’s a quick, self-explanatory example of each of these:

Description

<meta name="description" content="Some description about your page">

Author

<meta name="author" content="Josh Johnson">

Title

Another thing that goes inside the head portion of your document is the title tag. This is a very simple piece of code that simply states whatever you’d like the title of the page to be. Here’s an example:

<title>Design Gallery, Deals, Tutorials &amp; Community | Design Shack</title>

This title is usually shown to the user at the very top center of the browser window, on a tab, etc.

Links and Scripts

The last thing we’ll discuss regarding the head tag is the inclusion of external resources. In a very simple web page, you’ll typically see these take the form of a stylesheet or script:

<link rel="stylesheet" href="style.css">
<script src="js/jquery.js"></script>

Here I’m essentially loading my CSS file as well as jQuery (a JavaScript library) into the page. If these resources are included in the source files but not linked to in the head section, they will not function. Note that the links for these could either point to something in the local folder hierarchy (as above) or something hosted on another web server.

The link used above for the CSS file uses a link relation (rel=”stylesheet”). For more on link relations, check out this article.

Also, as an alternative to linking to external files, you can embed code right into the head element. Here’s an example with CSS, but the same can be done via the “script” tag and JavaScript (embedded scripts are often placed at the end of the body element instead).

<style type="text/css">
	a { text-decoration: none; }
	p { color: #333; }
</style>

Body Element

The final portion of an HTML page is the most important. Everything inside of the body element defines the content and structure of your page. As far as development time, you’ll likely use a set template for everything above and spend a few minutes customizing it for specific projects. The rest of your HTML time will be spend inside the body element.

<body>
  <!-- Page Content Goes Here -->
</body>

Putting it All Together

Now that we’ve walked through each individual piece of an HTML file, let’s put it all together into one extremely basic HTML5 template.

<!DOCTYPE HTML>
<html lang="en" xml:lang="en">
 
<head>
	<meta charset="utf-8">
	<title>Design Shack</title>
	<meta name="description" content="A Very Basic HTML5 Anatomy">
 
	<link rel="stylesheet" href="style.css">
	<script src="js/jquery.js"></script>
</head>
 
<body>
  <!-- Page Content Goes Here -->
</body>
</html>

An Overview

A thousand apologies for the mundane nature of this topic, beginners are often turned off by boredom at this point but hang in there, the real fun of HTML is everything between the body tags, which we haven’t even discussed!

All of these pieces were necessary to accurately paint the picture of what an HTML document actually is. We now see that an HTML document has a DOCTYPE that tells the browser how to render the page and helps ensure the proper standards are being used.

We also know that there’s a set hierarchy to how HTML pages are structured. Just about everything but the DOCTYPE is thrown into the root element, meaning it is the “parent element” of the head and body elements, which in turn have their own children.

The basic structure of an HTML document is referred to as the DOM, or the Document Object Model. This is almost always metaphorically referred to as a tree and depicted like image above. Our own Jack Rocheleau wrote an in-depth look into the DOM titled Deeper Study Into the WWW’s Document Object Model. For the next set in understanding the basic structure of an HTML page, check out that article.

Conclusion

This article represents a very brief overview of how an HTML skeleton is structured and the types of things that are typically included. It is by no means exhaustive, but should serve as a good basic introduction to these topics.

When you’re just starting out in code, most people will simply give you a template for all of the code above without really explaining what it all does. This can leave a sizable hole in your education so it’s important to read through this information and attempt to understand what you can.

Stay with us in this series and check back soon as we answer another important question: What is CSS?

Since I have a background in print, I’m always eager to help designers from other areas get a start in web design and basic development. I know from experience that the transition is an extremely intimidating one that many people simply don’t think they can manage.

Fortunately, I can also attest to the fact that it’s probably not as difficult as you might imagine. In the world of hardcore coding, HTML and CSS rank pretty low on the barrier to entry scale.

Today we’re going to start a series that examines the basic building blocks of web development. HTML, CSS, JavaScript; if you’re a complete and utter beginner who might not even have a basic grasp of what these technologies are much less how to wield them, then this series is for you.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What Is HTML?

There are a million ways that I could start this discussion. We could go into the drivel of how HTML stands for Hypertext Markup Language or how it was invented in 1980 by physicist Tim Berners-Lee as a system for sharing documents, but you can get all that from Wikipedia. If you’re interested in the history of the World Wide Web, I highly recommend investigating the topic further, but that doesn’t help us much in our discussion of what HTML is today and how you’ll need to use it.

What you really need to understand is the conceptual purpose of HTML. What is it for? Why do you need it? How does it compare and relate to other technologies like CSS and JavaScript?

HTML: The Most Important Piece

Along these lines, HTML can be thought of as the fundamental building block of the web as you know it. There’s an underlying architecture of complicated technology that makes up “The Internet” but the good ol’ WWW is largely dependent on HTML.

In fact, technically, HTML is all you need to create a web page. A few extremely simple lines of HTML uploaded to a web server would constitute a web page, which is definitely not something that can be said for CSS and typically not something that can be said of JavaScript. The point here is that, while all of these technologies are closely related, HTML is the pivotal piece of the puzzle.

Now, before you get too excited, that doesn’t mean that you can get away with only learning HTML. You’d be hard pressed to find a modern web page that doesn’t utilize, at minimum, a combination of HTML and CSS.

Markup Languages

To truly understand what HTML is, you’ll need to understand what markup languages are and why they exist (I’m sneaking in that drivel after all).

Basically, the web is written in plain text. Now, by “plain text” I don’t just mean a lack of images, I mean a lack of rich formatting of any kind. Unlike in Microsoft Word where you can easily create bold italic text at any point size, writing code is more like using WriteRoom or IA Writer; all you get is plain old letters and symbols.

The Typewriter Metaphor

Imagine composing an essay on an antique typewriter, then handing that essay to someone so that they could enter it into a computer. Your typewriter doesn’t have any formatting features, but when your associate enters your essay into the modern word processor, you want it to have headers, bold text, italic text, bulleted lists and more. How would you tell that person where to implement these features?

The answer is of course that you would “mark up” your document and insert extra indicators of how you want the text to be formatted. These wouldn’t be present on the end result but are merely meant to tell the interpreter how to make everything look the way you intend. This is exactly how a markup language works. With HTML, this markup is accomplished through tags.

Tag, You’re It

As I write this article, I’m doing so in plain text HTML. This means when I want to bold something, I can’t simply hit a button. Instead, I insert a bold tag:

The last word will be in <b>bold</b>.

See how I used “<b>” to indicate where the bolded text would begin? Also notice how I used “</b>” to indicate where the bolded text would end. To italicize something, I use the same technique.

<i>This is italicized.</i> This isn't.

The bracketed portions are known as tags, and each set of tags has a starting and stopping point. With these, you tell the interpreter, in our case a web browser like Firefox, how you want the content to be formatted. When we place content between an opening and close tag, we typically say that we have “wrapped” it in a tag.

Example Tags

Now that you know what tags are, here are some more very basic examples of some HTML tags:

• <p>paragraph</p>
• <h1>header</h1> (h2, h3, h4, etc. create incrementally smaller headers)
• <small>small text</small>

Links, Tags and Attributes

This is where the “Hypertext” in “Hypertext Markup Language” part comes in. One of the major parts about writing HTML, and indeed about using the web in general, is linking. That’s how it all works right? If there is a web page loaded into your browser and you want to get to another page, what do you do? Click a link! This system is fantastic for connecting all of the various bits and pieces of information stored on the web.

To link something in HTML, we of course use a tag. This tag is going to look a bit more complex than most though. Let’s look at an example that links to the Design Shack home page.

Read <a href="http://designshack.net/">Design Shack</a> daily for awesome bits of design goodness.

Here we have not just a tag but an attribute as well. The tag (<a></a>) tells the browser that there’s a link and the attribute (href) tells the browser where the link should go. The syntax for this type of structure is as follows:

<tag attribute="VALUE">Text, images, etc.</tag>

In our previous example, anything between the “a” tags becomes a link. So the words “Design Shack” would’ve been an active text link that, upon clicking, directed the user to the href URL, which was the Design Shack homepage.

Placing an image via HTML works much the same way. We use the “src” attribute to point the browser to the location of the image and the “alt” attribute for text that will appear in place of the image if it can’t be displayed. Notice the closing tag structure is a bit different this time with all the “img” info placed within a single tag.

<img src="images/thepicture.jpg" alt="alternative text" />

You Can Read HTML!

If you’ve been reading along up to this point, the following should make perfect sense.

<h1>What is HTML?</h1>
<p>You've officially learned enough that you should be able to read basic <bold>HTML</bold> fairly easily. This text is marked up with all kinds of tags, but once you know what they all mean, it becomes fairly readable doesn't it?</p>
 
<p>Now that you know what HTML looks like, let's move on and discuss it from a more <em>conceptual</em> point of view. What purpose does it serve in the grand scheme of web design?</p>

HTML: The Skeleton of a Web Page

We now have a good idea of how HTML is a markup language and what that means. We know that it’s basically a way to give the browser plain text and have it output richly formatted and even active content that can be clicked on to some end. The last thing we need to understand is how it fits into the overall picture of a completed web page.

As we’ve seen in the examples above, HTML mostly relates to directly inputting content onto a page. The actual underlying structure of any web page is the kind of tagged statements we just learned about. Most text and links you see on any given page, as well as many of the images, are implemented directly with HTML.

HTML is Meant to Be Boring

As I said above, HTML is technically all you need for a web page. However, this HTML content by itself is quite plain. Notice that nowhere in the examples above have we told the page what background color we want to use, what size the text should be, which fonts to apply where, how wide certain portions should be and how they should line up, etc.

We’ve simply thrown in the content without any real thought towards what it will look like. Looking at any page on the web you can see that no one stops here. Each site has its own look and feel, its own color scheme, typography, layout, etc.

For example, imagine that your local news site picks up a story from the Associate Press. They could print the story verbatim and therefore have the same basic HTML structure for that content, yet it would likely look quite different from the version on the AP site. Why?

CSS is The Skin, Hair and Clothing

The answer is that modern HTML is not generally used to govern aesthetic style and layout. For this, we’ve adopted something called Cascading Style Sheets, or CSS.

The typical web developer workflow might be to insert all the various pure content first into an HTML document, then jump over to CSS and begin crafting that content to appear in a more visually pleasing and usable way. A year later the developer could come back and toss in a brand new CSS file that makes the website look completely different, all without touching the HTML.

JavaScript jumps into this game by taking a more active role in how the page behaves. Animations, form submissions, dynamic content, these are the domain of JavaScript. Lately CSS has been encroaching on this territory, but that’s a topic for another day.

What Is HTML5?

Before we wrap this up, you’re probably wondering what the heck all this HTML5 talk is about. HTML5 is exactly what it sounds like: the fifth major iteration of HTML.

Web technologies aren’t set in stone, they’re constantly evolving and expanding. Just like print designers generally have to keep up with the newest bells and whistles in the latest version of Photoshop, so web designers have to keep an eye out for changes in web standards.

HTML5 brings lots of new features to the table while cutting out some unnecessary fat from its previous installment. For instance, HTML5 developers have some new tags to work with that make the basic structure of a web page more logical.

For more on HTML5, check out our complete series on the topic:

• HTML5: The Basics
• HTML5: New Elements
• HTML5: Semantic Changes
• HTML5: Get It Working Today

Conclusion: More to Come!

This article was meant to give you a basic conceptual overview of HTML. If you started reading without a clue as to what HTML is and how it’s used, hopefully you now have a basic grasp of these concepts.

As we look to the future I’ll be expanding this topic and walking through the basic anatomy of an HTML document and then moving on to another important question: What is CSS?

Be sure to check back soon for more on these topics!

Image sources: xlibber, Ryan Amos, Dave Parker

The following is a collection of the best Markdown resources that I’ve found. Whether you’re a complete Markdown newbie looking to learn the syntax or a seasoned expert in the market for a new iPad app, you’ll find something here that’s perfect for your needs.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What Is Markdown?

Markdown is a markup language that was created by John Gruber to simplify the workflow of web writers. Many bloggers, like myself, usually write our posts in straight HTML, which can be cumbersome and difficult to read through. Markdown provides a much simpler and easier to read alternative that can easily and instantly be converted to HTML using any number of free tools.

If you’re a writer and you constantly use HTML, Markdown is for you. If not, you might just find it to be absolutely useless. I personally really like the syntax and find it to be quite intuitive. Take a look at the resources below and see what you think!

Learning Resources

Markdown

Here’s the gist on Markdown straight from the source. Gruber introduces the concept, outlines its use and syntax and even provides a Pearl plugin that works with Movable Type, Blosxom, and BBEdit.

Slekx Interactive Tutorial

Normal tutorials are boring, check out this interactive tutorial and you’ll pick up the Markdown Syntax in no time. You will be editing the actual text of the tutorial, adding Markdown elements as you learn them. Markup elements are reused throughout the tutorial in order to ingrain the Markdown that you’re learning.

Markdown: An Introduction

This is a super short and simple introduction to Markdown without all the fluff. If you have at least a double-digit IQ, you can probably pick up Markdown in under two minutes by browsing through this tutorial.

Video Markdown Tutorial

If reading makes your eyes sleepy and you prefer a video tutorial, here’s one from Stevan Wing. It’s a really in-depth look that walks you through the concept, syntax and implementation.

Multimarkdown

MMD is a superset of the Markdown syntax. It adds multiple syntax features (tables, footnotes, and citations, to name a few), in addition to the various output formats listed above (Markdown only creates HTML). Additionally, it builds in “smart” typography for various languages (proper left- and right-sided quotes, for example).

MultiMarkdown Introduction PDF Presentation

MultiMarkdown Syntax Guide

A GitHub hosted guide to the markup syntax used in the MultiMarkdown system.

Cheat Sheets

WarpedVisions Markdown cheat sheet

A short sheet of the Markdown, Markdown Extra, and SimpleLink syntax.

Mashery Markdown Cheat Sheet

This web page contains a bunch of nicely formatted tables that showcase examples of Markdown syntax and the resulting output.

Squarespace Markdown Syntax Reference

A simple, no frills Markdown reference sheet from Squarespace.

Ahren Code Markdown Cheatsheet

Instead of a web page, this one comes as a PDF that you can download. As you can see below, it has an interesting dark visual theme.

Scott Boms Markdown Syntax Cheatsheet

If you didn’t like the dark theme of the previous PDF, here’s one with a much simpler, more typography-driven design.

Jeremy Stretch’s Markdown Cheat Sheet

A dense but nicely organized cheat sheet perfect for printing as a desk reference.

Station in the Metro Markdown Syntax Cheat Sheet

A very thorough, two page PDF cheatsheet.

Mac Apps

Byword

A really nice full-screen text editor with Markdown support. Byword is currently $9.99.

Marked

Marked opens MultiMarkdown, Markdown, Text or HTML files and previews them as HTML documents. It watches the file for changes, updating the preview any time the file is saved. With a full set of customization options and preview styles, Marked adds an ideal “live” Markdown preview to any text editor. Marked is $2.99.

Macchiato

Macchiato is a simple plain text editor with a twist. Modeled after TextEdit’s plain text mode, the editor is a chrome-less blank canvas. However, it is built from the ground up for writing Markdown prose—and, as such, it will format Markdown text as you write it. Macchiato will not *parse* your Markdown. Rather, it will *stylize* your Markdown source. Macchiato is $14.99.

MarkMyWords

MarkMyWords is a powerhouse of functionality for Markdown users. It’s not the prettiest app out there but it’s by far the most fully-featured Markdown client I’ve ever seen. MarkMyWords is $24.99.

IA Writer

IA Writer is one of the best apps in the full-screen text editor genre. The interface is gorgeously simple and the app has some excellent auto Markdown functionality built in. IA Writer is $9.99.

nvALT

nvALT is a fork of the original Notational Velocity with some additional features and interface modifications, including MultiMarkdown functionality. nvALT is a free download.

iOS Apps

Elements (iPhone and iPad)

Elements is a dedicated Markdown and Dropbox powered text editor for iOS. Elements allows you to view, edit and share plain text documents on your iPad, iPhone or iPod touch. All of your data is stored in a folder on your personal Dropbox account so that it’s accessible from any device you have. Elements is $4.99.

Nocs (iPhone & iPad)

With integration to Dropbox, Markdown, and a text editor, Nocs lets you work with your documents on any iDevice. Nocs is $2.99.

WritingKit (iPad)

Link to Dropbox. Write Markdown-formatted text. Use your favorite TextExpander snippets. Do quick research to find reference materials. Insert quotes and links into your documents. Upload images to CloudApp. Export your writings as Markdown or HTML files. Do all this and more with this awesome iPad text editor. WritingKit is $4.99

MarkdownNote (iPad)

MarkdownNote makes it really easy to create notes using Markdown. Using live preview feature, you can preview your Markdown markup syntax to HTML. MarkdownNote is $3.99.

Windows Apps

Writemonkey

Writemonkey is a free app that’s a lot like Writeroom for Windows. Writemonkey supports Markdown and Textile markup standards.

Sublime Text

Sublime Text is a powerful Windows text editor with, among many other things, Markdown support. Sublime Text is $59.

Free Web Apps

Markdown Dingus

The official online Markdown Converter from Daring Fireball. Simply paste in your text and get both the HTML output and a preview. There’s also a handy cheat sheet on the right side of the page.

Jon Combe Markdown Editor

This is one of my favorite online Markdown editors. It’s nice and simple with just the right amount of options and zero clutter. I love the two window mode that lets you see the HTML preview of your Markdown as you type. You can then download the HTML and/or Markdown versions.

CtrlShift.net Markdown Editor

Like the previous link, this tool has a two window setup that lets you view the output as you type.

Hashify

This one is new to me but I already really like it. It updates the preview live as you type like the previous two links but places a much larger visual emphasis on the output with a huge preview. There’s also a tweet button and even a QR code generator for your result, how cool is that?

Backpager

Yet another two window Markdown Editor with options to preview either source or syntax.

Alternatives

Markdown fits into a category known as Lightweight markup languages, and it’s by no means the only one. If you’re looking for others, Wikipedia has a stellar feature by feature comparison of all of the popular options such as Markdown, Textile, txt2tags and more.

Conclusion

That concludes our roundup of Markdown resources. If you’re just starting your Markdown journey, bookmark this page as your one-stop-shop for everything you need to know and download.

Leave a comment below and let us know what you think of Markdown. Have you ever tried it? Do you use it frequently? What resources and apps have you found to be helpful?

There are a number of reasons that you would want to embed a Google Map into your web page, whether it be for functional purposes, such as guiding users to your physical location, or aesthetic purposes, such as using map for a background graphic. Today we’re going to look at two ways you can go about this task: the quick and easy way and the powerful, flexible API route.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Embedding a Google Map

The first thing that we’ll learn to do is a simple and straight embed of a Google map. The functionality here is pretty limited but it’s super easy.

The first thing you need to do is simply go to Google Maps like you would if you were looking for directions. Simply type in the address where you want the map to start.

Now click the little link icon in the upper right of the screen. This should pop up a little window that includes a pure link and an HTML snippet, copy the second to your clipboard and paste it into an HTML document.

The HTML

That’s all there is to it! This should give you a live map on your web page. However, you’ll likely never want to paste in the code and be done but instead style it to match your needs.

To do this, let’s take a look at the raw code that results:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?client=safari&amp;q=phoenix+az&amp;oe=UTF-8&amp;ie=UTF8&amp;hq=&amp;hnear=Phoenix,+Maricopa,+Arizona&amp;gl=us&amp;ll=33.448377,-112.074037&amp;spn=0.040679,0.07699&amp;z=14&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?client=safari&amp;q=phoenix+az&amp;oe=UTF-8&amp;ie=UTF8&amp;hq=&amp;hnear=Phoenix,+Maricopa,+Arizona&amp;gl=us&amp;ll=33.448377,-112.074037&amp;spn=0.040679,0.07699&amp;z=14&amp;source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Now, this may look like a big mess but it’s pretty easy to sort through. The links are really the result of all that nasty-looking code so let’s toss those out just for the purpose of the example. Now the code looks much more manageable.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="LINK"></iframe><br /><small><a href="LINK" style="color:#0000FF;text-align:left">View Larger Map</a></small>

We can see some pretty basic inline style controls here. For starters, let’s try resizing the map to 600px wide. We can easily wrap that in a div and center it. I’ve also changed the color of the link near the end to white.

<div id="theMap">
    <iframe width="600" height="350" frameborder="3" scrolling="no" marginheight="0" marginwidth="0" src="LINK"></iframe><br /><small><a href="LINK" style="color:#fff;text-align:left">View Larger Map</a></small>
</div>

Let’s say we wanted to have a little more fun with this. Let’s ditch that last link completely and set our width to stretch all the way across the page. The code for this is nice and concise.

<iframe width="100%" height="280" frameborder="3" scrolling="no" marginheight="0" marginwidth="0" src="LINK"></iframe><br />

Going Fullscreen: The Quick and Dirty Way

The trick above is perfect for embedding a live map into your contact page, but let’s say you wanted to make the map more of a design feature than a utility. It’s pretty easy to use this same technique and stretch the map over the entire screen.

The HTML

To get started, create two divs, one that will hold any artwork, text, etc. and another for the map. I threw in some basic text for the overlay portion and pasted my map into the second div. Notice that I removed the link portion at the end of the embed link as well as the size styles near the beginning of the link.

<body>
 <div id="overlay">
	<h2>Fullscreen Google Map</h2>
	<p>A Design Shack Example</p>
 </div>
 
 <div id="theMap">
     <iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="LINK"></iframe><br /><small><a href="LINK"></iframe><br />
</div>
</body>

That’s really all the markup that we need. Let’s jump over to our CSS to make everything look pretty and get it stacking right.

The CSS

The first thing you’ll want to do is target the iframe in our map div and set it’s height and width to 100%. This will ensure that our map stretches over the full size of the browser window.

#theMap iframe {
	height: 100%;
	width: 100%;
}

Update: This works in Safari but it turns out getting Firefox to display a div at 100% height is trickier than I thought. Check out this article for details.

Next, we style the overlay. The key here is to set the position property to absolute, which will pull it out of the normal flow of the document and sit it on top of the map. From here we can style and move it into place.

I wanted a slightly transparent black bar so I used rgba set to 90% opacity. From here I added some margin on the top and set the fonts for both text tags using CSS shorthand.

#overlay {
	background: rgba(0, 0, 0, .9);
	color: #fff;
	margin-top: 150px;
	padding: 20px;
	position: absolute;
	text-align: center;
	width: 100%;
}
 
#overlay h2 {
	font: 200 4em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
 
#overlay p {
	font: 100 1.2em/1.5em "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

Get Creative

You can treat the map like any other item on the page, so experiment with changing its shape, applying effects and anything else you can come up with!

The Google Maps APIs

We’ve barely scratched the surface of what you can do with Google Maps on your site. In fact, Google has a whole family of APIs aimed at helping you structure, style and embed highly customized versions of their maps.

The iframe method above is fun and simple, but the best route to go for embedding maps into your site is probably the JavaScript API. Using this, all you have to do to embed a map is create a div with a specific ID like so:

<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

Then you jump into your JavaScript, call a function, set up some options and store them in a variable, and create the map using the ID from the HTML above.

  function initialize() {
  var mapOptions = {some options here}    
  var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

The API provides you with a ton of options for settings like zoom level and which controls are visible. You can even customize the little map markers with your own images.

API Tutorials

If you wanted to get started with the Google Maps APIs, here are some links that you’ll definitely want to check out.

• Official Google JavaScript API Tutorial
• Wade Hammes: Setting a Google Map as the Background of your Web Site

Static Maps

Don’t want an interactive map? Check out the documentation for adding a static map. Many of the features are the same, the result is simply a non-moving image rather than a real map that users can play with.

Conclusion

To sum up, if you want a Google Map on your site with no effort, follow the steps above to go the iframe route. Your control over the map is limited but you can have a lot of fun with how you embed it in the page. If you need more features and flexibility, sign up for a free API key and go the JavaScript route.

Leave a comment below and show us any pages you’ve created with Google Maps. What techniques and resources have you found helpful?

Do you have a list of things that you know you should learn but just haven’t been able to pick up? Have you tried to read through a book or two with no success?

Today we’re going to discuss why you can’t get through those boring web design books, how they should be different and what to look for to leverage the way you actually learn.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Are You Broken?

We’ve all been there before. You want to learn something new so you do what any educated person would do: head off to the book store. We work in an industry that’s growing and evolving faster than any of us can keep with up so these trips are a necessity to any web designer that doesn’t want to be obsolete in a few years.

The pressure that we feel from this environment gives us a sense of panicky urgency. We need to learn to survive. If I could only code WordPress themes, learn Ruby on Rails, or figure out what HTML5 apps really are, then I would be much more employable!

We browse the small collection of nerd books that are inevitably shoved into a corner, make our purchases and drive home feeling a deep sense of accomplishment. I’m on my way now. Give me a week and I’ll master this new skill, I know because the book jacket says so!

When you get home, there’s no time like the present to begin your educational journey. You pour yourself a drink, crack open the book and awake two hours later with your face stuck to the pages. After a week or two of similar episodes, you’ve read 100 pages and don’t feel like you’ve learned a single thing.

What happened? Why can some people learn new skills so easily while you struggle to finish a single book? Are you broken?

Textbooks ≠ Engaging

Think back to your days in college, pouring over textbooks before finals. You learned a lot in those days, but can even the best students among us really say that they enjoyed reading their textbooks?

The truth is, you learned because you had a test coming up, not because you enjoyed the material, otherwise you’d still be reading those books. Even then, that boring book was backed by hours and hours of class time that was spent pouring over the important information. There were presentation slides, discussions, quizzes and projects all aimed at one thing: getting you to actually learn and absorb all that lame crap that was in the book.

Textbooks are written by academics for academics. One thing that I find interesting is that when a web designer writes a book, he/she often puts on the same cloak of academia and attempts to write under these guidelines, thereby neglecting the intended audience in favor of fitting the accepted mold (admittedly, publishers are likely more to blame than authors).

This format, when the pressures of classes and tests are taken away, often results in stacks of unread books that readers had every intention of making it through, but simply weren’t successful. Instead of blaming the readers, why don’t we consider how to make the learning experience a little better?

Books vs. Blogs: A Different Learning Model

It’s easy to make vague claims about how design books are boring to make myself feel better about not enjoying them, but where’s the solid explanation of what’s wrong and suggestions for how to fix it?

To answer this question, I’m of course going to stand on a very biased platform and say that design blogs know something that book publishers don’t about how web designers and even developers often prefer to learn.

Discouraging: The Book Way

What’s the worst part about learning web development? All that stuff at the beginning right? Web development 101: here’s what an HTML tag is, here’s the guy who invented them, here’s where he grew up, here’s why using tags is better than not using tags, blah blah bah. Then, once you learn all there is to learn about tags in general, it’s time to walk through each tag in depth to see what it’s all about.

After twenty pages of this you’re ready to scoop your eyes out with a spoon just so you never have to see another HTML tag again. Why is web design taught like this? Because the academic way to learn something is to lay down a solid foundation of dry theory on every aspect individually before you’re allowed to try to put it all together. Otherwise, you’re brain would explode or you would just carelessly learn to code without knowing the difference between <b> and <strong>.

The problem with a learning model that so heavily leans towards theory is that no one can get through it. You pick up a book on HTML and read 3/4 or even all of it before you’re ever actually empowered with the skills and knowledge you need to bust out a web page all on your own. This is a flat out discouraging way to learn.

Encouraging: The Blog Way

For many people, including myself, one of the best ways to learn to code basic websites turns out to be frequenting web design blogs where tutorials are published. What’s the difference? Why does it seem easier to learn in this environment?

The obvious answer is that web design blogs break up content into manageable chunks. You’re not nearly as overwhelmed by a single post as an entire book. But in reality, books are split up fairly nicely as well so that doesn’t seem to be the full picture.

One interesting thing about writing a blog post is that, for the most part, each post is treated as an individual identity meant to appeal to as many people as possible in a fairly small amount of space. These constraints have led to a learning model that, for many, is much more friendly than the approach most books take.

Seeing the Big Picture

As I said before, web design books tend to make you sift through so much of the boring stuff that many people don’t even make it to the good stuff at the end. Even if you do, there’s usually not a whole lot even there to redeem the book.

Web design blogs on the other hand are famous for a specific brand of posts that were beyond instrumental in my education: Converting a PSD to HTML and CSS. In a single, brief post (sometimes two if they teach you to build the PSD), these awesome tutorials go through the layout, coding and styling of a basic web page.

Even if I’ve never touched a text editor in my life, I can follow these tutorials and have a live web page up and running in a single afternoon! This is probably less than the time it would take you to get through that HTML tags section from the hypothetical book above.

In contrast to the other method, this is a very encouraging way to learn. Right off the bat you get to build something real and get a feel for what web design and development are really all about. There are some important lessons here about learning in general.

Jumping In All At Once

The difference between the two methods of teaching is clear. Books tend to ease you very slowly into web development, imagining that having you build a website right from the beginning would be an overwhelming and damaging experience. Only after you have an extremely thorough and solid foundation of theory should you actually attempt to build a complete web page.

PSD to HTML blog posts take the opposite route. Here there is no wading, you’re thrown into the pool all at once to see if you can swim. You’re taught as you go what certain things are for and how they work. You are assumed to be reasonably intelligent and therefore allowed to derive a good deal from context and to reach conclusions through doing.

Will running through a single PSD to HTML post thoroughly teach you to be a web developer? Absolutely not. Will there still be huge critical gaps in your knowledge? You bet! However, you’ve seen what it’s all about and had the immensely encouraging experience of seeing something complicated that you built come to life.

The more of these posts you go through, the more you learn, each author is different and has unique insight. Once you’ve gone through a bunch of these, you’ll start to learn enough to know what you don’t know and can then start digging into meatier posts about the complexities of the trade.

Just Like Learning a Song

This idea applies in several areas of learning. Imagine that you’re learning to play guitar and you have two teachers to choose from. One is going to make you memorize every note on the neck, every chord/voicing/variant, and every possible progression before you learn to play a single song.

The other teacher will start the class by teaching you the five chords and simple strum that make up “The House of the Rising Sun”. If you’re like me, you’re going to choose teacher number two. Sure, the first teacher might actually produce students who are better musicians, but ten years from now the second teacher will have three times as many students who still play guitar simply because that first song gave them enough encouragement to not give up.

Web design books too often take the route of the first teacher. They kill your drive to learn with information overload and wait far too long to bring you the reward of actually feeling like you can build something.

To be fair, some books do in fact take the approach of the second teacher, walking you through the education process in a series of fulfilling projects. If you’re in the market for a good way to learn something when other methods have failed, find a book like that and see if it’s not much easier to get through.

Conclusion

This post has two simple messages, each with a specific audience. For authors and publishers, consider creating books that actually take advantage of the way your audience learns rather than following an academic schema that discourages a large portion of your readers. Let them dive into big projects right away, make some conclusions and even some mistakes, then fill in the gaps in knowledge as they progress.

For those of you trying to pick up a new skill, whether it’s basic CSS or advanced PHP, try to find a teaching source that fits the way you learn. If you learn better by reading chapters and chapters of theory before attempting anything, great, you have plenty of books to choose from.

However, if this doesn’t work for you, look for something that throws you in the deep end right away. Identifying and leveraging your own learning tendencies is a life-changing experience!

Photo Credits: bgottsab, danflo and LifeSupercharger.

To take it further, we’re also going to see how to animate the transition using a little jQuery.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Internal Linking: The Gist

As I explained in the intro, today we’re going to learn a basic trick and then see how to make it even better. When I was first learning web design, this was one of those things that I always told myself I needed to figure out but always put off learning, if you’re in the same boat, this article is for you.

Live Demo: Click Here

A Tale of Two Links

As you can probably guess, linking to an internal section in your page requires not one but two links. First, you want to add the link that will serve as the anchor to scroll to, then you create the standard clickable link like you normally would and direct it at the first link. Make sense? If not, don’t worry, it’s easier than you think.

For the first part, let’s say we’re putting a link in a footer that will scroll to the top of the page, a common practice on longer pages. To insert this link, we use some syntax that you might or might not be familiar with:

<a name="linktotop">Back To Top</a>

Notice that instead of the typical “a href”, we used “a name”. This is important and is a likely point to get tripped up on if you’re used to inserting links with the former. You can pick anything you want for the name, just remember that it’s best to use something descriptive like we’ve done here. Also, make sure you take note of the name that you use, because we’ll have to refer to it again in the next step.

Once you’ve got that link all ready to go, it’s time to insert the anchor. Essentially, if you want to scroll to a specific point in a page, you have to insert a bit of code at that point so that the link we just created knows where to go.

Since we want to link to the top of the page, we would insert this snippet at the top of our HTML.

<a href="#linktotop"></a>

There are a couple of important things to take note of here. First of all, we added a hashtag to the beginning of the link name. This doesn’t appear in the first link, but it’s necessary in the second. Also, the text portion of this link has been left blank. This is not necessary, but is in fact an option. More often than not you’ll probably be linking to an element that is already in your layout so there will be content here.

Building the Demo

Now that you understand the syntax, it’s time to build a basic web page using what we’ve learned. Obviously, we’ll need to build a page that’s long enough to have to scroll. To this end, let’s start by tossing in some big blocks of text, each with its own headline.

<body>
 	<div id="container">	
	    <div class="section">
	    	<h1>Headline One</h1>
	    	<p>Lorem ipsum dolor sit amet...</p>
	    </div>
 
	    <div class="section">
	    	<h1>Headline Two</h1>
	    	<p>Lorem ipsum dolor sit amet...</p>
	    </div>
 
	    <div class="section">
	    	<h1>Headline Three</h1>
	    	<p>Lorem ipsum dolor sit amet...</p>
	    </div>
 
	    <div class="section">
	    	<h1>Headline Four</h1>
	    	<p>Lorem ipsum dolor sit amet...</p>
	    </div>
    </div>
</body>

The four headlines should provide us with four potential places to scroll to so we’re perfectly set up! From here we want to add in the named links the the h1 items.

<div class="section">
	<h1><a name="headline1">Headline One</a></h1>
	<p>Lorem ipsum dolor sit amet...</p>
</div>
 
<div class="section">
	<h1><a name="headline2">Headline Two</a></h1>
	<p>Lorem ipsum dolor sit amet...</p>
</div>
 
<div class="section">
	<h1><a name="headline3">Headline Three</a></h1>
	<p>Lorem ipsum dolor sit amet...</p>
</div>
 
<div class="section">
	<h1><a name="headline4">Headline Four</a></h1>
	<p>Lorem ipsum dolor sit amet...</p>
</div>

Starting CSS

Now we toss in some basic styling for this text. All I’ve really done is styled the fonts and added a bit of margin to each section to spread them out nicely.

* {
	margin: 0;
	padding: 0;
}
 
#container {
	width: 600px;
	margin: 50px auto;
}
 
/*Text Sections*/
.section {
	margin: 50px 0;
}
 
.section h1 {
	font: 55px/65px Helvetica, sans-serif;
}
 
.section p {
	font: 15px/25px Helvetica, sans-serif;
}

Here’s what the resulting paragraphs look like. Super simple but they’ll get the job done for what we need.

Navigation and Header Image

To navigate to the anchors, we’ll need to create a series of links in our html using the hashtag method at the beginning of this article. We’ll also throw in a placeholder image just to give us a little more scrolling room.

<div id="nav" class="clearfix">
	<a href="#headline1">1</a>
	<a href="#headline2">2</a>
	<a href="#headline3">3</a>
	<a href="#headline4">4</a>
</div>
 
<div id="bigPic">
	<img src="http://lorempixum.com/600/400/city/9" />
</div>

Here we’ve created the text links with simple numerals and inserted the anchors to the various sections of our HTML. Now we just have to apply a little more styling and we’ll be ready to go.

/*Navigation*/
 
#nav {
	font: 12px/30px Helvetica, sans-serif;
	text-align: center;
}
 
#nav a {
	background: #444;
	color: #fff;
	margin-right: 30px;
	width: 30px;
	height: 30px;
	float: left;
	text-decoration: none;
	-webkit-transition: all 0.5s ease;
}
 
#nav a:hover {
	background: #6fcbf3;
}
 
/*Image*/
#bigPic {
	margin-top: 30px;
}

Basically what I’ve done here is turned each link into a little box:

When you hover over one of the links, the background color transitions to blue. Notice that the line height on the text is set to the size of the box, this is a neat trick for centering the text vertically.

Clearing the Float

Since I wanted to turn the links into little boxes, I had to keep the display property set to block. This means to make the links line up horizontally, a float was necessary. There’s a lot of debate on how to clear floats these days, but a quick search revealed that the current favorite method seems to be the following from Pathfinder Software.

Feel free to disagree and implement your own float solutions. I won’t go any further into this so as to avoid distraction from the main purpose of this tutorial.

/* float clearing for IE6 */
* html .clearfix{
  height: 1%;
  overflow: visible;
}
 
/* float clearing for IE7 */
*+html .clearfix{
  min-height: 1%;
}
 
/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

Finished Demo: Pure HTML/CSS

With that, our internal link demo is complete! Click any of the links in the navigation and they should take you to that point of the page. Notice that, for the anchors near the bottom of the page, the scroll just goes down as far as it can.

Live Demo: Click Here

Animating the Scroll

With HTML, anchor linking works, but the transition is pretty harsh. There’s no animation at all, the page just jumps right to the anchor upon clicking. What if we want to make this a more gradual effect so the user can plainly see that the page is scrolling down?

You could perform the entire linking and scrolling operation in JavaScript, but I think that’s a bad idea simply because you’re unnecessarily limiting the number of people that can use your site to those with JavaScript turned on. Instead, it’s much better to set the linking up in HTML exactly like we’ve done here and then add the animation effect for JavaScript users. The site will still work for anyone with JS turned off, they just won’t see the animation.

To accomplish this, we need three things. The first is of course jQuery because it’s amazing and makes everything easier. The second is an extremely handy little jQuery plugin from Ariel Flesler called ScrollTo and finally, you’ll need an offshoot of ScrollTo called LocalScroll.

This sounds complicated but it’s super simple. LocalScroll was built for the sole purpose of animating anchor link scrolling so it’s the perfect tool for the job. It’s also by far the easiest solution to implement that I was able to find! The first thing you need to do is download LocalScroll and insert it along with jQuery into your HTML (ScrollTo will be included in the download as well).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script> 
<script src="jquery.localscroll.js" type="text/javascript"></script> 
<script src="jquery.scrollTo.js" type="text/javascript"></script>

Next we need to pass into it the parent element that contains the hashtag links. In our case the #nav div contains the links so we’ll insert that into the following snippet:

<script type="text/javascript">
$(document).ready(function() {
   $('#nav').localScroll({duration:800});
});
</script>

All you need to do to implement this in your own projects is change the target and, if you choose, specify a duration for the animation. That’s it! This one little block of text takes care of the animated scrolling effect for us.

Finished Demo: Animated with JavaScript

Here’s version two of our demo, this time with the JavaScript magic throw in. Compare it to the previous version to see how much nicer the effect feels with the transition.

Live Demo: Click Here

Conclusion

In closing, remember that linking to a scroll point within your page is easy with pure HTML. All you need to do is set up a named link that is attached to a specific spot and a clickable link that will get you there.

After that, if you want to make the transition more gradual, use jQuery and LocalScroll together. Be sure to specify both the parent container for your links and the duration of the animation.

Below we’ve included some of the best and most recent free templates from a number of sources. The templates range from heavily designed to extremely basic so that no matter what you’re looking for, be it a simple layout aid or a nearly finished product, there is something here for you.

Campaign Monitor: 100 Templates

Recently, Campaign Monitor asked some very well-known designers to create some free html email templates for them to distribute. The end result was over 100 beautiful templates that you can download at zero charge to you.

Unfortunately, 100 templates can be quite a lot to sort through so to help narrow the selection down I’ve chosen some of my favorite templates from this collection and listed them below.

Spring: Meagan Fisher

Mike Kus: Color Direct

Newism: Natural

Simon Collison: Retro Green

Veerle Pieters: Textile

MailChimp: 36 Templates

If you’re looking for something to start your own design, the fairly finished templates above might be a pain to customize. MailChimp has a collection of basic layouts that you can use as nice starters for your own aesthetic scheme.

CakeMail: 23 Templates

Though I’m definitely not a fan of all of these templates, the basic layouts at the top of the list serve as nice starters for your own designs, just as with those from MailChimp above.

FreeMailTemplates: 20 Templates

Though not as stellar as the Campaign Monitor designs, this collection does feature some really nice looking templates that are versatile enough to be used for almost any business.

Beautiful Emails: 2 Templates

This blog is dedicated to bringing you tutorials, inspiration and templates for better email marketing. They currently have two free HTML email templates that are free to download.

Which Will You Use?

Leave a comment below and let us know which templates above you found to be the most useful. Do you like letting professional designers do all the heavy lifting as with the Campaign Monitor templates or do you want to create custom designs built on top of rock solid layouts like the MailChimp templates?

Amongst the many popular features of the service is the ability to directly customize the look and feel of your page. Each blog has its own theme which is used to give your page its layout and color scheme. There are plenty of free and paid themes to choose from, but it’s much easier and more fun to create your own.

In this brief tutorial we’ll be going over the major pieces to any Tumblr theme. The engine is powered using straight HTML/CSS code along with in-text variables for block elements. Basic HTML is all that’s required to really get started and build your own theme.

Understanding Pages

Any Tumblr theme is simply a single page of HTML code with conditional case variables in-between. This basically means all of the page views are separated by case variables in one long document.

So for example all posts from your site will be broken down into categories. These are based on media content such as text, image, video, URL link, etc. These are all different options or views for your blog. Separate options can be activated based on whichever type of page is being requested.

Now these types of conditionals are known as blocks. These are known as case variables which display unique content based on certain conditions. Page variables are single containers which hold dynamic values. For example, a Page Title or RSS feed will change with each blog so these values can be added through variables ({Title} and {RSS} respectively).

Building the Header

The heading is the first piece to any Tumblr theme. It contains all the important details about your blog and which meta options are set. Below is a bit of sample code to use in your header to get started.

<!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" />
{block:IndexPage}
<title>{Title}</title>
<meta name="description" content="{MetaDescription}" />
{/block:IndexPage}
{block:PostSummary}<title>{PostSummary}</title>{/block:PostSummary}
<meta name="if:Show Search" content="1" />
<meta name="if:Show people I follow" content="0"/>
<link rel="shortcut icon" href="{Favicon}" /> 
<link rel="alternate" type="application/rss+xml" href="{RSS}" />
<link rel="stylesheet" type="text/css" href="http://jakerocheleau.com/tumblr/global.css" media="all" />
<link rel="stylesheet" type="text/css" href="http://static.tumblr.com/ji8ycjw/YLalddwdr/print.css" media="print" />
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="http://static.tumblr.com/ji8ycjw/SNRlddwgz/ie8.css" media="screen" /><![endif]-->
</head>

The document doesn’t look much different than a standard HTML page. You begin with a DOCTYPE declaration followed by your html and head tags. Inside you may notice two lines of code delineating a block element. The opening {block:IndexPage} is creating a block of code to only display on the index page.

Inside we have a title and meta description which display the {title} variable of your blog. All other pages have a title containing a post content summary labeled {postSummary}. You will find these variables littered throughout themes such as {Favicon} and {RSS} for header placings.

One last bit to notice is how all of my theme’s CSS styles are in external documents. This provides a much quicker way to access data and process DOM actions. Also since Tumblr has to load its own files before loading your theme external styles will expedite the whole process.

Blog Posts

Spend some time examining your document body and building your page structure. With time you should reach your primary content area. Inside here is where all of your blog posts and comments will be listed. This is marked by a {block:Posts} and contains many sub-variables.

Within the Posts block we are checking for the different types of media. There are a lot to go over and they’re all relatively straightforward. I’ve added a list of post block types below:

• {block:Text}
• {block:Photo}
• {block:Photoset}
• {block:Quote}
• {block:Link}
• {block:Chat}
• {block:Audio}
• {block:Video}
• {block:Answer} *for ask messages

These may seem a bit difficult to take in at first. Truthfully the best way to understand is by practicing and building out new Tumblr themes. If you’d like deeper information into each post media check out the official themes docs.

Functional Pagination

Tumblr doesn’t plan to keep all your posts loaded on a single page, that could become very intrusive. Pagination is built into Tumblr’s themeing engine and supports next/previous links for your archive pages.

The first style of pagination guides the user between your older pages. Each page generally stores 7-10 posts, but can be altered to contain more. This type of conditional will work on any page and can display links as long as there are more pages to traverse. Below is an example of this style:

{block:Pagination}
<ul>
    {block:PreviousPage}
    <li><a href="{PreviousPage}">Previous</a></li>
    {/block:PreviousPage}
 
    {block:NextPage}
    <li><a href="{NextPage}">Next</a></li>
    {/block:NextPage}
</ul>
{/block:Pagination}

This is a very rudimentary example, though it does clearly illustrate the point. This could be placed anywhere in your code to generate a Pagination block of links.

The second option is to offer links between posts. These will show only on individual post pages where a visitor can see your content and responses listed. Whenever there is a post either before or after in the archives you can display nav links.

The code looks exactly the same as above, except with slightly different variable names. The initial block checks for {block:PermalinkPagination} instead of just Pagination. Also all instances of Page are replaced by Post as outlined below.

• {block:PreviousPost}{/block:PreviousPost}
• {block:NextPost}{/block:NextPost}
• {PreviousPost}
• {NextPost}

JumpPage Nav

There is also a 3rd option for navigation links called jump pages. These offer visitors a list of numerical links pointing each towards a page in your blog archives. The structure is similar to other forms of pagination, though with its own slight changes.

I’ve included another example below for Jump Pagination. The content is a bit more confusing to digest so take time to look over the code. There are no new concepts here since all Tumblr themes are straight HTML and basic variables.

{block:JumpPagination length="5"}
    {block:CurrentPage}
        <span class="currentPage">{PageNumber}</span>
    {/block:CurrentPage}
 
    {block:JumpPage}
        <a class="jumpPage" href="{URL}">{PageNumber}</a>
    {/block:JumpPage}
{/block:JumpPagination}

The length=”5″ attribute through the first element counts how many links to show. This means our block list will always contain 5 links geared towards a central axis.

To further expand on this theory the only times you’ll see the current page towards an endpoint is at the very start or end of navigating pages. The system works by setting the current page directly in the middle of all Jump Pages. So for example on page 7 of our blog archives we should see links for pages 5-9.

Further Readings

These are some of the most basic intro pieces for developing into Tumblr. Themes are a great way to customize your blog and add in your own pinch of creativity. It’s encouraged to check out Tumblr’s official theme documentation for detailed examples and resources.

Some pages you may potentially be interested reading include likes, following count, search queries, and post notes. For every Tumblr account you are given a free theme by default. Spend some time dissecting their official code to get a better understanding of how Tumblr’s system works and how to manipulate your own customizations.

We’ll be looking a bit further into how the DOM really works. The model has been around for years and currently resides at DOM level 3 (DOM3 documentation here). There is a DOM4 currently in editor’s draft with some brand new specs coming soon. For now we can focus on a brief understanding of how the object model came into being.

A History Lesson

During the early days of web scripting there was no standard way to access page objects. This allowed major browsers to come in and write their own standards and rules for document manipulation. Software companies even wrote their own Scripting languages such as VBScript by Microsoft and Applescript by Apple.

The early models were very limited. You could only access specific elements like images or form inputs. Over time the World Wide Web Consortium developed a standard model which most mainstream software publishers followed. Notably Microsoft’s Internet Explorer, Netscape, Safari, and Opera.

Currently the DOM has been through many revisions and allows for very precise manipulation of page elements. With script libraries such as jQuery and MooTools developers are able to spend much less time hung up on bugs.

Modern DOM Scripting Today

JavaScript is by far the most popular language amongst developers. Originally started as an open source project by Netscape in 1995. It’s based off the popular programming language Java and has been modified by countless communities of web developers.

The DOM itself is only useful in situations when objects are able to be accessed. Mostly all standards compliant browsers today support all elements and methods for DOM manipulation in full. With this standardization of the object model we have seen a rise in simple scripting and page functionality.

The Document Tree

When envisioning the DOM it can be easily understood in comparison to a tree. When a document loads each page element is held in memory as a new object. These are sometimes referred to as nodes of the tree.

As an example each proper HTML page should start with an HTML element and all page content should load within a body element. This means your tree hierarchy starts at a root HTML element and traverses into its first node body.

This is a simple idea but it provides immense power to developers. From this we are able to pull many types of elements from the page just by accessing their specific node or location in the document. A small script could be written to pull all images from a page and push them into an array for storage.

From here it’s possible to access each image element via JavaScript. Below I’ve added some code which sets 2 variables. The first holds the 3rd image object in memory while the second pulls the src string from the element.

var imgtag = document.images[3];
var imgsrc = document.images[3].src;

Node Methods

Once you have the ability to manipulate and access nodes you are able to push functions onto them. The Object Model is not just for traversing the page but also applying new effects.

These are called methods and they are written into the DOM specification. When imagining a node-based tree system these methods will clear up most any confusion. Below is a small example list of some popular methods you can use on nodes:

• nodeA.firstChild
• nodeA.lastChild
• nodeA.parentNode
• nodeA.nextSibling
• nodeA.prevSibling

Most of these methods can be used within a variable declaration or function return statement. They will return an object from the DOM in relation to your current placement.

The first two will grab the first inner node and last inner node, respectively. This is what the keyword child is supposed to represent, with nodeA being the parent to both children. This should also explain how parentNode works as you can pull the node object which sits directly above your current selector.

Both sibling functions are unbeknownst to most and target elements at the same hierarchical level. As an example if you were traversing an unordered list with 3 li tags you could only call nextSibling 2 times before returning null. Many of these functions have since become scaled down by 3rd party libraries into quicker, more accurate methods.

Element Classes and IDs

One of the most popular ways to retrieve object information is through direct targeting. If you’ve written HTML code you should know about class and ID attributes. These can be set on any page element and are notoriously useful for applying CSS styles.

When you create these attributes the DOM recognizes them as separate environments from the overall document. IDs are required to be unique amongst your page and will cause errors in scripting if you duplicate the same name. Classes may contain countless elements, although they can become bogged down quickly.

The popular method getElementById() has been used by developers for a decade to simplify the process of object manipulation. This method takes a single string argument which holds the ID value of any element you’re looking to target. As such you can change an image’s src attribute quickly with similar code:

document.getElementById('myImg').src = "images/newImg.jpg";

Advances in the Model

With the release of the popular jQuery library it’s easier than ever to develop powerful scripts. Older functions such as getElementById() and getElementsByTagName() are still accessible, though deprecated by most standards.

The quickest way to get started manipulating the DOM is by accessing objects through jQuery. A simple method call $(document).ready({}) is all that’s required to run a new event. The $() syntax is used to represent pulling any type of object from the page.

This can be used in unison to pull IDs and tags from a page. Each simply requires the same symbols used in CSS declarations such as $('#myid') and $('.myclass'). Once inside the ready function jQuery allows you to pull out as many events and functions as you need.

The library is optimized for speed and with the DOM currently advancing rapidly we are seeing huge leaps in scripting support. Each node is loaded into an object memory slot which both the web browser and developer may access.

Conclusion

The open source movement has largely contributed to the advancement of DOM specs, too. Over the past 10 years we’ve seen XML welcomed into the documentation along with ways of defining content feeds (RSS, Atom, etc).

It’s important to stay on top of trends as web developer. The web is advancing quickly and the Document Object Model’s latest revisions show how much control is available today. If you’d like to delve further into DOM scripting we offer collections of jQuery tricks and many web design video tutorials completely free!

Adobe recently launched a project called Rome that is meant to be a sort of all-in-one content publishing platform. You can use this innovative application to build websites, print projects, interactive PDFs and more.

Today I’ll give you a super basic beginner’s introduction to Rome so you can see what it is, how to use it and whether or not it’s right for you.

Rome

In Adobe’s own words, Project Rome is “Simple, powerful, all-in-one content creation and publishing for virtually anyone.” If you think this is a little vague, you’re right. But then again, the entire project is a little puzzling. Is Rome the future of Photoshop? Is it competition for Dreamweaver or InDesign?

The answer is really “none of the above.” After playing with it a bit, it becomes obvious that Adobe is attempting to target a different market than with the Creative Suite. While CS is an incredibly expensive set of powerful, professional applications that can take years (decades?) to learn thoroughly, Rome is meant to be a user-friendly way for just about anyone to create rich content.

Before we get started, you’ll want to stop by the Rome website and either download the desktop application or launch the web app (I’ll be using the desktop version).

How Much Does It Cost?

Rome is currently available in a free preview. Adobe apparently hasn’t yet decided their pricing strategy and wants to see how users respond before proceeding. You can download a copy now but just know that one day it will likely deactivate it and make you either purchase a one-time license or perhaps even a subscription.

Getting Started

Once you’ve downloaded the application, firing it up should make a vertical strip of buttons appear on your desktop.

From here you can browse the default templates or even a nice gallery of user-submitted templates, but these already have a lot going on so it’s better for learning purposes to start from scratch.

Click the “Create New” button to open a rather large gallery of possible document sizes. From here go to “Blank for Screen” and select something in the “Browser Sizes” folder. I chose 960×550.

Meet Rome: The Interface

When you first get a look at the Rome interface, it looks like an extremely simplified version of Photoshop. Rather than an endless sea of palettes, there’s only a couple. In fact, there might seem to be far too few. This is because Adobe seems to be experimenting with some new ideas that only show you what you need to see when you need to see it, rather than giving you the whole enchilada all at once.

The image above shows just how bare the screen is compared to what we’re used to in the Creative Suite. We’ll take a closer look at each section below as we dive into our simple project.

Sheets

The site we’re going to build will have several pages. Rome refers to these as “Sheets” and displays them in the upper left with thumbnail previews.

The first thing we want to do is create a “Master Sheet.” This will allow us to set up a few basic items that will appear on every page. Rather than placing items manually on every sheet, items in the master sheet will automatically be carried over to your other sheets. This can be confusing at first because you’ll often see an element on a sheet that you can’t seem to edit. This is because, though the item may appear on that sheet, it’s a master element and therefore requires you to select the master sheet before editing.

To create a master sheet, click on “Show Master Sheets” in the “View” menu. This should separate your sheets menu into two sections: Sheets and Master Sheets. Click the little plus button to add in a few extra regular sheets. Next to the thumbnail of a sheet is a little Rome icon, you’ll see these scattered throughout the interface indicating that there’s a hidden, context-sensitive menu here.

Use this little flyout menu to name your sheets Home, About, Portfolio and Contact.

Navigation Menu

Since we’re keeping this as a simple introduction to the app, we can show off many of the basic features by building a navigation menu. To start, grab the text tool and draw a box. Then type “Home” and use the menu shown below to select a font that you like.

Here you really see that menu magic in action. There’s a ton of menu options here, each with a set of submenus. What you get is a lot of functionality without all the clutter. It definitely takes some getting used to, and can be time consuming, but once you figure it out it’s not so bad. I do really like the little sliders that can be used to adjust various properties like font size.

Once you’ve got the size and font figured out, go down to the “Link” menu and set the link to the “Home” sheet.

This will automatically change the appearance of the link to blue with an underline. Since we don’t want either of these, we’ll have to fix it. Changing the color back to black is easy enough but the underline was harder to find. This option is found under the “More Character Options” menu shown below.

Hover Effect

Next we want to change the appearance of the link when the user is hovering over it with the cursor. This isn’t exactly an intuitive process and took me a few minutes to figure out.

With your text box selected, go to “Event Settings” in the “Advanced” menu and activate “Standard Events.”

You should now have an “Events” option in the main menu. From here, go to “Mouse Enter” and “Set Property.” Next, select your text object and set the property to Opacity. Finally set the value to 50%.

This will dim the text to 50% of its original opacity when someone hovers over it. I would’ve like to have simply set the color, but that option doesn’t seem to appear in the events menu.

The problem that we now run into is that the text will change color on Mouse Enter but will stay that way permanently. To solve this, we need to add another event on Mouse Exit that sets the opacity back to 100%. See the image below for a reference.

Duplicating the Home Link

Now that we’ve got our first link set up just the way we want, copy and paste it three times to create the About, Portfolio and Contact links. Remember that you’ll have to select the text for each, then go in and change the links to point to the appropriate sheets.

You’ll also want to distribute the objects vertically to make sure they’re spaced evenly. To do this, select all of the text boxes and go to the Align menu.

Previewing Your Work

To see if your navigation menu is functioning properly, click the little monitor button with a play button near the top of the screen. This should give you a live preview of your site in action.

Hover over the links to make sure they’re working and click around to see if the sheet is changing.

The Objects Palette

Now that you’ve got a few elements on the page, let’s take a look at the Objects palette. This is equivalent to the Layers palette you’re used to seeing in other apps and is essentially just an interactive list of all the elements on the page.

Note that it’s much simpler than the Photoshop layers palette. There is no masking, layer effects, etc.

Finishing the Master Sheet

Since every good minimalist site has a cliche circle logo, ours simply cannot remain without one. Mocking up one quickly will give you a feel for the shape tool. Notice that the shapes are completely resizable with no image degradation. Rome is perfectly suited to work with both vector and raster objects.

And with that, we’re finished with our Master Sheet. These elements will appear on every page without any additional effort.

Finishing Up The Site and Exporting

As I mentioned before, the navigation allowed us to cover most of the features that I wanted to show off. We set up links, positioned and distributed objects and created hover effects.

From here you should play around on your own and finish up the other pages. Try pasting in an image, working with paragraphs of text and maybe even building a grid. Be sure to select the appropriate sheet before adding content so that you don’t keep adding to the Master Sheet.

When you’re finished with the site, you have two basic options for exporting it. The first is as a Rome site. This uploads your site to an Adobe hosted server using your Adobe ID (free for now). However, you can’t do anything with it this way so I prefer exporting it to an SWF and selection the option to build an HTML file.

This will give you a live, functioning website built all by yourself without an ounce of code!

My Thoughts on Rome

Now comes the part that you’re really interested in, can you use Rome for actual projects? In order to answer this question, let’s look at the pros and cons.

First, let’s look at the positive side. Rome is an innovative WYSIWYG that is by no means perfect but feels quite polished and powerful. The learning curve is much smaller than the CS apps and should definitely appeal to anyone intimidated by that suite. Further, it achieves the ever illusive goal of allowing non-developers to actually build a functioning website without a single line of code.

However, despite these benefits, I don’t see myself ever using Rome in a professional context for web projects. The biggest hurdle for me is that it is so dang dependent on Flash. I’m not going to launch into a Flash-bashing rant, but this is simply an impractical use of the technology whether you love or hate it. The site we just built featured only a few links and images. There’s absolutely no reason the resulting files should be anything but pure HTML and CSS. I can understand Adobe wanting to build in Flash support, but don’t claim that I can build websites with this tool if you don’t even have an option for a basic web output.

Keep in mind that this article only looked at Rome from a web point of view. It might still be great for developing print materials and interactive PDFs. In fact, it’s actually a really awesome tool for the latter.

Conclusion

To sum up, if you are a complete stranger to web development and need to build a quick site yourself without hiring anyone or reading 15 books, check out Rome. It’s fairly easy to pick up and run with no matter what your level of expertise.

However, if you’re in the market for a robust and user friendly WYSIWYG that actually creates professional level websites, check out our tutorial on Flux 3. If you understand CSS, Flux is a killer application and I have found no worthy rival.

Leave a comment below and let us know what you think of Project Rome. What did Adobe do right in this experiment? What did they do wrong? We want to hear from you!

Flux is a WYSIWYG website editor for Macs. Now, before you curse under your breath about how much you hate WYSIWYGs, you should know that Flux is different and is both powerful and flexible enough to be used by professional web developers.

Today I’ll introduce you to Flux by creating a super simple web page from scratch (no annoyingly rigid templates). Along the way we’ll see what a typical workflow looks like and why it just might be the best visual web editor I’ve ever used.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Why Is Flux Different?

When I think of a WYSIWYG website editor, two popular applications come to mind. The first is Dreamweaver. Dreamweaver is a ridiculously powerful application, but has a learning curve that’s quite high. It’s simply a huge application that may not be worth the trouble for many designers who are already comfortable coding by hand.

The second application that comes to mind is iWeb. iWeb is fun for a few hours, but once you realize how strict the template system is, the idea of using it for professional web design goes out the window. Even its much far superior rival RapidWeaver still seems to push you more towards preset designs and seems like its targeted towards web development novices.

So Dreamweaver is for professionals but has a steep learning curve and iWeb is for laymen and has almost zero learning curve (and consequently zero flexibility), where is the happy medium? Enter Flux.

Flux is a visual web design application for people that hate visual web design applications. The workflow has been carefully crafted to mirror the way you code sites by hand. The best part: it’s completely flexible. There are some included templates but I’ve never even really bothered with them because Flux makes it easy to design from the ground up, just like I would if I were writing out the code manually.

Enough talk, let’s see Flux in action.

What We’re Building

Because I want this to be a really basic introduction, we’ll keep the design super simple. If I get enough requests in the comments, I can write another more involved and advanced tutorial but for now we’ll stick with a basic one-page site with very little on it.

Pretty simple right? It almost looks like one of the cheesy templates that come with these types of apps but as I said above, we’ll be building this from the ground up.

Step 1: Creating a New Project

Creating a new project in Flux is a painless procedure. All you do is go to File>New and you’re on your way. It will ask you where you want to place the files and whether you want Flux to automatically create a basic site structure for you. This includes the following: index.html, main.css and an images folder. In this case that’s exactly the format that I want to use so I chose to let it set it up for me. If you have a different system that you like better, you can do this manually.

When you double click on the HTML file, you’ll be taken into the main Flux interface. As you can see, there’s a lot going on here. In fact, we could spend the entire tutorial just discussing each button and feature. However, to make things less boring, we’ll go straight to the building and introduce features as they come up. I definitely recommend that you download the demo and poke around the interface to familiarize yourself with it.

Step 1: Styling The Body

If you click on the big empty canvas area, you should see a box that becomes highlighted with the word “body” in the upper left. This is the empty body structure of your HTML. The first thing we’ll want to do for our site is add a background to this element.

To do this, click on the Inspector button at the top (looks like a pair of binoculars). This will bring up what is in my opinion, the heart of the app. Here you’ll create styles and define the look for every element that you create inside of Flux. The output of the Inspector is CSS and all of the controls inside are labeled with the CSS properties you’re used to working with.

Adding A Background Color

If we were coding this site by hand, the first step might be to designate a background color for the body. We’ll actually be using a repeating image in the next step, but we’ll want to make sure the background looks right even if the image doesn’t load.

With the body selected, we’ll go to the “Fill” section on the left of the Inspector. From here, applying a background color is as simple as clicking on the appropriate CSS property and typing in our color; in this case #1f1f21.

Adding A Background Image

To add a background image, we basically take the same exact steps and simply navigate to the proper file in the images folder. I used an awesome free background from Premium Pixels.

Step 2: Adding a Container

To add a container to a site, you would normally just throw in a div, and that’s exactly how things work in Flux. Click the “Container” button at the top and go down to “Quick Div.” Make sure that when you do this step, you have the body element selected. In Flux, you always want to select your desired parent object when creating a new element. This ensures that it is inserted into the correct portion of your HTML.

This should create a little empty box with guides on your canvas.

Just as we did before, select the element and open the inspector. Under “Position & Size”, set the width to 700px and the height to 810px. Make sure to clear out the default values for “top” and “left” while you’re at it.

Auto-Centering An Element

Now, if you’re a web developer you already know exactly how to center this div: set the margins to auto. You can go in and do this manually or simply click on the little gear at the top right of the Inspector and go down to “Auto Center.”

Adding a Shadow

At this point you should have the basic frame for the site.

Just for fun, I want to show off some of the Webkit CSS3 features built into Flex. If you click on “Webkit” in the inspector, you’ll see a handful of fun CSS properties: box-shadow, box-reflect, webkit transitions, etc. Unfortunately, there aren’t any Mozilla equivalents, but you can always drop those into the code manually.

To add a shadow to our container, just click on the property and adjust the settings.

Inline Styles?

Keen observers have probably noticed by now that the styles we’ve been creating are set to “inline.” This is one of the quirks of the Flux workflow. For some strange and unknown reason, all of your styles are set to inline by default. It’s actually a bit easier to setup elements in Flux when they are set to inline so the Flux website recommends that you first set up an element the way you want it in the manner that we have above, then convert the styles into something that will appear in the external stylesheet.

Fear not, this is a quick and pain-free process. Select the object you want to convert, right-click on it and select the “Create Style with…” option. This will bring up the following dialog that will allow you to assign an ID or Class to the object.

Doing this will create a little icon on the left with the ID we just applied. This area is basically an outline of our CSS file. Now when you want to change the properties of that container, you’ll double click on the icon here to launch the inspector.

Step 3: The Header

The steps we just learned lay out the workflow for creating all the content on our page. To add the name of the company to our header, we create another Quick Div, but this time double click inside of it to type inside of it (this essentially creates a “p” tag). Once you type out what you want, you can style the text however you like. As you can see below, I’ve added settings for color, font-family, text-transform, text-align and font-size.

Next, do the same thing for the text below the headline.

That should give you a nice typographical header for your page. Remember to convert both of these elements to external styles just like we did before.

Step 4: The Image

Now we’re ready to throw in our big image. I’ll use a photo that I shot myself but you can anything you like.

To begin, select the container and create a div that’s 700px wide and as tall as you need it. Then set the background of the div to your image and the background to no-repeat. With the image div selected, you can use the arrow keys to shuffle it up or down to move it into position, after all this is a WYSIWYG!

Step 5: Finishing Off The Text

At this point the tutorial would be quite redundant if we went into too much detail. There’s really not much left to do beyond creating a few more divs, filling them with text and styling them like we did above. I stayed with the Georgia font theme I had been using and just made my headline larger than the paragraph copy.

One thing to note is that to create a link, you simply select an element or block of text and go to Edit>QuickLink. With that, the page should be all finished!

What About The Code?

If we want to look at and edit the code at any point, just hit Command-3 to bring up the code viewer.

Flux spits out nice clean code that fully integrates with the development process. You can do as much or as little as you want with the WYSIWYG interface and do the rest by hand. Since Flux uses only plain old HTML and CSS files, you can even work on the site in your favorite code editor as you build in Flux. The workflow is completely open so that if at any point you just want to do something the way you always have, you’re free to do so!

What Else Does Flux Do?

This tutorial hasn’t scratched the surface of what Flux can do. Here’s a few other features to get excited about:

• Built-in layout modules for fast prototyping
• Live Browser View
• JavaScript, PHP, and all that jazz
• WordPress Theme Support
• Reusable Code Snippets
• History Palette
• Widget palette – Create easy galleries and jQuery effects
• HTML5 Support
• Google Font API Support
• Tons more that I don’t even know about yet!

Closing Thoughts

I first used Flux a couple of versions ago (Flux is now in its third iteration), and loved the idea but wasn’t crazy about the execution. It felt a little buggy (all that is fixed now) and really didn’t seem that easy to just pick up and run with.

However, that encounter was quite brief and I’ve always wanted to go back and really give it a proper run through. I’ve played with Flux for the past two days and have to say that, once I took the time to figure out the proper workflow, working with Flux was a dream. It definitely takes a little while to figure out all the quirks but once you do they don’t eat up any time at all and feel quite natural.

At the very least, Flux is awesome for prototyping. Fans of designing in the browser instead of Photoshop will see most of their concerns addressed here as you are forced to design using actual CSS properties and positioning rather than Photoshop effects. My favorite part about the app is that it doesn’t corner you into using it through the whole process. There aren’t any Flux project files to worry about, only the files you would normally use to build a site. This means you can switch to a different app or even pass the project off to a colleague or client who neither needs Flux or need ever know you used it.

If you’re a developer who codes by hand that often dreams of a WYSIWYG that doesn’t suck and can actually plug into the way you currently work, I highly recommend that you give Flux a shot. It can be a little frustrating at first, but take the time to push through that and figure out how to really use the app properly and I’ll wager that you might just think it’s the best WYSIWYG you’ve ever used.

This post will briefly point you to 27 great utilities that not only help you store your favorite snippets both locally and in the cloud, but also make sharing with others a breeze. Enjoy!

Full-Scale Storing and Sharing

The sites below are a great way to build a personal code repository that you can access from anywhere and easily share with others. They’re also great sites to find helpful snippets in a number of languages.

I haven’t used them all in-depth but my preferred site is Snipplr. I really like the interface, the huge library of snippets, the versioning options, etc. They’re definitely all worth checking out though.

Snipplr

“With Snipplr you can keep all of your frequently used code snippets in one place that’s accessible from any computer. You can share your code with other visitors and use what they post, too. Did we mention that Snipplr works with TextMate? Yeah, we rock.”

CodeSnippets

“Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world (or not, you can keep them private!)”

Home | byteMyCode

“byteMyCode is a project designed to make the task of sharing source code easier. We have modeled a community around making it easy to find, share, revise, comment on, and rate code snippets.”

SnippetsMania

“Organize and share your code snippets. Snippetsmania is a free accessible collection of code snippets. It currently supports 34 different programming languages. The database holds a total count of 99 code and programming snippets and examples.”

codesnipp.it

“codesnipp.it is a social site for developers to post their snippets, follow and share code with other devs and get coding help. ”

Paste and Share Quickly

The apps below are similar to those we just looked at but place much more emphasis on fast code sharing as opposed to organized code storage. Most just require a copy and paste and you’re ready to go!

Snipt.org

Share source code on Twitter and the Web.

New – Pastie

“Clean user interface with sensible defaults. Need to nickname, describe, set tab settings and more? You’ll have to look elsewhere. One text box, paste, done. Simple.”

Smipple – Social Code Snippets

“Smipple is a social service for saving, storing, organizing, and sharing snippets of code with your friends and coworkers. Make friends. Improve your coding skills. Earn bragging rights.”

Gist – GitHub

“Gist is a simple way to share snippets and pastes with others. All gists are git repositories, so they are automatically versioned, forkable and usable as a git repository.”

Copy Paste Code

“Copy Paste Code allows you to publish your code with colored syntax for most popular programming languages out there. After publishing you can share your code to colleagues and friends, and they can debug and use your code snippets.”

CodeTidy

A quick and easy, no-frills code sharing utility.

Ideone

“Ideone is something more than a pastebin; it’s an online compiler and debugging tool which allows
to compile and run code online in more than 40 programming languages.”

Pastebin

One of the most popular tools of this kind, Pastebin supports a huge list of languages.

Mystic Paste

PasteSite.Com – Easy Usable Pastebin

“PasteSite.Com is a tool which allows you to submit a sample of code which can then be viewed with syntax highlighting from the website.”

Slexy 2.0

“Slexy.org is a powerful, slick, and sexy pastebin designed with the user in mind. Use Slexy.org to paste errors for debugging, show off your code or your tech specs, or share anything else with other Internet users worldwide.”

Mac Applications

In my search for online snippet sharing tools I came across a number of Mac applications that are great for building code libraries so I figured I’d toss them in as well. Check out jCodeCollector and Snippely first if you’re looking for a solid free option.

Snippet: $12.95

“Easily create Snippets from selected text anywhere.”

Snippets: $39.95

“Snippets is a powerful application for Mac OS X that stores the most valuable pieces of code you can reuse in different projects many times.”

Snippely: Free

“Snippely is a basic text and code organizational tool. Instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize “snippets” in one convenient location. A snippet is a collection of one or more pieces of code and notes. Snippets are stored in groups for organization and quick retrieval.”

jCodeCollector: Free

“jCodeCollector is an application that helps you to manage your code snippets. Using jCodeCollector you can: store, tag and comment your snippets, find quickly the code you need.”

Code Collector Pro: €20

“When you spend all day writing code, it is only natural to start having feelings of déjà vu. Didn’t you write that same few lines of code a few days ago, and again a few days before that? Why are you wasting time re-writing that code again and again? Code Collector Pro is the answer, giving you the ability to store snippets of code and retrieve them with a few keystrokes”

MySnippets: $14.95

“All of your snippets, the files you need, drafts, parts of a text, CSS templates and anything else you still need in order to deliver outstanding results: All of that is now just one single click, one single keystroke away. ”

Droplr: Free

Unlike the apps above, Droplr is not the ideal place to store code snippets. However, among other things, it is a super easy way to share snippets of code. Just select some text and drag it to your menu bar. A URL will automatically be placed in your clipboard for you to paste in anywhere you want.

Text Expanders

One special breed of snippet applications is those that allow you to type a few characters which then automatically expand into a larger chunk of text. I’ve recently started using TextEpander and it has completely revolutionized the way I work. Now I can’t imagine trying to code without it!

I’ve searched for hours in vain in an attempt to find a free text expanding utility, leave a comment if you know of one.

TextExpander: $34.95 (Mac)

“TextExpander saves you countless keystrokes with customized abbreviations for your frequently-used text strings and images.”

Typinator: €19.99 (Mac)

“Typinator boosts your productivity and eliminates errors by automating the process of inserting frequently used text and graphics and auto-correcting typing errors.”

FastFox: $34.99 (Windows & Mac)

“FastFox is an easy to use text expander that can create and store keyboard shortcuts that expand to an entire phrase, paragraph or document.”

SnippetMonkey

“Snippet Monkey saves you countless hours monkeying around by allowing you to create shortcuts for phrases you frequently type. We call the phrases snippets and Snippet Monkey allows you to create new snippets from the clipboard or via our easy to use snippet editor.”

What Are Your Favorites?

There are a lot of utilities here to choose from and I would love to hear your feedback on those that you’ve tried. For my own purposes I use TextExpander to quickly insert code, Snipplr to store random bits long-term, and Droplr to quickly share snippets. What combination will fits your workflow best?

Today we’ll take a look at Boks, an awesome little tool that will help you spec out a basic site layout in no time flat.

We’ll go through what it is and how you can use it to speed up your development as well as what the limitations and downsides are that you’ll want to be aware of before you download the app.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Introduction

Grid systems are an interesting beast: you either love ‘em or hate ‘em. Personally, I can see both sides of the argument but in the end I don’t have too much against them granted that you customize them to your own purposes rather than leaving tons of untouched and/or non-semnatic code.

The real problem with grid systems is how complex they tend to be. I just finished up a tutorial over at Six Revisions on using the 960 Grid System and the comments seemed to be unanimous in that most people just needed someone to explain how to use the system in plain, easy to understand terms. If you find yourself confused by grid systems, be sure to check out that article.

As a follow up, I wanted to show you how to use a GUI to create to create really complex CSS and HTML code structures, based on the Blueprint CSS Framework, incredibly quickly. We’ll do this with an AIR application called Boks.

Blueprint

Just to brief you, Blueprint is a free framework with tons of great features. These include:

• A CSS reset that eliminates the discrepancies across browsers.
• A solid grid that can support the most complex of layouts.
• Typography based on expert principles that predate the web.
• Form styles for great looking user interfaces.
• Print styles for making any webpage ready for paper.
• Plugins for buttons, tabs and sprites.
• Tools, editors, and templates for every step in your workflow.

For my own use, Blueprint is a little too massive, which we’ll see later. However, tons of developers use it religiously and find it to be among the best frameworks out there.

Like it or not, this it what Boks uses to create code. If the Boks developers are reading this, I’d love to see an option to use the 1KB CSS Grid instead.

What Is Boks?

Enough introduction already, what the heck is this Boks thing? I honestly can’t remember how I found it originally but it was one of those situations where you download something, throw it into your applications folder and forget that it exists. I was recently purging my hard drive of such nonsense when I opened Boks for the first time and thought “Hey this is really neat!”

As I said before, Boks is an AIR application so it should function just fine using either Mac or PC.

What Boks does is provide an innovative visual way to create the basic structural markup for your site. I’ll stop right there to tell any WYSIWYG haters that I’m with you. If coding a site from scratch is like approaching an empty canvas, WYSISYGs always feel to me a bit like Paint By Number.

What I mean by this is that they’re generally far too structured and add all kinds of unnecessary confinement and complication. Boks is not one of these applications. In fact, it’s not even something that you would use to build an entire site. It merely helps you create the skeleton that you build your site upon.

Getting Started

After you grab the free download, open up Boks and you should see the interface shown below.

This is where you will visually lay out your website’s structure. Doing this will be as easy as clicking and dragging where you want your columns to go. However, before you do anything else, click on the “Grid Settings” button. Here you’ll find lots of customization options for how Boks will build your page.

Under the grid options seen above, you can set your page width along with the number of columns and how you want to divide up the gutters and columns. Already we see that Boks makes using a grid framework really flexible and much easier to customize than tearing apart the code piece by piece.

In the image above you can see that I’ve set everything up to essentially work like the 12 column version of the 960 Grid System. This will give me 12 columns that are each 60 pixels wide with a gutter of 20 pixels. If you don’t agree, simply enter your own preferred configuration here.

Other Settings

Moving along to the next tab in the settings window, here you can set a custom baseline for the font-size as well as spec out any header items you need.

The CSS and JavaScript tabs allow you to attach custom resources. These will be placed in their own folders or appended to the existing code.

Finally, if you change anything at all in the preferences, be sure to make it the export settings. There are a number of important things here to hit on. First, set your page title and language. Then make sure you’re using the right DOCTYPE. The default is XHTML but as you can see in the screen below, HTML5 is supported so you’ll be able to use Boks for some time to come.

I highly recommend turning off the “Compress CSS” option. It’ll be much easier to sort through and customize your code if you do this. Otherwise everything will be all smashed together. This is great for file size but incredibly annoying to try to read.

Finally, if it’s your first time using Boks, you might want to turn on the option to show the grid so you can see what’s going on. Obviously, when you start using this to create real sites, you’ll want to turn that option off.

Creating the Page Layout

Now that we’ve got all our settings squared away, it’s time to create the layout. To do this, simply click and drag on the grid preview to create a div.

A rectangle will appear that automatically snaps to the grid structure you’ve created. You can create as many divs as you like by clicking and dragging to add more. To reposition a div, click on it once and use the arrow keys. Hold shift while using the arrow keys to resize a div.

Adding Markup

Boks contains plenty of features that allows you to really customize your layout just like you would if you were manually coding. You can ame the div, add a border, and preview and add any CSS classes.

If you want to go that far, you can even start piling HTML content into a div. As you can see below, you simply type it in like you would in a code editor.

Don’t know what you want to stuff the layout with at this point? No problem, you can either leave it blank or use Bok’s built-in Lorem Ipsum generator to conger up some dummy text.

Go Nuts

As you can see in the image below, Boks allows you to create layouts that are as complex as you need them to be. The layout below has a navigation area, a sidebar, a content area and a footer. The content area has multiple other divs nested inside and split up into separate columns.

This literally took about thirty seconds and can therefore save you tons of upfront coding time in the initial phase of site construction.

No Height?

As I said before, Boks isn’t meant to create entire websites. The horizontal bars you see in the images above represent only the resulting width and hierarchy of the created divs. The height of each will expand dynamically as you add content, but any specific heights must be dealt with when you actually progress to coding the site.

Exporting

When you’re all finished dividing up your layout, hit the export button and choose a location for the files. The result will be an HTML file along with the CSS, JavaScript and other resources you opted to include.

The final product doesn’t look like much at this point, but considering it took only seconds and will solve many of your CSS layout headaches, that’s no small feat!

The Downside

The unfortunate part is of course the huge CSS file that results. If you’re used to using Blueprint, this won’t bother you in the least but it might drive everyone else nuts.

As I said before, it would be great to see a 1KB implementation of Boks that stripped out all this extra code. In the mean time, the CSS file is really clear and contains lots of comments. This makes it easy to go in and quickly delete any code that you don’t need.

If you’d like to continually use Boks to create your layouts but don’t want all this extra CSS, I recommend taking a few minutes to create your own custom CSS file that you can reuse again and again. To do this, simply look at the default CSS file and eliminate anything that doesn’t affect the grid layout. This includes text styles, field styles, reset code, etc. After doing this once, you can always drop this in as a replacement for the CSS file created by Boks.

In fact, if you’re clever enough, you might be able to right-click on the application and go to “Show Package Contents” to poke around at the default files used here and customize them to your liking (Mac only).

Conclusion

Boks is a neat little tool that helps you create the basic markup for your site utilizing a fully customizable version of the Blueprint framework’s column system. It is not meant to create full websites but rather save you time on the front end of your project that is taken up by creating various divs and applying the appropriate classes.

Unfortunately, since you’re pretty much stuck with using the Blueprint framework, Boks isn’t for everyone. Leave a comment below and let us know what you think of Blueprint and whether or not you’ll be using Boks on your next project.

Today we’re going to look at a new project from the Enavu Network called 52 Framework.

It claims to be the first framework built specifically for HTML5 and CSS3. Below we’ll look at some of the basic features and dig into the code to see what we can find.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Regarding Frameworks

Frameworks are an interesting topic. Some developers absolutely swear by them and even go so far as to say that no web page should ever be started without one, other developers see them as unnecessary complications that add a lot of superfluous weight to what would otherwise be fairly simple code.

I’m personally somewhere in between. I definitely agree that many frameworks, if unaltered, contain a lot of fluff that could be trashed. However, I also find them to be quite useful and timesaving.

The key is customization. Every framework you’ll find online was created by someone with a different workflow than your own and even a different way of thinking about websites and their structure. This is one of the primary reasons frameworks are so loaded: so they can cater to everyone’s needs. Every little file and piece of code included in the download is not meant for every person, it all merely serves as a starting point for your own personal framework.

When you borrow someone else’s car, you don’t just hop in and drive. You adjust the driver’s seat and the mirrors to fit your specifications. In the same way, don’t expect to just grab a pre-fab framework and run with it. Step one should be to go through and filter out anything you’ll never need. Step two should be to add in missing elements that you’ll always need. And step three should be to tweak the things that you want but need to alter slightly for your own use.

As we tear in to the framework below, think about each part and how you would customize it to fit your own specific needs.

The 52 Framework

The 52 Framework is a new, and very much under construction, framework built specifically for utilizing HTML5 and CSS3 in a cross-browser, standards-compliant manner.

Too Soon?

HTML5 and CSS3 are still new technologies, isn’t it a little too soon to start creating frameworks for them? Absolutely not. Support for both of these new standards is increasing rapidly and being fueled by a huge number of developers that simply couldn’t wait to implement them.

Whether or not it’s time to start using HTML5 and CSS3 is another debate entirely, the idea here is that it’s the perfect time to begin building systems to facilitate their use in the near future. There will never be a time when web standards cease evolving and therefore create the perfect climate for creating frameworks. Instead of falling behind, tools like these should keep up with new technology and evolve with them. That way as developers decide that it is in fact time to begin implementing HTML5 and CSS3, the tools will already be in place for them to do so.

The Download

As you can see, the framework is quite small in file size, even with the included PSDs, which can obviously be removed on a per site basis.

The download consists of three CSS files, two HTML files, one JS file, a JPG and two PSDs. We’ll take a look at the role each of these plays in the explanation below.

The Demo File

Once you download the framework, open up index.html. This is the heart of the entire framework and what I want to spend most of our time discussing.

As you can see, the framework helps you out by setting up a number of the most common elements. Your header tags (h1, h2 and h3) are styled along with basic page typography, form elements are ready to go and have a bonus custom button design, there’s a method in place for displaying code, and even a bunch of additional styles in place for different elements like strong, bold, italic, inserted text, big text, etc.

The Code

To get a much better look at what’s in the demo file, peer under the hood to see the code. We’ll analyze this piece by piece below.

DOCTYPE

The first thing you’ll see in the .html file is the new, beautifully simple HTML5 DocType.

<!DOCTYPE html>

This is a must-have statement that tells browsers how to interpret your code. It’s nice and succinct and I greatly prefer it to previous, more complicated versions.

JavaScript

The next notable thing you’ll see is a link to an external JavaScript file.

<script src="html5.js"></script>

Don’t worry, you don’t need to understand a single line of JavaScript to use this framework. The included JS simply uses a couple of lines of code to create support for new elements in older browsers. It’s a neat trick that allows you to use a lot of the goodness of HTML5 without worrying about who you’re leaving behind.

Semantics

The next thing you should notice about this document is how the HTML is constructed. It uses the new semantic markup that you should already be learning to follow. Here’s an extremely simplified, stripped down version of the structure.

<body>
 
	<header>
		<nav>
		</nav> 
	</header>      
 
	<aside>
		<form>
		</form>
	</aside>
 
	<section>
		<article>
		</article>  
 
		<article> 
 
			<code>
			</code>
 
			<article>
			</article>
 
		</article>
 
	</section>
 
	<footer>
	</footer>
 
</body>

As you can see, a number of new HTML5 elements are being used here. The page is divided into header, nav, aside, section, article, code and footer areas. Using the framework, these elements will provide the basic structure for everything you create. Notice that a lot of the pieces that you would normally create divs for have native support in HTML5.

Using the 52 Framework will force you to create your pages using these new elements and is therefore a great way to jump into HTML5 when the time comes.

Reset and Grid System

There are three CSS files included in the framework: general, grid and reset. The reset file is pretty basic and is essentially a modified version of the popular Eric Meyer CSS reset. This version was created by Richard Clark.

The grid CSS is there because, like any good framework, this one uses grids heavily.

There’s definitely nothing groundbreaking here, it’s basically a 16 column 960 grid system exactly like you’re used to using in other frameworks. The available columns vary in width from 40px all the way up to 940px and each contain a left and right margin of 10px.

.col_1 {width:40px;}
.col_2 {width:100px;}
.col_3 {width:160px;}
.col_4 {width:220px;}
.col_5 {width:280px;}
.col_6 {width:340px;}
.col_7 {width:400px;}
.col_8 {width:460px;}
.col_9 {width:520px;}
.col_10 {width:580px;}
.col_11 {width:640px;}
.col_12 {width:700px;}
.col_13 {width:760px;}
.col_14 {width:820px;}
.col_15 {width:880px;}
.col_16 {width:940px;}

General CSS

The primary CSS contains a number of helpful styles to get you started. Everything in the HTML mentioned above has specific styles in place along with a number of other basic items like float clearing classes and block quotes.

One neat feature here is that you can set the selection color of a web page to override the browser default. This means that when you select a line of text, the highlight will be the color that you define.

::selection {
	background: #525252; /* Safari */
	}
::-moz-selection {
	background: #525252; /* Firefox */
	color:#fff;
}

In the fieldset styles you’ll find some styles for creating those ever popular CSS3 rounded corners.

{ -moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

Finally, in the embedded CSS contained in the HTML file, you’ll see some more CSS3 being applied to create shadows.

header .logo {
font-size:2.5em; 
height:52px;
padding-top:28px;
font-weight:700;
text-shadow:1px 1px 2px #000;
color:#fff;
filter: Shadow(Color=#666666, Direction=135, Strength=3);}

More to Come

As I said above, the 52 Framework is definitely still in the early stages and will continue to grow and improve. For instance, the newest beta release has added support for canvas and video elements.

I’d like to see the CSS for rounded corners and shadows pulled out of specific elements into general classes or more noticeable sample elements so you don’t have to go hunting for them in the code if you want to use them as a starter for your own styles.

Other than that, I think the framework is off to a strong start and I can really see myself building on it to create something that’s perfect for my own use.

What Would You Change?

Leave a comment below and tell us what you think of the 52 Framework. What do you like about it? What do you hate? The developers are looking for suggestions for features to add so be sure to list any that come to mind!