Some Useful Css Rules, That I need it Always

1. When You Creat unordered list ul, by default there are some margins that you have to remove in order to align the list items li to their parent container ul: 

ul{
    margin:0 0 0 0;
    list-style-type: none;
    padding:0;
}

2. Targeting Microsoft Explorer 9 and before with CSS3 great rules use the valuable script PIE.

3. When you find your self want to apply rtl direction on list items <li> with  numbers like in pagination  links but you cannot , the direction will not change it is always ltr whether you put the page direction to rtl or ltr . to solve this assign a css display property   to the li element equal to flex.

 ul > li { display:flex;}

Note: Flex is a css3 property.

Css grid system : avoid box-sizing ie7 problems. boxsizing.htc

Responsive grid css frameworks are great solution to the problem of many screens visiting your site, there are many of these frameworks around, you can pick any one you like, depending on your needs, you may find small or large ones.


but the main problem with these frameworks is they are rely on javascripts, to solve issues like padding and borders on ie7, which can be solved using border-box in modern browsers.


If you are looking for css grid framework and you are concern about the size and the loading time of your page, then absolutely you will consider remove extra scripts to Speed up your page loading.


the best solution to this problem is to look at the grid system as layout lines and not content boxes. and put your content inside divs within the grid columns . So you can add padding and borders to the child div not to the grid column and that will not affect the grid layout.


Another thing to void is "Don't give the columns any extra margins that not required by the grid system".


If that is not working and you still have floating out columns then create a special grid columns rules that working only for ie7, that means you are going to change the percent numbers of each column.

Last option you have to accept javascript solution for this, Just Add :

*behavior: url(boxsizing.htc);

to the box-sizing css rule after you downloaded the file to your website. 

Another Solution is to download this script PIE.

Laravel-4 Tutorial-2 : Installation on Windows

The process of installation is clear and direct on windows and require 3 steps to do that : first , downloading the required packages, install them and check the path .

Downloading :
As I said in tutorial-1 , three main programs must be installed on your system Php,Composer And Git, Of course php will be installed with Apache server and mysql as a standard package (I use Wamp Server).

Download the Composer and Install it Just run the installation program , Then go to and download Git
Don't forget to choose the "Add to system Path" option when asked for .

Next check your installatio by running these commands from the command line :
C:\php --version
C:\composer --version
C:\git --version.
if it is ok and you will get a message of each program version.
Now you are ready to install Laravel-4 and begin creating your project.

Install  Laravel-4 using composer:
From the folder that you want to create laravel project in run the following command from command line:

composer create-project laravel/laravel 

The composer will connect to the git repository  and download the laravel
framework and all its components and their dependent packages.
even the Application key will be produces automatically by the installer. No need to do anything else just start configuring you application.

Laravel-4 Tutorial-1 : Things to know before Start developing on Windows

You Need To Install Composer And Git in order to work with  Laravel-4 and Packages Installation.

Three Folders must be added to your path    composer, php and  git.

Composer and Laravel

People on Laravel Project Didn't want to produce a strange php framework that don't know anything about the other Packages on the internet and that will enforce the developer to create his own version of every thing he needs to develop an application. instead the developer can benefit from other developers and can inject their standard packages into his project without the need to start from zero point again.
So,Composer  is just a utility that will help developers to install other packages into their project . That's it.

From Composer Site Documentation :

Composer is not a package manager. Yes, it deals with "packages" or libraries, but it manages them on a per-project basis, installing them in a directory (e.g. vendor) inside your project. By default it will never install anything globally. Thus, it is a dependency manager.

Also,  We need Composer to install the framework that we need like Laravel, Why we need composer .

You will get this error:

failed to open stream: Unable to find the socket transport

 "ssl" - did you forget to enable it when you configured PHP?

When try to install any package using composer and you didn't enable openssl extension

You will get this error :

'git' is not recognized as an internal or external command,  operable program or batch file.

When you try to run composer to install a packages that reside on git repository,That means the git program is not installed or is not added to your PATH.

Why do we need Git :

From Composer Site Documentation :
"To install packages from sources instead of simple zip archives, you will need git, svn or hg depending on how the package is version-controlled. "

-> For Tutorial-2

Whoops! There was an error in Laravel-4 Startup

Suddenly When I tried to reach laravel 4 Documentation on my server ,a strange colorful screen came out  saying  :

"Whoops! There was an error"

This is a debug stack trace detailed page taking from Symfony Package which is used with laravel packages as  an error stack trace  display script .
(Sorry.. Laravel-4 going to be elites software not for anyone , and I think it will lose its popularity )

Ok. How to solve this issue , As I said this is a detailed information about the error you got,If you are lost in these crowded tech information then you can reach the single line error page by changing the variable debug value from True to False in the configuration file app.php.
You can find this file in app/config/ folder .
After changing the value  to false regenerate the error again and you will get a single line error telling you what is the problem.

Convert Twitter Bootstrap css file from LTR to RTL using Node.js R2 Module on Windows 7

I am using this library (twitter bootstrap) a lot on many RTL (Right To Left) sites , But it is not supporting RTL css rules, for that a lot of developers created RTL version of twitter bootstrap css library and that is great if they keep there products up to date .but unfortunately they don't. So we have to find a proper way to help our self solving this issue. How to do that :

First : Download and install Node.js on Windows 7.

Go to Node.js Site Download page and Download Node.js Installer . be sure to check the npm option to be installed on your computer from the installation wizard :

What is Npm ?
Npm is Node Packaged Modules where you can find a lot of modules that work with node.js to ease a lot of functions that you don not need to create by your self like Mysql Package which is A node.js driver for mysql.

Second: Download  and install Node.js Module (R2):

From the Command line Just enter this  command :

npm install -g R2

-g : this attribute will add R2 to the system path so you can Run it from any place.

 Third: Run R2 on the LTR css file to convert it to RTL css file.

go to the folder that contain your css file that you want to convert it and from the command line type the following :
r2 [the name of the original ltr file] [the name of the rtl file]
In the twitter bootstrap case we neet to do the following:
r2 bootstrap.css bootstrap.rtl.css

And hopppppaaa     .................