ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web

What are Zen Coding and CSS Grids? Improved Workflow and Quality!

Updated on May 21, 2014

Learn how to build HTML structures through abbreviations. Need visual harmony in your design? Read about these tools I find invaluable.

by Y. Mladenov a.k.a. ItKnol

Source

Table of Contents

  1. Introduction
  2. What's This Hub All About?
  3. Rapid HTML Development With Zen Coding
  4. How Zen Coding Works?
  5. Let's See Some Examples!
  6. Basic Implementation
  7. Advanced Implementation
  8. Download Zen Coding For Free!
  9. CSS Grid Frameworks
  10. Interesting fact is that...
  11. Calling your files
  12. My Personal Top 3 For CSS Grid Frameworks
  13. Helper classes
  14. Note on grid types and implementation
  15. Conclusion
  16. Dear, Reader,

Introduction

This article is intended for experienced front-end web developers as the tools in it can cripple the proper understanding of HTML, CSS, semantics and web standards overall to newbies.

Also I must note that no tool is perfect and it must be used with a certain dose of criticism. Unless created by aliens.

What's This Hub All About?

I've been a Wordpress theme developer for about 4 years now, so I thought it's about time to share some knowledge.

As anyone in the field would agree, when you create themes for a CMS (Content Management System) the development process focuses primarily on writing HTML and styling it with CSS. There is always some PHP involved but that's irrelevant right now.

So, you do know how to put up a nicely structured web page and that's great. But don't you just hate how much time you have to spend on writing down unordered lists and countless div's?

Source

Rapid HTML Development With Zen Coding

So, without further ado, I would like to introduce you the Zen Coding framework. That's an HTML framework for rapid development.

Its main 3 features are:

  • Compatibility with a number of code editors
  • Saves up to 65% of development time, as advertised
  • And, of course, it's free ;)

How Zen Coding Works?

Unlike most coding frameworks which actually are a bunch of pre-written code libraries that you call in the form of functions, snippets or embeds. Zen Coding provides you with an equation-like form for writing down any kind standards-compliant HTML structure.

Let's See Some Examples!

Your typical page layout is something like:

<html> <!-- actually, XHTML 1.0 Transitional doctype goes here-->

<head>...</head>

<body>

<div id="page">

<div id="header">

<h1 id="site-title">...</h1>

<p id="desciprtion">...</p>

<ul id="mainmenu">

<li>...</li>

</ul>

</div><!-- #header -->

<div id="content">

<ul id="sidebar">

<li>...</li>

</ul>

<div class="post">

</div>

</div><!-- #content -->

<p id="footer">Copyright 2013 MyCompany.com</p>

</div>

</body>

Basic Implementation

First we'll start-off with a simpler equation that outputs the primary containers only.

div#page>div#header+div#content+div#footer

... And at the touch of a keyboard hotkey*... Bam! The desired HTML code expands!
* default hotkey for Dreamweaver is 'tab'.

Advanced Implementation

... And for outputting more complex structures all you need is using round brackets just as in basic math.

div#page>(div#header>h1#logo+p#description+ul#mainmenu)

Press Tab again and there you have it. The #header outputs with menu, logo and slogan containers. I bet you wonder" "but where are the list items in the menu?!"

That's never been easier. All you need to do is put the ul container in its own brackets and multiply the list items by the desired count:

...#description+(ul#mainmenu>li*5>a))

Having a list of links is pretty cool, but adding an attribute to each one of them would break the magic.

That's why we'll need square brackets:

...#description+(ul#mainmenu>li*5>a[href="#mmenu-link"]))

Adding content is also a nobrainer:

p#footer>{Copyright 2013 MyCompany.com}

There is quite a lot more to cover, but this should do for a crash course. Besides PURE GENIUS it might look kind of weird as well, but trust me, you'll get used to it in now time. Especially if you are good at math, unlike me.

What I really love about this tool is that it turns HTML coding into fast and easy experience (fun, too!)... instead of a chore.

Source

CSS Grid Frameworks

Time for #2 on our list.

I would like to first say that it's optional.

I'm saying this because not entirely every project is suitable for a CSS grid framework, especially if the graphic designer, think client as well, has never heard of such thing.

However, if you are creating your own sites or the graphic designer has experience with grids then you'll love it!

Here are some BIG benefits of using a CSS grid:

  • Improves development time
  • Assures code of the structure for your site is cross-browser and standards-compliant (no more overflows, baby!)
  • No more 2 hours coding, 3 hours IE hunting
  • Visually, everything is better structured
  • Site based on a grid has improved user engagement and readability

Source

Interesting fact is that...

Grids are not a new thing. The grid method has been employed for years in desktop publishing. Ever seen a messy-looking magazine or newspaper?
Thought so.

And a brief explanation.

A grid basically separates your page into columns. Each column has a pre-set width and margins. For example on of the grids I am recommending at the end of this hub (Resources section) is the 960 grid system. It's for 950 pix wide web page with 5px margins to the left and right-hand sides. All columns inside are 30 px wide with 5 pix gutter (margins). The grid I'm using has 24 columns.

Calling your files

So, once you've chosen your grid you'll need to call its reset file(s) the actual grid CSS file in your header file/section.

Just to make things crystal-clear, include them in the following order:

  1. Reset.css
  2. Grid.css
  3. Style.css

Now the next thing left to do is assign classes to the HTML structure you just created for about 10 minutes with Zen Coding.

The process is quite straight-forward, but just to be sure, here's an example:

<div id="page" class="container_24"></div>

<!-- here your primary page container initializes the grid layout itself -->

<div id="content" class="grid_23"></div>

<!-- and here you define the properties for one of your div's... 23 columns width. Simple :) -->


Helper classes

There are various pre-written classes that allow you to hide an element, float an element, remove margins, paddings and so on.

Once again make sure to check the Resources section at the end of this article for links to 3 recommended by me grids and comments on them.

Note on grid types and implementation

There are also versions available for download with fewer columns. However, I recommend those only for simple layouts and pages that are more marketing (think Call-To-Action) oriented.

Using grid that is inappropriate for your project will make you feel restrained by either inappropriate number of columns or number of margins to handle. So, as a rule of thumb, get to know your task and choose your weapons later ;)

Conclusion

Now that we reviewed those two great tools you know how to:

  1. Create HTML structure in an efficient manner
  2. Align all containers and style them with ease in a rock-solid grid layout

Now all left to do is create a test project on your Local and play around to study them. Have fun!


Dear, Reader,

before reading this hub where you using tools for rapid development?

See results

By the way...

...in case you have a Twitter account you can find daily posts and retweets on IT, UX, front-end development, tips for startups and occasional sarcastic comments in regards to world leaders and US politics. @itknol

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.