Pixel perfect layout
I am a web developer with 2 years experience working in firefox with firebug. I am making up for the Pixel-perfect technique. Why?
I used to post an image with Html code. But how inconvenient to select an element in firebug if the image is on top of everything. Every time you had to go into styles and hide a picture. Pixel-perfect plugin for firefox for some reason did not work.
Then there was an idea to create a script that will hide by short-cut (hotkey) image. And while creating the script there were new ideas for upgrading usability. The result was: Pixp
After creation, I was able to test it only on one live project, so bugs are possible, and since this is my first public project for everyone, please do not judge strictly. However, quite a bit of time has passed since I went to the back end, and my friends web designers continue working using this script.
For me personally, the layout process has become much more convenient. And to prove to the client that this element is located correctly is now not difficult. Since your client can also use the script without installing additional. BY.
In short:
When creating a new project, you will need to connect a script, and do not forget to delete it when you submit it.
After the connection, you need to create a folder or specify in the dialog box the name of the folder where our picture is located, or just a direct url. I use '.ajax' with crossdomain disabled. So the pictures need to be stored on the same domain as the site.
')
Then you can adjust the positioning and transparency of the image as you want it.
The script saves every manipulation with a picture in a cookie; running through the pages of the site will not need to be set up again.
During the creation of the script, I imagined how the developer would go to another page and see the design of the previous page, then the idea to create layouts appeared. Using hotkeys you can quickly change the image corresponding to the current page of the site.
The last convenient feature while it was 'Hover mode', the picture is hidden automatically if you try to select an element from the inspector, and it is shown again.
All hotkeys here :
P.S. I wrote the script first of all for myself and friends. Friends approved and said share with everyone. Here I share.
I hope it will be useful to you.
- The page is created faster than when you run between the browser and the PSD.
- A much better result is obtained, from which your client is delighted and there is nothing to complain about.
- Tritely more convenient to see the layout and immediately position the element under it.
I used to post an image with Html code. But how inconvenient to select an element in firebug if the image is on top of everything. Every time you had to go into styles and hide a picture. Pixel-perfect plugin for firefox for some reason did not work.
Then there was an idea to create a script that will hide by short-cut (hotkey) image. And while creating the script there were new ideas for upgrading usability. The result was: Pixp
After creation, I was able to test it only on one live project, so bugs are possible, and since this is my first public project for everyone, please do not judge strictly. However, quite a bit of time has passed since I went to the back end, and my friends web designers continue working using this script.
For me personally, the layout process has become much more convenient. And to prove to the client that this element is located correctly is now not difficult. Since your client can also use the script without installing additional. BY.
In short:
When creating a new project, you will need to connect a script, and do not forget to delete it when you submit it.
After the connection, you need to create a folder or specify in the dialog box the name of the folder where our picture is located, or just a direct url. I use '.ajax' with crossdomain disabled. So the pictures need to be stored on the same domain as the site.
')
Then you can adjust the positioning and transparency of the image as you want it.
The script saves every manipulation with a picture in a cookie; running through the pages of the site will not need to be set up again.
During the creation of the script, I imagined how the developer would go to another page and see the design of the previous page, then the idea to create layouts appeared. Using hotkeys you can quickly change the image corresponding to the current page of the site.
The last convenient feature while it was 'Hover mode', the picture is hidden automatically if you try to select an element from the inspector, and it is shown again.
All hotkeys here :
P.S. I wrote the script first of all for myself and friends. Friends approved and said share with everyone. Here I share.
I hope it will be useful to you.
Source: https://habr.com/ru/post/195414/
All Articles