Monday, September 10, 2012

Powerful and useful CSS Framework with examples and tutorials

the powerful CSS Frameworks will help you to design adaptive Responsive Web Design , these tutorial and examples will guide you to design your site fullt optimized for desktop , tablet , mobile and print
In today’s post we present an overview of the 5 most popular CSS Frameworks;showcasing handpicked tutorials for using each of them among other useful tools and resources you will definitely find useful and time-saving.
5 Popular CSS Frameworks + Tutorials & Tools for Getting Started
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. The 960.css file itself is only 3.6 KB compressed.
Tutorials Explaining how to use 960 CSS Framework
  • A Detailed Look at the 960 CSS Framework
    Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
    “Jeffrey Way” takes a close look at the 960 CSS Framework, explaing the pros and cons of using it. He also takes us step by by step and create a simple “12 column” layout with a simple header and two column structure. Most important tip here is : you must assign a class to each div. Naming conventions require that that the class name begins with “grid_” and ends with the number of columns needed.
  • 960 CSS Framework – Learn the Basics
    Stefan Vervoort takes the heavy work for you and explains the basics of this framework so you can start developing with 960 pretty fast. Basics principles explained here include: not to edit 960.css, Loading the grid, Containers, Grids / Columns, Margins and styling. Another post by Stefan where he solves some of the problem he faced while working with this framework.
  • Fluid 960 Grid System
    Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
    The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the Mootools JavaScript library.


Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, nice-looking forms and even a stylesheet for printing. One of its main feature is performing a mass reset of browser default styles, offering a methodology to use for customizable layout grids and most important is that all elements are override-able.
There are several Blueprint plugins available which can overwrite aspects of the framework or add new styles for you to use.
Tutorials Explaining how to use Blueprint CSS Framework and tools using it
  • BlueprintCSS 101
    Jeff Croft explains Blueprint’s core feature, how we use it, how it has impacted our workflow, and what we like about it.
  • A Closer Look At the Blueprint CSS Framework
    In this tutorial we will get a look at the inner workings of Blueprint and we’ll take a look at demo application that uses Blueprint to get a better idea of how to actually use the framework.
  • Blueprint CSS Cheat Sheet
  • Blueprint Grid CSS Generator
    This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png image file for use as a background image during development- very handy for making sure everything lines up properly. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.
  • PXtoEM
    Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared is a website that makes converting PX values to EM values easier. The CSS file of the values you’ve choosen can be get based on the typography.css portion of Blueprint CSS to setup a default typography.
  • Construct
    Construct, a visual layout editor based on Blueprint & jQuery, Construct, a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML.


Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
jQuery UI includes a robust CSS Framework designed for building custom jQuery widgets. The framework includes classes that cover a wide array of common user interface needs, and can be manipulated using jQuery UI ThemeRoller. By building your UI components using the jQuery UI CSS Framework, you will be adopting shared markup conventions and allowing for ease of code integration across the plugin community at large.
Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
Yaml (Yet Another Multicolumn Layout) focused on flexible layouts and offers column and grid based design elements for flexible, elastic or fixed layouts. You will need a license to use it.
YAML comes with a a very nice Ajax builder, a handy tool for visual development of YAML-based CSS layouts which allows you to put the containers of the layout visually together via drag-n-drop. The valid HTML- and CSS-code is generated automatically on the fly.
  • Flexible Layouts with YAML
    Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
    Dirk Jesse, the developer of YAML (Yet Another Multicolumn Layout), an (X)HTML&CSS framework which explains his motivation for YAML in the last paragraph of the article, providing an overview of what is possible with YAML and may deliver some ideas for your future layouts.
5. Yahoo YUI Grids CSS
Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations. Features include: Self-clearing footer, customization of width for fixed-width layouts, Supports fluid-width (100%) layouts and more.
The YUI Grids Builder — a simple interface for Grids customization.
Don’t forget to check the CSS Reset/Base/Fonts/Grids Cheat Sheet
  • Intricate Fluid Layouts in Three Easy Steps
    This tutorial explains how to build CSS layouts that work on all modern browsers effortlessly using YUI Grids in three easy steps.
  • YUI CSS Grids: awesome, but useless?
    Jeff Croft asks if YUI CSS Grids has a certain limitation for sites wider than 750px, Dustin Diaz comes in and explains some interesting features and usage we can do using YUI CSS Grids. “One cool thing I’ve done with it is made seven different templates with virtually the same html with the exception of one class name (yui-t (1-7)). It’s wonderful because it’s completely source order independent. If I wanted a style switcher on my site you could take the approach of swapping out a className rather than a whole new css file. Thus, no reason for the whole “Invasion of the Body Switchers””


Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
A Typographical and Grid Layout CSS Framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts. Based on the 960 Grid System, Typogridphy allows you to create grid layouts which are versatile and great looking.
Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
SenCSs stands for Sensible Standards CSS Framework, supplies sensible styling for all repetitive parts of your CSS, allowing you to focus on actually developing your website’s style.
A CSS Framework
Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
A CSS framework allowing rapid development of sites with pre-written and tested components, letting you get to the interesting stuff as quickly and efficiently as possible.
Popular CSS FrameWorks: 10 Useful Tutorials For Getting Stared
Tripoli is a generic CSS standard for HTML rendering. Tripoli completly resets all default browser standards and rebuilds them quietly with modern web development in mind. Tripoli is not a CSS framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.
BlueTrip CSS Framework
A full featured and beautiful CSS framework which combined the best of Blueprint, Tripoli (hence the name), Hartija’s print stylesheet,’s simplicity, and Elements’ icons.

Sunday, July 15, 2012

Powerful and Best Tools to check your WebSite WebPage Performance

