For the past few days, we have showed you some of the best WordPress and Joomla responsive themes you can download and use on your site. Today, we’re going to give you the tools. Comprise of frameworks, services, and downloadble scripts, we think they are going to be a great help when it comes to responsive web development.

To make it easier to go down the entire list of tools, we’ve categorized them into the following sections:

• Grid & Frameworks
• Sketch Sheets & Wireframes
• JavaScript & jQuery Plugins
• Testing & Preview
• Sliders
• Others

Grid & Frameworks

[Back to top]

Columnal

Columnal is a Pulp+Pixels project, which has been borrowed from cssgrid.net while some code inspirations has been taken from 960.gs. Columnal helps you a lot in your responsive web design, by making your grids flexible to change dynamically when the browser window is resized.

Skeleton

Skeleton is a simple and powerful CSS framework, which is mainly liked by developers and designers because of its simplicity and efficiency. There is no heavy-lifting with Javascript here, only good and pure CSS with clean documentation.

LessFramework 4

Less Framework is more or less a framework, in the name of its creator. It is an adaptive CSS grid system based on using inline CSS media queries, which makes the development of responsive websites much easier.

Semantic Grid System

Semantic Grid System is used to design responsive grid layouts. It uses pre-processed CSS extensions like LESS, SCSS or Stylus to deliver maximum efficiency. You can select column and gutter widths, choose the number of columns and switch between pixels and percentages.

Golden Grid System

Golden Grid System is a fluid-grid system which serves as the starting point of your responsive web design. It enables the website to serve good-looking pages ranging from 240 to 2560px.

320 and Up

320 and Up is a CSS media queries boilerplate, which serves to be the starting template for your responsive design. It follows a completely reverse approach than the several other boilerplates available.

Inuit.css

Inuit.css is a CSS framework, which is extremely easy to use, even for novices. It has a minimalist approach, thus you need to deal with only things that are needed, but if need be, it can also be extended with a handful of plugins available.

Gridless

Gridless is a boilerplate for creating responsive and cross-browser websites with beautiful typography. This tool focuses on progressive development of a project, and it serves as the starting point of any design.

1140 CSS Grid

1140 CSS Grid is a great CSS grid system designed by Melbourne designer Andy Taylor, which lets your design fit perfectly at 1140px for large monitors and your fluid layout will adapt seamlessly to other smaller resolutions with very little extra work.

1KBCSSGrid

1KB CSS Grid designed by Tyler Tate, is a simple and lightweight CSS Grid generator. It will allow you to set the number of columns, column width and gutter width, and you can get a downloadable CSS for your websites grid.

Bootstrap

Bootstrap, created and maintained, by Mark Otto and Jacob Thornton at Twitter, is an excellent set of user interface elements, layouts, and javascript tools, freely available for you to download and use in your web design projects.

Fluid Grid Calculator

This simple tool will help you to quickly grab the CSS of your fluid grid website design.

Fluid Grids

Fluid Grid is a simple yet useful fluid grid framework, that creates responsive layouts based on 6, 7, 8, 9, 10, 12 or 16 columns.

Flurid

Flurid is a simple and very useful cross-browser CSS grid framework with up to 16 columns. And moreover it doesn’t hide pixels into margins.

Gridset

Gridset is a tool for making grids of any type, such as, columnar, asymmetrical, fixed, ratio, compound, responsive and more. This tool by Mark Boulton, is still in beta, but proves to be promising. And did I mention, using it is as simple as embedding a link.

Gridpak

Gridpak is an online responsive grid generator, where the number of columns, padding, and gutter can be changed, and custom breakpoints can be added. The CSS is generated by the tool and made ready for download. It also provides PNG grid templates, which can be used for designing purposes in Photoshop.

SimpleGrid

SimpleGrid, developed by Michael Kuhn, is a very simple and straightforward CSS framework for creating infinite grid-based layouts. By default, SimpleGrid is prepared for 4 distinct ranges of screen sizes.

Susy

Susy by Oddbird, is similar in action to the Semantic Grid System. It uses no extra markup or any other special classes, but is only aimed to the users of Saas and its extension Compass.

