CSS Globe | Web Standards Magazine

Easy Percentage Grid System with HTML5

Tue, 22 Mar 2011 02:04:00 PDT

Web grid systems help front end coders to layout a document faster. In this article I am presenting a percentage based grid system that is included in the Easy framework's CSS.

The main characteristics of this grid system is that all the columns have percentage based width so they adapt to the container element. It means that with using this system you will not have to define a width of each column by hand, you can simply throw it inside any container and the column widths and column gutters will be automatically set.

This system supports up to 6 equal width columns, so you can choose anywhere from 2 to 6 columns in the set. In each column set you can have double, triple, quadruple or even quintuple columns. The column gutters are set to 2 percent for each column set, so in case you have different column sets in one container you will have equal column gutters.

Naming the columns and column containers

Grid system often compromise the semantics. Unfortunately that is something we have to live with if we want to use this kind of approach.
Important thing about Easy Percentage Grid System is that column containers must have the base class name cols (as in columns - plural) while each column must have a class name col (column - singular). By using this base classes alone the grid system can properly display two equal columns. So this code

<div class="cols">
    <div class="col first"></div>
    <div class="col"></div>
</div>

can be used for creating 2 equal columns. Note the class name first. I am using it (along with :first-child pseudo selector) to erase the left margin for the first column.

If you want to create more than 2 column set you need to add a class name colsX to the container where X represents the number of columns in the set. Here's a sample:

<div class="cols cols4">
    <div class="col first"></div>
    <div class="col"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

If you need to include a column with multiple width (double or triple width column) you can add a class name colX where X is the number that defines how wide the column is. Again note the singular here! Here's an example of 5 columns set where second column is double the width of the default ones.

<div class="cols cols5">
    <div class="col first"></div>
    <div class="col col2"></div>
    <div class="col"></div>
    <div class="col"></div>
</div>

Demos

Take a look at the demos to see how it all looks like.

So, to recap, Easy Percentage Grid System features:

place inside any fluid or fixed width container, without having to worry about each column width
supports up to 6 equal columns
supports multiple width columns (double width, triple width etc.)
column gutters have the same width for each column set
basic, solid CSS styling for HTML elements included

Download the Easy Percentage Grid System

Edit: Column Padding

It is possible to add side paddings to columns expressed in percentages too. The principle would be, add padding you desire to the "global" column definition (let's say we want 1% side padding):

.col, .col2, .col3, .col4, .col5{
    float:left;
    display:inline;	
    margin-left:2%;
    padding:0 1%;
    background:#f1f1f1; /* only for demo purposes - remove this line */
    }

What we need to do is decrease the width of each column by double that percentage. Left padding 1% and right padding 1% makes 2% decrease in column width. So instead of 49% width for default column, it will now be 47%. You need to manually adjust the width for each column, but it's not that big edit. I prepared a 1% side padding demo for you.

Take a look at the fixed width container demo with 1% side padding

Easy Paginate - jQuery plugin for pagination

Wed, 09 Mar 2011 02:16:00 PST

Today I am presenting a simple jQuery plugin I made. This plugin allows you to browse easily through the list of items with pagination controls. It is very easy to implement and very lightweight so it might come in handy to use in your own projects. It's main purpose is to view certain number of list items at once, but it can also be set up to view one item by one.

Simple demo Styled demo Auto pagination Download the plugin

How does it work?

The plugin takes a list of items, calculates a number of child elements of a certain object, divides it by step parameter (which can be easily adjusted) and generates "control buttons". Controls are inserted immediately after the selected object in a form of ordered list.

For target object I recommend using unordered list, although plugin will work with any other type of element that contains any type of child elements. If you want to have it set up that way, child elements can be of a different type!

To apply this plugin you will of course need to link to jQuery library and the plugin js file:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  <script type="text/javascript" src="js/easypaginate.js"></script>

You will need to initiate the plugin:

<script type="text/javascript">
  
  jQuery(function($){ 
  $('ul#items').easyPaginate();
  }); 
  
</script>

This is the source code for the target object I am using in my example:

<ul id="items">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
  <li>Page 5</li>
  <li>Page 6</li>
  <li>Page 7</li>
  <li>Page 8</li>
  <li>Page 9</li>
  <li>Page 10</li>
  <li>Page 11</li>
  <li>Page 12</li>
  <li>Page 13</li>
  <li>Page 14</li>
</ul>

This is the generated source code for control buttons (inserted immediately after the target element):

<ol id="pagination">
  <li class="prev">Previous</li>
  <li class="current" data-index="1">1</li>
  <li data-index="2">2</li>
  <li data-index="3">3</li>
  <li data-index="4">4</li>
  <li class="next">Next</li>
</ol>

Options

There are several options you can modify. First and most important is the step parameter. Step parameter defines how many child items will be visible at a time. It is also used in calculating of number of pages. By default this parameter is set to 4. To use your own step value, change the step parameter:

jQuery(function($){
  
  $('ul#items').easyPaginate({
  step:3
  });
  
});

Here's the full list of available options:

step

Default value: 4
Defines a number of items visible on each "page".

delay

Default value: 100
Items on each "page" fade in one by one. This parameter controls the pause between each item's appearance so we can create "wave" effect. It is defined in milliseconds.

numeric

Default value: true
Boolean. If set to true then the numeric pagination buttons will show.

nextprev

Default value: true
Boolean. If set to true then the next and previous pagination buttons will show.

auto

Default value: false
Boolean. If set to true then the plugin will automatically rotate the "pages"

pause

Default value: 4000
If set to auto pagination, this parameter controls the length of the pause in milliseconds between each "page turn".

clickstop

Default value: true
If set to auto pagination, this parameter controls whether the pages will continue to automatically rotate. If you want to continue the rotation set this parameter to false.

controls

Default value: 'pagination'
As mentioned, the plugin generates an ordered list for the purpose of navigating through "pages". This parameter defines the list's ID.

current

Default value: 'current'
This parameter defines a class name of a current "page" in the numeric navigation. It is used for styling purposes.

If you want to create multiple paginations on the same page, have in mind that this plugin uses IDs to target control buttons so you need to define control id parameter for each pagination.

Enjoy! ;)

