Enough the back-end talk, where everything is tough, hidden and rigid! There seems to be more emphasis on UX and Front-end design these days, so today we’ll talk about these technologies. Most of these tools will save you a great deal of time (especially if you don’t like the front-end part of coding at all, like me). The web, like always, makes our lives much easier, and it brings us tools to make our lives easier, again!
So let us introduce you to a few of our favorites:
1 – Twitter Bootstrap
Twitter Bootstrap, is an awesome front-end solution for websites. I had the chance of using it inside an admin panel that i developed 4 days ago. It has many nice features like data tables, custom icons, Ajax messages (like the green ones you have seen at some websites, at the top). This one is just awesome because it helps the GUI development process to get finished faster (not being the UI guy myself, it’s much more convenable for me.)
So in essence it provides the following:
- Different UI Widgets
- Stylizing the existing ones
- Responsiveness for mobile apps
Many more! Check out their website to know what is what.
2 – Jquery UI
jQuery UI is actually a toolkit for front-end development that provides widgets such as, the accordion, the tabs, the sliders, spinners etc. It also allows you to theme your existing ones (providing the targeted browser supports CSS and JavaScript, but that’s not a problem anymore, since almost all of them do). It’s one of the most used front-end development tools these days, so give it a shot and i bet you will love it! They have demos on their official website too, just in case you want to see what kinds of options you have whilst using it.
3 – Google Chrome Ruler
This ruler is what i use when i want to find out, or plan the size of a div (how much should it be), it has a percentage option, which you can decide responsive widths using it.I have been using it more than one year and it has never failed to give me precise results.
You can install it on your Google Chrome via the Chrome Web Store, and clicking on the button next to the Settings menu button, you can select an area on your screen to choose the size you want on the page. Whether you are using points, percentages (window-size), or centimeters, you can easily get the required size on your screen. This might help you decide how to lay out your content on the page, get an idea of what size an object on the page is, or plain and simple, get the size of an image (not that i would recommend it, use properties of the image to get the size of the image instead), overall, it’s a very great tool to have in your web browser when developing things, whether you are a Web Designer, or a Web Developer.