Tiny Fluid Grid

Tiny Fluid Grid is an awesome web app, that can help you determine the grid system of your website in an interactive way. You can set the number of columns, gutter percentage, minimum and maximum width of your website’s layout, and can get a downloadable CSS for it.

Variable Grid System

Variable Grid System is designed and developed by SprySoft and is based on the 960 Grid System. It allows the developers and designers to generate the custom grid and then download the accompanying CSS file based on that grid.

Sketch Sheets & Wireframes

[Back to top]

Responsive Web Design Sketch Sheets

This tool is useful in mapping out the placements of various elements in your website layout across various devices. With the help of this device, you can form an idea of where to place the necessary elements of a website for different screen sizes and resolutions.

Responsive Wireframes

Responsive Wireframes is an experimental tool created by James Mellers of Adobe. It is built with only HTML and CSS (no images or JS were used) which you can use to visualize how your responsive design would look like on actual browsers of various desktops and mobile devices.

StyleTiles

Style Tiles gives you a way to develop an idea of how a website would look like, independent of the complicated styles that come into play. It gives you the opportunity for a perfect responsive design workflow and also the ability to integrate client feedbacks.

JavaScript & jQuery Plugins

[Back to top]

Adapt.Js

Adapt.js is a Javascript solution and an excellent alternative to the CSS media queries. Using @media approach is good practice, but this does not work for all browsers. Nathan Smith, the creator of 960 Grid System, released Adapt.js, a very lightweight javascript library to overcome this problem.

Isotope

Isotope is an amazing jQuery plugin, which proves to be very useful while designing a responsive design. It not only helps to rearrange the elements of a page when the browser window is resized or the screen size is smaller, but it also helps to filter those elements.

Masonry

Masonry is an excellent jQuery plugin, which is used to create dynamic and adaptive layouts. This plugin helps to rearrange the elements in your responsive design, so they can fit better in the open-spots on the grid.

Respond.js

Respond.js is a fast and lightweight (3 Kb minified and 1 Kb gzipped) script, whose main aim is to enable responsive web design in those which don’t support the CSS3 Media Queries, like IE browsers.

TinyNav.js

TinyNav.js is a small and lightweight jQuery plugin, only 362 bytes, that converts big navigation lists into small dropdown menus for smaller screens.

Wookmark jQuery Plugin

Wookmark is a jQuery plugin that detects the browser window size and automatically arranges the elements of the page into columns. You can also see a live preview at the bottom of the page itself.

Testing & Preview

[Back to top]

ProtoFluid

ProtoFluid is a web-based prototyping tool that lets you test your website prototypes in various screen sizes and resolutions. Just type in the URL, select the device (or any custom dimensions) and press launch. Since it is a web-based tool, it also lets you use other extensions like FireBug.

Responsive.Is

Responsive.Is is created by TypeCast another browser emulator tool, which you can use to test your responsive design. Just type in a URL, and it will automatically change its size depending on the device you choose.

Responsivepx.Com

ResponsivePx is an awesome tool for testing your responsive website design. The main feature that distinguishes it from others, is its capability to resize the website pixel-by-pixel. This awesome feature, will let you identify the breakpoints and also test how the CSS media queries are working in your site.

Responsive Web Design Testing Tool

An awesome testing tool, that can allow you to view your responsive website in various screen sizes simultaneously in a single screen, while you build or design them. I like this tool mainly because it shows all the screen resolutions side-by-side which makes it easier for debugging.

ReView.Js

ReView is a dynamic viewport system, developed in pure JavaScript, which gives you a fantastic viewing experience for your responsive Web design.

Screenfly

Screenfly by QuirkTools, is an amazing tool that will enable you to view your responsive website in a variety of devices: Desktop, Tablet, Mobile and TV. It also has options to enable or disable scrolling or even to rotate the display.

Screenqueri.es

Screenqueri.es is a pixel-perfect responsive design testing tool. Just enter any website address that you want to check, and this tool performs will show the website in various screen sizes according to device. You can also manually resize the size pixel-by-pixel to identify the breakpoints.

