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.

1. 960 CSS Framework

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.

Demo can be found here

Tutorials Explaining how to use 960 CSS Framework

• A Detailed Look at the 960 CSS Framework

  
  “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

  
  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.

2. BLUEPRINT CSS FRAMEWORK

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.

Check out the Live Demos

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

  
  PXtoEM.com 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.

3. THE JQUERY UI CSS FRAMEWORK

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.

• Styling Buttons and Toolbars with the jQuery UI

  
  A real-world examples of themeable buttons and toolbars using the jQuery UI CSS framework, a system of classes developed forjQuery UI widgets that can easily be applied to any plugin, and even static content. Here are button examples that demonstrate how to incorporate the power of the CSS framework classes in a custom widget.
  Check out the Live Demos here

4. YAML

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.

Check out the Live Demos here

• Flexible Layouts with YAML

  
  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

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

Check out the Live Demos here

• 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””

WORTH CHECKING CSS FRAMEWORKS

- typogridphy

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.

Download it here

- SenCSs

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.

View the example HTML file

- A CSS Framework

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.

- Tripoli

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, 960.gs’s simplicity, and Elements’ icons.

Check out the Live Demos

- Emastic

- WYMstyle

- Elements

- Malo

- LogicCSS

- Bootstrap

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.

1.PageSpeed 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.

Google Chrome Store : https://chrome.google.com/webstore/detail/gplegfbjlmmehdoakndmohflojccocli?utm_source=chrome-ntp-icon

2.YSlow

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 : https://chrome.google.com/webstore/detail/ninejjcohidippngpapiilnmkgllmakh?utm_source=chrome-ntp-icon

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 ; https://browsermob.com/free-website-performance-test/

4.WebPageTest.org

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.

Link : http://www.webpagetest.org/

5.GTmetrix

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

Link : http://gtmetrix.com/

6.

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 : http://tools.pingdom.com/fpt/

7.site-perf.com

With Site-Perf.com, you get an accurate, realistic, 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 Site-Perf.com, a smart and flexible testing tool. Focus on important things while Site-Perf.com delivers the speed facts straight to your screen. Try it right now!

 

Link  : http://site-perf.com/

8. 

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 : http://loadimpact.com/

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...

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

 

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

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 

lets say your php file located in your host like this

http://www.yourdomain.com/folder/file.php . 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 

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 : http://www.yourdomain.com/folder/file.php

just add this line in to CRON JOB command text box and set your time and add your email address to get the report

/usr/bin/curl[space]http://www.yourdomain.com/folder/file.php

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,

 wget[space]http://www.yourdomain.com/folder/file.php?username=admin\&password=admin

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.

All in one Search Engine Optimization Guide

SEO is means for Search Engine Optimization , We are going to learn this big deal today  with below tips and PDF files from Leading Search Engine SEO Guides.

All in One Search Engine Optimization Guide from WeAreWebDevelopers

there are so much tutorials , books , tips and tricks out there to learn and improve your website Search Engine Optimization , well we know they are.  what is the special here . All in One SEO this is the special here. we are going to list down most wanted and useful Search Engine Optimization Starter Guide to teach you
We follow Google First .
Google already released a Search Engine Optimization Starter Guide for web masters to improve their web site indexing perfectly on Google , here the link to Download , there sre so many useful tools in Google developers network , Google web master tools and WebMaster Blog .  this Google SEO Guide will guide you perfectly to improve your website to Google optimize . we are requesting you to read the blog and Google SEO guide clearly to understand how Google crawlers working and indexing pages.
Now we Move to Bing . Microsoft also provide a bing webmaster tool and resource center to learn and improve your website to Bing Optimize . they have released a PDF Guide to teach us more about their search engine works. here the link to Download Bing SEO Guide , there is a community blog on bing to talk about Bing Search Engine Optimization , here the link for Bing SEO Community Blog , and this is the link for Bing WebMaster tools .
there is a feature that Google disabled and Bing Still Provide that website Submission to Bing its here : https://ssl.bing.com/webmaster/legacy/submitsitepage.aspx . we have to register our self to submit our site to Google now but previously they allowed any one to submit their site with out registering ,now they disabled, we have to register Google Web Master Account to Submit Our Site .
Next. Yahoo , they are together with Bing to Giving more accurate Search Result . once we register in Bing Web Master its will submit to Yahoo , once we submit our URL to bing also its will submit to Yahoo. still yahoo have their own Web Master Tools and Submissions , yahoo haven't released any PDF versions to teach webmasters how to improve site SEO for Yahoo Indexing , but they have a page to study about it, we have perepared the page in PDF for our iserd to learn about Yahoo Search Engine Optimization , here the link to download Yahoo SEO Basics Giude . 
Finally We have Another Search Engine Optimization Guide will teach you something advance tips and tricks with analyses results.

