ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)