The Responsinator

Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the Responsinator. It also shows your site both in portrait and landscape mode. I like this tool much more because of the outlines of the devices displayed on the page, which brings more meaning to the whole process.

Sliders

[Back to top]

Blueberry

Blueberry is a fantastic open source jQuery image slider, which is written to specifically work for fluid or responsive layouts.

Elastislide

Want a carousel that will automatically adjust to screen size when the browser window is resized or when you are in a smaller screen? Elastislide is the most suitable jQuery plugin for your needs.

Responsive CSS3 Slider

This is a pure responsive CSS3 slider that can adapt to any screen size and screen resolution with ease. The nice thing about this slider is that, the arrows go inside the box when the device screen size is small enough. No JavaScript needed.

ResponsiveSlides.Js

ResponsiveSlides.Js is a very simple and extremely lightweight (only 1Kb) jQuery plugin that creates a responsive slider using unordered lists.It works on a wide range of browsers, also on IE6 and up.

Others

[Back to top]

Adaptive Images

Adaptive Images is an online tool for responsive web design, which detects the visitors’ screen size and creates, caches and delivers rescaled images, based on the screen size and resolution.

FitText.Js

FitText.js is a small javascript tool, which allows the automatic resizing of text and headlines when the browser window is resized. No more worries of text size mismatch with this tool on board.

FitVid.Js

Want to rescale the embedded videos when the browser window is resized or the device is of smaller resolution? FitVid.Js can help you acheive this. It is a lightweight, simple, easy-to-use jQuery plugin used to achieve fluid width embedded videos.

Retina Images

Retina Images is an awesome javascript solution, that will automatically serve @2X larger, high-resolution images when viewed on retina display. All you need to do is put a high-resolution version of each and every single image, and it will manage the rest.

Seamless Responsive Photo Grid

Seamless Responsive Photo Grid displays the images edge-to-edge on the browser, without any gaps in between images. The photos are tiled and they flow from left to right throughout the page in columns. The number of columns adjust accordingly as the browser window is resized.

SlabText

SlabText is a jQuery plugin or tool by Brian McAllister based on the slabText algorithm, that splits the headlines into rows before resizing each row to fill the available space. It is quite similar to the FitText.Js plugin in action.

Zurb – ResponsiveTables

Have you ever wondered how to deal with the big data tables in responsive design? Zurb, a CSS/JS combo gives you the answer; it takes the data tables and modifies them so that they do not break the responsive layout on smaller screen devices.

Categorizr

Categorizr is a very small PHP script, provides your visitors with a more targeted web experience. It will help you deliver device-specific designs for Tablet, TV, Mobile or Desktop.

Media Query Bookmarklet

Media Query Bookmarklet shows you what size the current viewport has and which media query was just fired for it.

The Responsive Calculator

The Responsive Calculator is a very simple online tool that can help you to turn pixels into percentages while designing your responsive website.

Up Next week

In the second week of this series, we will be brigning you tutorials that will really get you into Responsive Web Design (RWD).

Don’t miss it.

Related posts:

1. 40+ Free Responsive WordPress Themes
2. Top 10 Free Responsive Joomla Themes
3. 50 "Hand-picked" Beautiful Premium Responsive WordPress Themes
4. Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples

If you are like millions out there, Facebook has become your no. 1 website on the Web. As you login to it every single day from many devices, be it from your mobile phone, computer, laptop and office workstation, there is a chance that you may leave your Facebook account on without logging out. If your account gets accessed by strangers, it’s going to open up a large can of worms, so you should seriously try to prevent unwanted access to your account.

There are many ways to prevent access to your account by the next person to use the device, the easiest of which is to log out. However if your smartphone or device gets stolen, it’s a whole different matter. In this article, we will go through some important options you can take to prevent others from accessing your personal Facebook account.

Recommended Reading: 10 Ways To Tighten Up Your Gmail Security

1. Create Strong Password

Chances are, you already have your password created for Facebook however it is advisable for you to make sure your Facebook password is one of a kind and different from your other online accounts e.g. email, blog, hosting etc.

To change your password, go to Account Settings > General > Password.