There are many online performance check service providers out there. all are providing Free web-based service that is great to hear , just see what they do. most of their services are similar and simpler that checking page loading speed , each images,html, css and js files loading time, they are advising and suggesting to improve the files and images once they complete the loading time checking. its a good point for all developers that they can improve their site even more and easy loadable. its good enough for web developing service provider to deliver good and best web pages. here we go for the List of Useful Tools.

Analyze and optimize your website with PageSpeed tools to implement the web performance best practices.
Fast and optimized pages lead to higher visitor engagement, retention, and conversions. The PageSpeed family of tools is designed to help you optimize the performance of your website. PageSpeed Insights products will help you identify performance best practices that can be applied to your site, and PageSpeed optimization tools can help you automate the process.


YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. Feature highlights:

Google Chrome Store :

3.Neustar Web Performance 

Traditional load testing is done inside the firewall. But many of today's applications are found externally—ad servers, news tickers or Web analytics engines. That's why Neustar takes your customer's perspective and tests from the inside out. It's the best way to see if your website is ready for peak usage.

Link ;

Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds. You can run simple tests or perform advanced testing including multi-step transactions, video capture, content blocking and much more. Your results will provide rich diagnostic information including resource loading waterfall charts, Page Speed optimization checks and suggestions for improvements.

Inline image 5

Link :


GTmetrix can help you develop a faster, more efficient, and all-around improved website experience for your users.

Link :


We built this Full Page Test tool to help you analyze the load speed of your websites and learn how to make them faster. It lets you identify what about a web page is fast, slow, too big, what best practices you're not following, and so on. We have tried to make it useful both to experts and novices alike.

In short, we wanted it to be a free, easy-to-use tool to help webmasters and web developers everywhere optimize the performance of their websites.

Link :

With, you get an accuraterealistic, and helpfulestimation of your site's loading speed. The script fully emulatesnatural browser behaviour downloading your page with all the images, CSS, JS and other files – just like a regular user. Spot bottlenecks, reach perfect performance and balance your site load with, a smart and flexible testing tool. Focus on important things while delivers the speed facts straight to your screen. Try it right now!


Link  :


The page analyzer analyzes your web page performance by emulating how a web browser would load your page and all resources referenced in it. The page and the referenced resources are loaded and important performance metrics are measured and displayed in a waterfall diagram along with other per-resource attributes such as URL, size, compression ratio and HTTP status code. Each load time bar has parts of different color corresponding to a performance metric:

Link :

These are the most wanted tools that giving you useful result and ideas to improve your website to perform well.... hope this help you guys and your comments are welcome...

Monday, July 9, 2012

You do not have sufficient permissions to access this page : WordPress Error Fixed.

You do not have sufficient permissions to access this page : WordPress Error Fixed.

We have faced some issues with WordPress , here is another one and we fixed it, usually admin user or some other WordPress user will face this error (in this case) when they try to login . its a user role permissions , we can modify this in WordPress (wp-admin ) admin.php file .


be careful be alert . backup your WordPress database before modifications 

You do not have sufficient permissions to access this page

You do not have sufficient permissions to access this page


if your table prefix is different , you should follow your table prefix here  eg table_options means your row96 should be table_user_roles .

we faced this issue and we solved like this , may be you can try this out and update us. usually we faced this issue when we change the user values or change the table prefix .. be careful be alert . backup your WordPress database before modifications

Friday, June 22, 2012

CRON Jobs commands in cpanel

WE are going to see how to use CRON Jobs commands in cpanel today, we are using CRON Jobs here to run some command / files to generate report  or update database or send email or crawl automatically, we can run the cron jobs command in cpanel or linux command line, or in unix.

here the screenshot of the cron job in cpanel , its will be different for each CPanel versions. also its will be different for plesk control panel.  just  click on the icon and its will show you a simple page to add CRON Commands.

CRON Job Icon in CPanel | WeAreWebDevelopers

CRON Job Icon in CPanel 

lets say your php file located in your host like this . this file contain the script that generate something when you open in the browser,  so we are going to put this in CRON Jobs to be generate / run automatically

firstly you must know your web host php path and your file actual path , you can get it from your hosting provider or you can find out your self if you are using VPS host ,
your php path will be like this /usr/local/bin/php  its will be same for all the host and your actuall php file path will be like this /home/username/public_html/folder/file.php
here we go , just key in the below line in to your command text box
/usr/local/bin/php[space]-q[space]/home/username/public_html/folder/file.php and set the time (frequent) for the file to be run and key in your email (so that you will receive the executed report once the file run successfully) , then clcik Add New Cron, its should run automatically, you may try at-least 5 minutes to test the CRON whether its working or not. if you didn't receive emails , there's some thing wrong,  
CRON Jobs Screen in CPANEL | WeAreWebDevelopers

CRON Jobs Screen in CPANEL 

there is another method that run the file using CURL , if CURL installed in your host , its another solution to run CRON commands . same applies here, you must know your CRUL path and you no need to worry about your  file path in your host because its going run from your URL , its similar to this .  on this case this is the CURL path : /usr/bin/curl 
 and this is the file URL :
just add this line in to CRON JOB command text box and set your time and add your email address to get the report
you may try at-least 5 minutes to test the CRON whether its working or not. if you didn't receive emails , there's some thing wrong,

now we are going to see some thing with security, what if your file having security authentication to run? yes, we have solution for this ,the above CURL works without username and password , we can store the user name and password  in the particular php page session  even  here the solution for secure the CRON Jobs with username and password  .
we use this command line to run the same php file in the CRON with username and password,
here username and password should be your form text box name to read the username and password from the CRON URL (form action and $_GET) . .

we have tested both CRON Jobs with PHP path and CURL path. its works fine on our side and we did received email ever day , just try your side and comment here , we are happy to assist you guys.