jQuery plugin: Easy Image Zoom

Mon, 21 Feb 2011 02:29:00 PST

I have been working on a little script for a client of mine, that required product image magnification. The task was to create a script that will allow users to see large details of the product while moving cursor over medium sized image. During the process I decided to create a jQuery plugin and share it with you guys!

Just as with all my script I try to keep things as lightweight as possible, and most important, as customizable as possible. I hope you'll find this very easy to apply to your own websites.

Take a look at the demo or Download the plugin

Introduction

First I suggest you check out the demo to see what the plugin is all about. Then come back here and continue reading this article :)

Markup

I usually start this section of my articles with the same sentence: "the markup couldn't be simpler" :) The main idea behind this and other plugins I write is - keeping the markup as simple as possible. No unnecessary elements and bloated HTML. Also markup (for all of my plugins) makes content accessible even with JavaScript turned off, which is important.

All you need for this plugin to work is anchor element containing the small image linking to the large image, but this structure is required:

<a href="large.jpg"><img src="small.jpg" alt="Small image" /></a>

The script (and CSS) takes care fo the rest.

Options

This plugin is customizable with several options and simple CSS definitions. In terms of CSS all you need to do is define the newly created image zoom element's size, position and appearance. In my demo I am using this definition:

#easy_zoom{
	width:600px;
	height:400px;	
	border:5px solid #eee;
	background:#fff;
	color:#333;
	position:absolute;
	top:15px;
	left:400px;
	overflow:hidden;
	-moz-box-shadow:0 0 10px #555;
	-webkit-box-shadow:0 0 10px #555;
	box-shadow:0 0 10px #555;
	/* vertical and horizontal alignment used for preloader text */
	line-height:400px;
	text-align:center;
	}

You will notice the line-height property... I am using if for vertical alignment of the message text that is displayed while the detailed image is loading. Of course you can use your own positioning methods, your own text, insert extra markup if you want to and add your own CSS to style the preloader. Perhaps some preloader gif as a preloader image? I'll leave that to you, what I am showing here is a bare-bone example that you can easily customize.

Let's take a look at the plugin options. Here is a list of them with default values and descriptions:

id

Default value: "easy_zoom"
The ID of the newly created image zoom element. Of course you can use your own, but make sure you update the CSS accordingly.

parent

Default value: "body"
This defines the DOM element where newly created image zoom element will be inserted. You can insert it anywhere you like in the DOM by editing this option.

append

Default value: "true"
If set to true (by default) the newly created element will be inserted as a last child of the parent element. If this option is set to false then the newly created element will be inserted as a first child of the parent element.

preload

Default value: "Loading..."
A message that appears before the large image is loaded. You can use this option to write your own preload messages and insert any HTML you want. If you want to use the preloader gifs, I suggest you go with background images.

error

Default value: "There has been a problem with loading the image."
In case the large image is not found or can't be loaded, this error message will appear. You can use this option for custom error messages.

Here's a sample code for using some custom options:

jQuery(function($){
	
	$('a.zoom').easyZoom({
		id: 'imagezoom',
		preload: '<p class="preloader">Loading the image</p>'
		parent: '#container'
	});

});

In one of the next articles here on CSS Globe I will offer a one page portfolio template that uses this image preview, so stay tuned!

The Anatomy of a Perfect Login Page

Wed, 16 Feb 2011 01:07:00 PST

In this article I am going to analyze what a perfect login page or login form should have. Also you are able to download the pure CSS3 login form for free.

Login forms are very simple in terms of the required elements. When it comes to forms, it doesn't get simpler than that. But some of the elements that could be valuable to your users (or potential members) are often neglected.