The best passwords would have the combination of small and capital letters, numbers and symbols.

2. Confirm your mobile number

Confirming your mobile number is one of many ways to enhance your account security on Facebook. This way, even when you lose or forget your password, Facebook will be able to send you a new one via SMS.

To add your mobile number, go to Account Settings > Mobile and click on Add a Phone.

Select your country and set the mobile carrier before clicking Next.

Now you will be given an instruction to send an SMS to the given number. Follow the instructions to get a code via SMS, and then enter the code into the column. You also have the option to Share your number with friends on Facebook and Allow friends to text me from Facebook. Select your preferences and click Next.

Now your mobile phone is registered with Facebook, and when the need arises, this connection will be useful to reactivate your Facebook account.

3. Activate Secure browsing, Now

Among other things, to make sure your browsing activity within Facebook is safe, you can turn on the Secure browsing option. By doing this, you automatically limit all external applications that are integrated with Facebook from doing any harm or taking your personal information without your knowledge or approval.

To start securing your account, click on the drop down menu from the top right corner of your Facebook account and go to Account Settings.

Select Security from the left menu.

At the Secure Browsing section, click on the Edit link at the right.

The option panel will appear, ‘check’ the box Browse Facebook on a secure connection then click on the Save Changes button.

4. Activate ‘Login Approvals’

Login approvals is an extended security feature offered by Facebook, and it will require you to enter a security code each time you try to access your Facebook account from unrecognized devices. To activate Login Approvals, go to Account Settings > Security, look for Login Approvals and click on the Edit button.

An option to activate Login Approvals will appear, tick the check box to activate.

A popup window will appear with descriptions of login approvals, click on the Set Up Now button to continue.

If you already register your mobile number, Facebook will automatically send you a code via SMS. Enter this code in the given box and click Submit Code.

Now you have completed with Login Approvals request, click Next to continue.

Next, Facebook will offer you to setup a Code Generator from your mobile phone; this is useful in case you are unable to receive SMS. Click Continue.

Code Generator for Android phones

Since I am using an Android phone, I’ll use the Android activation as an example.

Download the Facebook Mobile App from Google Play if you don’t already have it. After downloading it to your mobile, click Next.

Once downloaded, Facebook will provide instructions to install the Code Generator. To install, launch your Facebook App, tap on menu > Account > Code Generator > Add App. Then click on Finish Setup below.

Now that your Code Generator is active, Facebook will guide you with the correct steps to use the code generator. Next time when you want to generate a new code, simply launch your app, tap on Account > Code Generator and the code will appear. For now, click Close as you have completed the steps to activate your Login Approvals.

5. Disconnect Previous Active Sessions

The good thing about Facebook is that it lets you know about your previous active sessions, where you login from, and what devices you used to access your Facebook account. Now to make sure your account is safe, from the Account Settings > Security page, look for ‘Active Sessions‘ and click on Edit.

Now all previous sessions will be listed, together with the current active session at the top of the list. Click on the link ‘End Activity‘ to kill the activities from other devices.

6. Activate Private Browsing

Another way to prevent another person from accessing your account is by activating the ‘Private Browsing’ option from your browsers. All browsers have this private browsing option, and by activating this option, your activity will not be logged into the browsing history.

Safari

If you are using the Safari Browser on Mac, activate Private Browsing from the menu with Safari > Private Browing.

Firefox

For Firefox, go to Tools > Start Private Browsing.

Chrome

If you are using Chrome, there’s an option to browse using the Incognito window, it’s a version of Chrome window where all browsing activity will not be logged in. To open this window, go to File > New Incognito Window.

7. Don’t ‘Keep Me Logged In’

The moment you want to login to your Facebook account, at the Log In page, there’s a small checkbox that says Keep me logged in. Make sure this box is unchecked. Then, log in as usual. With this on, you will be asked for your email and password every time you launch Facebook.

8. Avoid Spam Links

Facebook is serious about spam and is always enhancing its features to make sure you are safe from being a victim to scams. The types of attacks include money scams through direct or indirect requests via Facebook messages, chat etc, phishing links that will redirect you to fake websites, malicious links that could retrieve your personal information or even harm your computer. There are also chances you may receive emails from ‘Facebook’ but it is actually from a phishing website, this modus operandi is part of a scam.