the Best Ways to Secure Your WordPress with these Security Plugins to Make Your WordPress Bulletproof

WordPress is the most popular blogging platform today. It's being used by thousands of people all around the world. But because of the popularity, it's getting more attention by hackers and spammers too. WordPress is very secure by itself, but there's never too much ascertainable.

For simple users,who don't code a lot, plugins is the best way to secure your blog. They're free, easily usable and safe. This post assembles 35 best plugins to make your blog bulletproof. They're each devised for different purposes, so you will get the best protection from each field

Secure Your Login

1. Semisecure Login Reimagined

Semisecure Login Reimagined increases the security of the login process by using a combination of public and secret-key encryption to encrypt the password on the client-side when a user logs in. JavaScript is required to enable encryption. It is most useful for situations where SSL is not available, but the administrator wishes to have some additional security measures in place without sacrificing convenience.

2. Stealth Login

This plugin allows you to create custom URLs for logging in, logging out, administration and registering for your WordPress blog. Instead of advertising your login URL on your homepage, you can create a URL of your choice that can be easier to remember than wp-login.php, for example you could set your login URL tohttp://www.myblog.com/login for an easy way to login to your website.

3. Login LockDown

Login LockDown records the IP address and timestamp of every failed login attempt. If more than a certain number of attempts are detected within a short period of time from the same IP range, then the login function is disabled for all requests from that range. This helps to prevent brute force password discovery.

4. Chap Secure Login

Whenever you try to login into your website, you can use this plugin to transmit your password encrypted. The encryption process is done by the Chap protocol. By activating the Chap Secure Login plugin, the only information transmitted unencrypted is the username, password is hidden with a random number (nonce) generated by the session – and opportunely transformed by the MD5 algorithm. In the first login there will be an error, but don't worry is only a technical error. Indeed in the next login's operation, if the values are correct, there will not be errors.

Admin Area

1. Admin SSL

Admin SSL secures login page, admin area, posts, pages – whatever you want – using Private or Shared SSL. Once you have activated the plugin, you have to go to the Admin SSL config page to enable SSL.

Database

1. WP-DB-Backup

WP-DB-Backup allows you easily to back up your core WordPress database tables. You may also backup other tables in the same database.

2. Remote Database Backup