Let's take a look at what I think are necessary elements.

Take a look at the login page or Download the demo

1. The title

I believe that each form should have a prominent title that briefly explains what the form is about. If you use login page, like in my example, it is important to mention the name of your website here, so the accidental visitors know where they are.

2. Non members

Non-member visitors may stumble upon your login page one way or another. Why not think of them and offer them a direct link to the registration page. It will save them some time and you increase your chance of more new member signing up.

3. Input fields and labels

Although login forms usually contain two input fields, it is important that they're styled nicely so the labels are readable, and there is no. One thing that I often notice on the various websites is the lack of clickable labels. You should use FOR attribute on labels "connect" them with appropriate input field. It is such a small effort when coding and it can make a huge difference in terms if usability.

4. Forgot password link

This is also very important link. Many users have numerous accounts and passwords and they often can't remember which one they used on your site. The best placement for this link is near the password field itself.

5. Submit button

This should, of course, be the most prominent thing in the form. For best results (by results I mean best user experience) it should always look like a button.

6. Remember me

Very useful feature that your returning users will appreciate. If your application supports it, include this option and your members will be thankful.
One thing that I believe that is very important is wrapping the checkbox and the text inside the same label. Checkboxes are small and therefor hard to click on. If you wrap entire text inside the label, you enlarge the clickable area and that way making the life easier for your users.

7. Back link

If you have full login pages, then you MUST allow users to change their mind about logging in and provide a link back to your home page.

Validation

Although the form shouldn't rely on JavaScript validation alone, I believe that JavaScript based validation scripts are important. They provide instant filtering of the valid data, allowing users to immediately correct their info and also making sure that the valid data is sent to the server-side.

Demo

I have prepared a demo page for you to download (for free). The login page is contains a pure CSS3 styled form and a simple validation script, ideal for learning purposes. Hope you'll enjoy it!

Drawing Calendar Icon With CSS3

Mon, 07 Feb 2011 07:48:00 PST

In this article I am going to use some of the CSS tricks to create a calendar icon you can use for your blog posts or something similar. It is important to notify that there are no images used here and the markup couldn't be simpler than it is.

The final result looks like the image below.

Take a look at the demo

HTML

As mentioned the HTML I am using for making this calendar icon to work is very simple:

<p class="calendar">7 <em>February</em></p>

We have a wrapping paragraph, although you may go with the DIV (or HTML5's new element - TIME). Inside the wrapping element you need one extra element that contains a month's name.

The principle

Now, I have 2 elements to work with, plus I will create 2 pseudo element for each of the real elements which will give me total of 6 elements I can use to draw shapes and position them properly. Pseudo elements will be used for the calendar's spiral (actually those are some kind of rings, not sure what is the correct English word for it... sorry about that).

If you take a look at the image below the idea behind this will be more clear.

First we style the container element. You will notice that I used box-shadow, border-radius and CSS gradients. Not all browsers will render all of these properties, but at least it will degrade nicely.
Note that the fixed height is not defined, you control the overall height with line-height properties in both container and nested em element.

.calendar{
	margin:.25em 10px 10px 0;
	padding-top:5px;
	float:left;
	width:80px;
	background:#ededef;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
	background: -moz-linear-gradient(top,  #ededef,  #ccc); 
	font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#000;
	text-shadow:#fff 0 1px 0;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	position:relative;
	-moz-box-shadow:0 2px 2px #888;
	-webkit-box-shadow:0 2px 2px #888;
	box-shadow:0 2px 2px #888;
	}

Em element is also styled, it contains the month's name.

.calendar em{
	display:block;
	font:normal bold 11px/30px Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:#00365a 0 -1px 0;	
	background:#04599a;
	background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); 
	background:-moz-linear-gradient(top,  #04599a,  #00365a); 
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;	
	border-bottom-right-radius:3px;
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;	
	border-bottom-left-radius:3px;	
	border-top:1px solid #00365a;
	}

Now I am styling the pseudo elements. Container's pseudo elements (:before and :after) are used to create thos circles, "holes in te paper".

.calendar:before, .calendar:after{
	content:'';
	float:left;
	position:absolute;
	top:5px;	
	width:8px;
	height:8px;
	background:#111;
	z-index:1;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:0 1px 1px #fff;
	-webkit-box-shadow:0 1px 1px #fff;
	box-shadow:0 1px 1px #fff;
	}
.calendar:before{left:11px;}	
.calendar:after{right:11px;}

...and em's pseudo elements are used to create the rings:

.calendar em:before, .calendar em:after{
	content:'';
	float:left;
	position:absolute;
	top:-5px;	
	width:4px;
	height:14px;
	background:#dadada;
	background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
	background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
	z-index:2;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	}
.calendar em:before{left:13px;}	
.calendar em:after{right:13px;}

There are 2 demos you can check out:

It is important to say that if you're going to customize the width there will be some tweaking needed, mainly for the placement of the pseudo elements.

That is it! Enjoy! :)