There are many ways you can avoid being a victim:

1. Never click on suspicious links whenever or wherever you find it, even if it came from your friends. If you receive a link, always take the extra step of asking your friend what the link is to confirm that they had sent it. Usually these links are ‘sent’ without the sender’s knowledge. This includes all links that appear in your Facebook Chat, Messages, friend’s status post or even from your email.

2. Never give out your username or password to anyone, including websites with suspicious links and layouts. Giving your passwords freely could jeopardize the security of your personal information on Facebook.

3. Log in only at www.facebook.com and not from any other link or website, unless you are accessing via Facebook App.

4. Update your browser to its latest version to ensure your browser’s security is up to date so it would detect and alert you with a warning when you are navigating to a suspected phishing site.

9. Sign Out after use

Lastly which is the most important of all (and definitely worth repeating), never forget to log out from your Facebook account.

Conclusion

Now with these 8 options plus one crucial reminder to log out, you can surf your Facebook worry-free. Most of us wouldn’t have thought that our online accounts would get hijacked, but if the recent LinkedIn security breach proves anything, it is that there are people out there on the Web who are actively trying to gain access to our sensitive information. Let’s not make it any easier for them.

Have we missed out on any other security-enhancing tips? Do let us know at the comment section.

Related posts:

1. How to Customize the ‘Via’ status on your Facebook Posts
2. How to Prevent Yourself From Turning Up on Facebook Recommendation Ads
3. How to Use Images in Facebook Chat Box [Quicktip]
4. Disabling Activity Posts from Facebook Apps [Quicktip]

You have faced the same yellow folder icon on Windows for a long time, with minor changes to perhaps the size and shape, but not the color – and there is not a single option that allows you to change it. With hundreds of folders within folders, it’s definitely not easy to spot the folder you are looking for at any point in time.

Changing the color of the folder icon could help you spot and differentiate folders easily, rather than just depend on the folder name.

Coloring a folder icon may not be possible on Windows, but not anymore with Folder Colorizer, a desktop application that will enable you to change the color of your folder icons and help reorganize your folders.

Install Folder Colorizer

Download Folder Colorizer to your computer. Once downloaded, run the FolderColorizerSetup.exe file, read the License Agreement and click ‘Next’ if you agree.

If you agree, you can now proceed with the installation, so click the ‘Install Now’ button.

If in the middle of installation you are requested to activate Microsoft Dot Net 3.0 Framework. You may need to download the Dot Net 3.0 framework, open the package, read the terms of the License Agreement and if you accept, click on the ‘Install’ button.

Click ‘Yes’ to proceed with the installation of Colorizer.

That’s it, installation is now complete. You are ready to add color to your desktop.

Coloring Folder icon

To start differentiating your folder, select any folder icon you want to change the color of, right click on it, select ‘Colorize!’ and then pick any preset color.

Once you have selected a color for your folder, your folder icon color will change automatically from the standard yellow to the color you picked.

If you need to use custom colors, right click again, select ‘Colorize!’ and select ‘Custom…’

From the window, pick any color you want to use, then click on ‘Add Color’.

This custom color will be saved as a preset color, so the next time you want to use it, you can select it straight from the list.

Restore Default icon color

Should you decide to restore the original color of your folder icon, right click on the folder, select ‘Colorize!’ and pick ‘Restore original color’.

The changes will be made immediately, and you will see that the color of your folder icon has returned to the original yellow.

Conclusion

With Folder Colorizer, you can now colorize your folder icons to make it easier for you to reorganize differentiate your folders. You can even categorize your folders based on the type of contents and set what color to use for each category, so the next time when you need to find them, it will be easier for you to spot them.

Related posts:

1. How to Create New Folders in Windows by Drag & Drop [Quicktip]
2. How to Unlock GodMode in Windows 8 [Quicktip]
3. Create Customized (Colored) QR Codes [Quicktip]
4. How To Download Your Data Stored Within Google Products [Quicktip]