This plugin creates SQL dumps of your WordPress database. It is based on the WordPress Database Backup plugin (http://www.ilfilosofo.com/blog/wp-db-backup) – but it removes some of the security restrictions in the plugin to enable automated remote backups. You still need the admin user name and password to do a remote backup.

3. WP-DB Manager

This plugin allows you to optimize database, repair database, backup database, restore database, delete backup database , drop/empty tables and run selected queries. It supports automatic scheduling of backing up and optimizing of database.

4. BackUpWordPress

BackUpWordPress is a backup & recovery suite for your WordPress website. This plugin allows you to back up database tables as well as files and comes with a rich set of options.

5. WordPress 1 Click EZ Backup

EZ Backup has been turned into a simple one click operation. Click the button and watch your files and database backup be created. You can create a backup of all your webspace files or backup just your wp-content folder all from this one plugin. Unlike the Full EZ Backup plugin this one does not require any special information such as usernames or passwords etc. This plugin costs $5.

6. myEASYbackup

This plugin allows you to back up, restore, migrate your WordPress installation, both files and mySQL tables with a single click. When performing a backup, myEASYbackup creates a compressed data set file that can be stored outside the WordPress installation directory. A list of all data sets on the server is also logged in the admin area.

Spam

1. Antispam Bee

AntispamBee protects blogs from digital rubbish. It is made up of sophisticated techniques and analyzes comments including pings. Also, for reasons of data privacy, the use of AntispamBee is a safe solution, as it is anonymous and registration-free.

2. NoSpamNX

NoSpamNX is the successor of Yawasp (Yet Another WordPress antispam plugin) and is a plugin to protect against automated comment spam (spambots). While Yawasp changed the names of the form fields in the comment template, NoSpamNX works without these modifications, but is equally effective. By eliminating the need for modifications the form field need maximum compatibility with other WordPress plugins or browser is ensured.

3. Akismet

Automattic Kismet (Akismet for short) is a collaborative effort to make comment and trackback spam a non-issue and restore innocence to blogging, so you never have to worry about spam again.

4. Math Comment Spam Protection

Asks the visitor making the comment to answer a simple math question. This is intended to prove that the visitor is a human being and not a spam robot. Example of such question: What is the sum of 2 and 9?

5. Defensio Anti-Spam

Defensio is an advanced spam filtering web service that learns and adapts to your behaviors and those of your readers. Advanced features such as support for OpenID, detailed statistics, charts, RSS feed of our comments (innocent and spam) and counter widget are also available.

6. SI CAPTCHA Anti-Spam

Adds CAPTCHA anti-spam methods to WordPress on the comment form, registration form, login, or all. In order to post comments or register, users will have to type in the code shown on the image. This prevents spam from automated bots. Adds security. Works great with Akismet. Also is fully WP, WPMU, and BuddyPress compatible.

7. reCAPTCHA

reCAPTCHA is an anti-spam method originating from Carnegie Mellon University which uses CAPTCHAs in a genius way. Instead of randomly generating useless characters which users grow tired of continuously typing in, risking the possibility that spammers will eventually write sophisticated spam bots which use OCR libraries to read the characters, reCAPTCHA uses a different approach.

8. Blackhole

Blackhole is a trap for bad bots. The concept is simple: include a hidden link to a robots.txt-forbidden directory somewhere on your pages. Bots that ignore or disobey your robots rules will crawl the link and fall into the trap, which then performs a WHOIS Lookup and records the event in the blackhole data file. Once added to the blacklist data file, bad bots immediately are denied access to your site.

9. Invisible Defender

This plugin protects registration, login and comment forms from spambots by adding two extra fields hidden by CSS. This approach gave me 100% anti-spam protection on one of my sites.

Other

1. Secure WordPress

Little help to secure your WordPress installation. This plugin removes error information on login page, adds index.html to plugin directory, removes the wp-version, except in admin area.

2. WP Security Scan

This plugin will scan your WordPress installation for security vulnerabilities and it will suggest some corrective actions.

3. AskApache Password Protect

This plugin doesn't control WordPress or mess with your database, instead it utilizes fast, tried-and-true built-in Security features to add multiple layers of security to your blog. This plugin is specifically designed and regularly updated specifically to stop automated and unskilled attackers attempts to exploit vulnerabilities on your blog resulting in a hacked site.

4. TAC (Theme Authenticity Checker)

TAC stands for Theme Authenticity Checker. Currently, TAC searches the source files of every installed theme for signs of malicious code. If such code is found, TAC displays the path to the theme file, the line number, and a small snippet of the suspect code. As of v1.3  TAC also searches for and displays static links.

5. HTTP Authentication

The HTTP Authentication plugin allows you to use existing means of authenticating people to WordPress. This includes Apache's basic HTTP authentication module and many others.

6. AntiVirus

Viruses, worms and malware exist for WordPress and could easily attack your WordPress installation. AntiVirus for WordPress monitors malicious injections and warns you of any possible attacks. It also has multilingual support.

7. Secure Files

This plugin allows you to upload and download files from outside of your web document root for security purposes. It can be used to can restrict file downloads to users that are logged in, or have a certain user level.

8. Replace WP-Version

Security your WordPress-Installation and eliminate or replace your wp-version and database-version on easy way with a small plugin. If you're running an older version of WordPress, anyone can view source to see what attacks might work against your blog. This plugin replaces the WP-version with a random string < WP 2.4 and eliminate WP-version > WP 2.4.

9. WP Email Guard

WP Email Guard protects your email addresses included on any post or page from being crawled by spammers. It converts every email written within your post body into a JavaScript code, so the emails is readable and can be clicked by humans only. Spammers can't crawl JavaScript.

10. WordPress File Monitor

Monitors your WordPress installation for added/deleted/changed files. When a change is detected an email alert can be sent to a specified address.

11. WP Dephorm

WP-Dephorm protects your users from the prying eyes of phorm. This is achieved by setting a cookie to opt out of the phorm information mining. Your blog viewers will not have their information stored and used in marketing campaigns whilst viewing your site.

12. WordPress Firewall

This WordPress plugin investigates web requests with simple WordPress-specific heuristics to identify and stop most obvious attacks. There exist a few powerful generic modules that do this; but they're not always installed on web servers, and difficult to configure.

13. Secure Contact

SecureContact is a drop in form for users to contact you, based on the WP Contact Form plugin by Ryan Duff. It offers enhanced security by using captcha images.

14. Fast and Secure Contact Form

Fast and secure contact form for WordPress. This contact form lets your visitors send you a quick E-mail message. Blocks all common spammer tactics. Spam is no longer a problem. Includes a CAPTCHA and Akismet support. Additionally, the plugin has a multi-form feature, optional extra fields, and an option to redirect visitors to any URL after the message is sent. Super customizable.

15. Ultimate Security Check

The Ultimate Security Check plugin helps you identify security problems with your WordPress installation. It scans your blog for hundreds of known threats, then give you a security "grade" based on how well you have protected yourself.

16. Content Security Policy

Content Security Policy prevents content injection attacks by allowing admins to specify which sites they trust to serve JavaScript and other types of content in their site. Any content which is not explicitly allowed by the policy will be blocked from loading.