Device Creator is a tool for creating simple and beautiful devices on your website. Created your device, edit the colors, background and add to it buttons. You can use the created devices to demonstrate your code, templates, pictures, adaptive design and much more. By experimenting with buttons, you can use the tool to create, for example, the smartphone of your dreams. Toggle buttons, merge, change the size of the display, the color of the panel, etc. Do you dream of a pink apple? Please =)
Entertainment can be endless. However, the main purpose of creating a tool is to use it on websites. Change a heavy image of a laptop or smartphone to several lines of code — this is a very big difference. And if the site-portfolio, where there are many such images? Many people are faced with the fact that the site has been downloaded for a very long time because of this … In addition, you can at any time make changes to the code.
Many people will say, “Wow, Fu, it’s easier to created himself” and in some ways it will be right. But I ask you not to judge strictly, the project is not positioned as a kind of super development. This a just fun and little support for the encoder) Now I’ll tell you everything.
You can use the created devices to demonstrate your code, templates, pictures, design created for mobile devices, placing html5-banners in it and much more. Ways of applying are just your imagination.
When you enter the site, you will see a small display around which actions will unfold. On the left and right side of the site there are buttons that change and add various parameters.
These are the main buttons, by the name of which it is not difficult to guess what type of device will be created. Currently, there are 5 types and device elements that are great for publishing on your site.
- phone-small
- phone-big
- tablet-portrait
- tablet-landscape
- ipod
Here are the buttons that change the color of the panel of your device. The default color of the panel is white, which can be changed to black or removed altogether. Below is the button for creating your own color.
- click on the circle near the button
← Choose - create your own color or enter the color code in the appeared window
- click to
Enter
You can set the color values yourself. When the code is received, the values are reflected in the RGB format. If you need a hexadecimal representation, your HEX code will appear on the button next to the circle. Click on the button and copy the code.
The buttons of this block add shadows to your device, which makes it more realistic. There are 6 types + Shadow Removal button:
- bSd_light
- bSd_small
- bSd_classic
- bSd_toBlack
- bSd_around
- bSd_big
- bSd_none
This is not so important block, but if you want to create, for example, an empty panel for a smartphone, you can turn off the display by pressing the desired button. Likewise, if you are tired of starting text on the display, in the same block you can either stop it or completely turn it off.
This is a special field in which you can enter any attribute and its value. To save multiple attributes, separate them with a semicolon.
Important! When you edit this field, all previously created settings will be reset! Therefore, if you want to set, for example, your own sizes, you first need to enter them in this field, and then work with the buttons.
When your work on creating the device is completed, click Get code. In the window that appears, you will see the code of your device. Copy the code by pressing the Copy code button and set to the desired place in your project.
You can easily add and change the styles of your device.
This block is not so important, but it can come in handy when you get the code. It presets the positioning parameter that you need to place on the site. I recommend using the buttons at the very last moment, ie, after all the work on setting up your device.
Select this to determine how the blocks within your device will be located.
When creating a device, you can experiment. Press the buttons one by one, turn them off or combine to create a suitable interface. Currently, the styles of the interface buttons are not displayed when you receive the code, but they are already in the plans for the near future.