50 Useful Responsive Web Design Tools For Designers

<div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">For the past few days, we have showed you some of the<span class="Apple-converted-space"> </span><a href="http://www.hongkiat.com/blog/free-responsive-wordpress-themes/" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">best</a><span class="Apple-converted-space"> </span><a href="http://www.hongkiat.com/blog/premium-wordpress-responsive-themes/" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">WordPress</a><span class="Apple-converted-space"> </span>and<span class="Apple-converted-space"> </span><a href="http://www.hongkiat.com/blog/free-joomla-responsive-themes/" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Joomla</a><span class="Apple-converted-space"> </span>responsive themes you can download and use on your site. Today, we’re going to give you<span class="Apple-converted-space"> </span><b style="font-weight: bold;">the tools</b>. Comprise of frameworks, services, and downloadble scripts, we think they are going to be a great help when it comes to responsive web development.</div><h3 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 10px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.blogger.com/blogger.g?blogID=1246240910537268411" name="grid" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 28px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;"></a>Grid & Frameworks</h3><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.hongkiat.com/blog/rwd-tools/#shortcuts" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">[Back to top]</a></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Columnal</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.columnal.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Columnal</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="395" src="http://media02.hongkiat.com/rwd-tools/columnal.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Skeleton</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.getskeleton.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Skeleton</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="420" src="http://media02.hongkiat.com/rwd-tools/skeleton.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">LessFramework 4</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://lessframework.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Less Framework</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="386" src="http://media02.hongkiat.com/rwd-tools/less_framework.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="542" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Semantic Grid System</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://semantic.gs/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Semantic Grid System</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="393" src="http://media02.hongkiat.com/rwd-tools/semantic_grid.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Golden Grid System</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://goldengridsystem.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Golden Grid System</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="390" src="http://media02.hongkiat.com/rwd-tools/golden_grid.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">320 And Up</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://stuffandnonsense.co.uk/projects/320andup/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">320 and Up</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="397" src="http://media02.hongkiat.com/rwd-tools/320.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Inuit.Css</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://csswizardry.com/inuitcss/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Inuit.css</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="403" src="http://media02.hongkiat.com/rwd-tools/inuitcss.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Gridless</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://thatcoolguy.github.com/gridless-boilerplate/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Gridless</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="385" src="http://media02.hongkiat.com/rwd-tools/gridless.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">1140 CSS Grid</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://cssgrid.net/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">1140 CSS Grid</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="394" src="http://media02.hongkiat.com/rwd-tools/1140gris.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">1KBCSSGrid</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.1kbgrid.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">1KB CSS Grid</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="377" src="http://media02.hongkiat.com/rwd-tools/1kb_grid.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Bootstrap</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://twitter.github.com/bootstrap/index.html" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Bootstrap</a>, 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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="399" src="http://media02.hongkiat.com/rwd-tools/bootstrap.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Fluid Grid Calculator</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://csswizardry.com/fluid-grids/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">This simple tool</a><span class="Apple-converted-space"> </span>will help you to quickly grab the CSS of your fluid grid website design.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="393" src="http://media02.hongkiat.com/rwd-tools/fluid_calculator.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Fluid Grids</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://fluidgrids.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Fluid Grid</a><span class="Apple-converted-space"> </span>is a simple yet useful fluid grid framework, that creates responsive layouts based on 6, 7, 8, 9, 10, 12 or 16 columns.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="390" src="http://media02.hongkiat.com/rwd-tools/fluid_grids.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Flurid</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://kflorence.github.com/flurid/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Flurid</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="385" src="http://media02.hongkiat.com/rwd-tools/flurid.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Gridset</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://gridsetapp.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Gridset</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="411" src="http://media02.hongkiat.com/rwd-tools/gridset.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Gridpak</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://gridpak.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Gridpak</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="379" src="http://media02.hongkiat.com/rwd-tools/gridpak.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">SimpleGrid</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://simplegrid.info/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">SimpleGrid</a>, 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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="398" src="http://media02.hongkiat.com/rwd-tools/simplegrid.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Susy</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://susy.oddbird.net/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Susy</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="421" src="http://media02.hongkiat.com/rwd-tools/susy.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Tiny Fluid Grid</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.tinyfluidgrid.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Tiny Fluid Grid</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="387" src="http://media02.hongkiat.com/rwd-tools/tiny_grid.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Variable Grid System</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://grids.heroku.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Variable Grid System</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="460" src="http://media02.hongkiat.com/rwd-tools/variable_grid.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h3 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 10px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.blogger.com/blogger.g?blogID=1246240910537268411" name="wireframes" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 28px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;"></a>Sketch Sheets & Wireframes</h3><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.hongkiat.com/blog/rwd-tools/#shortcuts" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">[Back to top]</a></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Responsive Web Design Sketch Sheets</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">This tool</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="388" src="http://media02.hongkiat.com/rwd-tools/responsive_sketchsheets.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Responsive Wireframes</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.thismanslife.co.uk/projects/lab/responsivewireframes/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Responsive Wireframes</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="398" src="http://media02.hongkiat.com/rwd-tools/responsive_wireframes.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">StyleTiles</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://styletil.es/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Style Tiles</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="390" src="http://media02.hongkiat.com/rwd-tools/styletiles.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h3 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 10px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.blogger.com/blogger.g?blogID=1246240910537268411" name="jquery" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 28px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;"></a>JavaScript & JQuery Plugins</h3><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.hongkiat.com/blog/rwd-tools/#shortcuts" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">[Back to top]</a></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Adapt.Js</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://adapt.960.gs/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Adapt.js</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="459" src="http://media02.hongkiat.com/rwd-tools/adapt.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Isotope</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://isotope.metafizzy.co/index.html" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Isotope</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="396" src="http://media02.hongkiat.com/rwd-tools/isotope.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Masonry</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://masonry.desandro.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Masonry</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="469" src="http://media02.hongkiat.com/rwd-tools/masonry.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="548" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Respond.Js</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="https://github.com/scottjehl/Respond" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Respond.js</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="494" src="http://media02.hongkiat.com/rwd-tools/respond.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">TinyNav.Js</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://tinynav.viljamis.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">TinyNav.js</a><span class="Apple-converted-space"> </span>is a small and lightweight jQuery plugin, only 362 bytes, that converts big navigation lists into small dropdown menus for smaller screens.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="395" src="http://media02.hongkiat.com/rwd-tools/tinynav.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Wookmark JQuery Plugin</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.wookmark.com/jquery-plugin" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Wookmark</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="392" src="http://media02.hongkiat.com/rwd-tools/wookmark.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h3 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 10px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.blogger.com/blogger.g?blogID=1246240910537268411" name="testing" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 28px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;"></a>Testing & Preview</h3><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.hongkiat.com/blog/rwd-tools/#shortcuts" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">[Back to top]</a></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">ProtoFluid</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://protofluid.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">ProtoFluid</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="418" src="http://media02.hongkiat.com/rwd-tools/proto_fluid.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Responsive.Is</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://responsive.is/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Responsive.Is</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="399" src="http://media02.hongkiat.com/rwd-tools/responsive.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Responsivepx.Com</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://responsivepx.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">ResponsivePx</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="387" src="http://media02.hongkiat.com/rwd-tools/responsivepx.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Responsive Web Design Testing Tool</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">An awesome<span class="Apple-converted-space"> </span><a href="http://mattkersley.com/responsive/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">testing tool</a>, 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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="393" src="http://media02.hongkiat.com/rwd-tools/responsive_testing.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">ReView.Js</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://responsiveviewport.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">ReView</a><span class="Apple-converted-space"> </span>is a dynamic viewport system, developed in pure JavaScript, which gives you a fantastic viewing experience for your responsive Web design.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="412" src="http://media02.hongkiat.com/rwd-tools/review.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Screenfly</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://quirktools.com/screenfly/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Screenfly</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="374" src="http://media02.hongkiat.com/rwd-tools/screenfly.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Screenqueri.Es</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://screenqueri.es/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Screenqueri.es</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="384" src="http://media02.hongkiat.com/rwd-tools/screenqueri.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">The Responsinator</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Test your site in various devices from an iPhone and iPad, to a Kindle and on Android on the<a href="http://www.responsinator.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Responsinator</a>. 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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="390" src="http://media02.hongkiat.com/rwd-tools/responsinator.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h3 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 10px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.blogger.com/blogger.g?blogID=1246240910537268411" name="sliders" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 28px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;"></a>Sliders</h3><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.hongkiat.com/blog/rwd-tools/#shortcuts" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">[Back to top]</a></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Blueberry</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://marktyrrell.com/labs/blueberry/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Blueberry</a><span class="Apple-converted-space"> </span>is a fantastic open source jQuery image slider, which is written to specifically work for fluid or responsive layouts.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="391" src="http://media02.hongkiat.com/rwd-tools/blueberry.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Elastislide</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Want a carousel that will automatically adjust to screen size when the browser window is resized or when you are in a smaller screen?<span class="Apple-converted-space"> </span><a href="http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Elastislide</a><span class="Apple-converted-space"> </span>is the most suitable jQuery plugin for your needs.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="392" src="http://media02.hongkiat.com/rwd-tools/elastislide.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Responsive CSS3 Slider</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">This is a pure<span class="Apple-converted-space"> </span><a href="http://responsive-slides.viljamis.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">responsive CSS3 slider</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="393" src="http://media02.hongkiat.com/rwd-tools/responsive_css3_slider.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">ResponsiveSlides.Js</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://responsive-slides.viljamis.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">ResponsiveSlides.Js</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="395" src="http://media02.hongkiat.com/rwd-tools/responsive_slides.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h3 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border-bottom-color: rgb(0, 0, 0); border-bottom-style: solid; border-width: 0px 0px 1px; color: #252525; font-family: 'Droid Serif', Georgia, 'Times New Roman', Times, serif; font-size: 2.3em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 10px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.blogger.com/blogger.g?blogID=1246240910537268411" name="others" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 28px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;"></a>Others</h3><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.hongkiat.com/blog/rwd-tools/#shortcuts" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">[Back to top]</a></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Adaptive Images</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://adaptive-images.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Adaptive Images</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="398" src="http://media02.hongkiat.com/rwd-tools/adaptive_images.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">FitText.Js</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://fittextjs.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">FitText.js</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="393" src="http://media02.hongkiat.com/rwd-tools/fittext.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">FitVid.Js</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Want to rescale the embedded videos when the browser window is resized or the device is of smaller resolution?<span class="Apple-converted-space"> </span><a href="http://fitvidsjs.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">FitVid.Js</a><span class="Apple-converted-space"> </span>can help you acheive this. It is a lightweight, simple, easy-to-use jQuery plugin used to achieve fluid width embedded videos.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="432" src="http://media02.hongkiat.com/rwd-tools/fitvid.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Retina Images</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://retina-images.complexcompulsions.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Retina Images</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="394" src="http://media02.hongkiat.com/rwd-tools/retina_images.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Seamless Responsive Photo Grid</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://css-tricks.com/seamless-responsive-photo-grid/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Seamless Responsive Photo Grid</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="397" src="http://media02.hongkiat.com/rwd-tools/photo_grids.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">SlabText</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.frequency-decoder.com/demo/slabText/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">SlabText</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="442" src="http://media02.hongkiat.com/rwd-tools/slabtext.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Zurb – ResponsiveTables</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Have you ever wondered how to deal with the big data tables in responsive design?<span class="Apple-converted-space"> </span><a href="http://www.zurb.com/playground/responsive-tables" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Zurb</a>, 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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="456" src="http://media02.hongkiat.com/rwd-tools/zurb.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Categorizr</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.brettjankord.com/2012/01/16/categorizr-a-modern-device-detection-script/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Categorizr</a><span class="Apple-converted-space"> </span>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.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="489" src="http://media02.hongkiat.com/rwd-tools/categorizr.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Media Query Bookmarklet</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://seesparkbox.com/foundry/media_query_bookmarklet" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">Media Query Bookmarklet</a><span class="Apple-converted-space"> </span>shows you what size the current viewport has and which media query was just fired for it.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img height="439" src="http://media02.hongkiat.com/rwd-tools/media_query_bookmark.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div><h4 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #252525; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.8em; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.25em; margin: 35px 0px 0px; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: capitalize; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">The Responsive Calculator</h4><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://rwdcalc.com/" rel="external" style="border: 0px; color: #133c9a; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; padding: 0px; text-decoration: underline; vertical-align: baseline;">The Responsive Calculator</a><span class="Apple-converted-space"> </span>is a very simple online tool that can help you to turn pixels into percentages while designing your responsive website.</div><div class="s450-550" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: white; border: 0px; color: #3c3c3c; font-family: 'Droid Sans', Helvetica, Arial, sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; orphans: auto; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"></div><div class="s450-550" style="background-color: white; border: 0px none; color: #3c3c3c; font-family: 'Droid Sans',Helvetica,Arial,sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; word-spacing: 0px;"></div><div class="s450-550" style="background-color: white; border: 0px none; color: #3c3c3c; font-family: 'Droid Sans',Helvetica,Arial,sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; word-spacing: 0px;"></div><div class="s450-550" style="background-color: white; border: 0px none; color: #3c3c3c; font-family: 'Droid Sans',Helvetica,Arial,sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; word-spacing: 0px;"></div><div class="s450-550" style="background-color: white; border: 0px none; color: #3c3c3c; font-family: 'Droid Sans',Helvetica,Arial,sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; word-spacing: 0px;"></div><div class="s450-550" style="background-color: white; border: 0px none; color: #3c3c3c; font-family: 'Droid Sans',Helvetica,Arial,sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; word-spacing: 0px;"></div><div class="s450-550" style="background-color: white; border: 0px none; color: #3c3c3c; font-family: 'Droid Sans',Helvetica,Arial,sans-serif; font-size: 1.15em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.65em; margin: 0.55em 0px 1.8em; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; word-spacing: 0px;"><img height="393" src="http://media02.hongkiat.com/rwd-tools/responsive_calc.jpg" style="border: 1px solid rgb(255, 255, 255) !important; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; max-width: 640px; padding: 0px; vertical-align: baseline;" width="550" /></div>Courtesy: http://www.hongkiat.com/blog/rwd-tools/

50 Useful Responsive Web Design Tools For Designers

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...

Read more »

10 Tools & Frameworks for Responsive Design

<div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Like webfonts,<span class="Apple-converted-space"> </span><a href="http://www.alistapart.com/articles/responsive-web-design/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">responsive design</a><span class="Apple-converted-space"> </span>wasn’t something you heard much about until CSS3 specs started making it into popular browsers. Now, it’s the cool thing to do, and for good reason — it means one site to maintain for all devices. But it’s also a really challenging approach to web design. In this article, we look at 10 tools that’ll help you handle the challenge.</div><h2 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; clear: left; color: #fc7600; font-family: Helvetica, Arial, sans-serif; font-size: 2.25em; font-style: normal; font-variant: normal; font-weight: inherit; letter-spacing: normal; line-height: 1.15em; margin: 20px 100px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">320 and up</h2><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.stuffandnonsense.co.uk/projects/320andup/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="320andup" class="size-full wp-image-1453 aligncenter" height="208" src="http://fuelyourcoding.com/files/320andup.jpg" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 15px; vertical-align: baseline;" title="320andup" width="592" /></a></div><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Most responsive designs are built with full desktop size in mind and scaled down from there. Andy and Keith Clark, the developers behind 320 and up, believe the opposite approach works best: design for the small screen, and implement the layout working upwards in size.<span class="Apple-converted-space"> </span><a href="http://www.stuffandnonsense.co.uk/projects/320andup/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">320 and up</a>contains Media Query increments for five viewport sizes, a vertical grid, preset styles for typography and components from HTML5 Boilerplate.</div><div id="_mcePaste" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: normal; height: 1px; left: -10000px; letter-spacing: normal; line-height: 10px; margin: 0px; orphans: auto; outline: 0px; overflow: hidden; padding: 0px; position: absolute; text-align: start; text-indent: 0px; text-transform: none; top: 0px; vertical-align: baseline; white-space: normal; widows: auto; width: 1px; word-spacing: 0px;">inuit.css</div><div id="_mcePaste" style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: normal; height: 1px; left: -10000px; letter-spacing: normal; line-height: 10px; margin: 0px; orphans: auto; outline: 0px; overflow: hidden; padding: 0px; position: absolute; text-align: start; text-indent: 0px; text-transform: none; top: 0px; vertical-align: baseline; white-space: normal; widows: auto; width: 1px; word-spacing: 0px;">inuit.css is a HTML5 framework that uses a grid system that scales down to small screens ‘out of the box’. It’s a minimalist approach, giving you just what you need to get started without unnecessary styles, but it’s extensible and there are a range of handy plugins available for it — such as one that creates breadcrumb trails out of ordered lists.</div><h2 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; clear: left; color: #fc7600; font-family: Helvetica, Arial, sans-serif; font-size: 2.25em; font-style: normal; font-variant: normal; font-weight: inherit; letter-spacing: normal; line-height: 1.15em; margin: 20px 100px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">inuit.css</h2><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://csswizardry.com/inuitcss/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="inuitcss" class="size-full wp-image-1456 aligncenter" height="300" src="http://fuelyourcoding.com/files/inuitcss.jpg" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 15px; vertical-align: baseline;" title="inuitcss" width="592" /></a></div><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://csswizardry.com/inuitcss/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">inuit.css</a><span class="Apple-converted-space"> </span>is a HTML5 framework that uses a grid system that scales down to small screens ‘out of the box’. It’s a minimalist approach, giving you just what you need to get started without unnecessary styles, but it’s extensible and there are a range of handy plugins available for it — such as one that creates breadcrumb trails out of ordered lists.</div><h2 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; clear: left; color: #fc7600; font-family: Helvetica, Arial, sans-serif; font-size: 2.25em; font-style: normal; font-variant: normal; font-weight: inherit; letter-spacing: normal; line-height: 1.15em; margin: 20px 100px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Skeleton</h2><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://getskeleton.com/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="skeleton" class="size-full wp-image-1457 aligncenter" height="374" src="http://fuelyourcoding.com/files/skeleton.jpg" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 15px; vertical-align: baseline;" title="skeleton" width="592" /></a></div><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://getskeleton.com/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Skeleton</a><span class="Apple-converted-space"> </span>is a light collection of CSS and JavaScript files that make designing responsive sites based on the 960px grid easy. Skeleton includes some basic styling and typography presets to get you out of the gate quickly. This project is the brainchild of Dave Gamache, formerly of esteemed UX firm ZURB and now on Twitter’s design team.</div><h2 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; clear: left; color: #fc7600; font-family: Helvetica, Arial, sans-serif; font-size: 2.25em; font-style: normal; font-variant: normal; font-weight: inherit; letter-spacing: normal; line-height: 1.15em; margin: 20px 100px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Less Framework</h2><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://lessframework.com/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="lessframework" class="size-full wp-image-1458 aligncenter" height="351" src="http://fuelyourcoding.com/files/lessframework.jpg" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 15px; vertical-align: baseline;" title="lessframework" width="592" /></a></div><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://lessframework.com/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Less Framework</a><span class="Apple-converted-space"> </span>is a CSS starter with four layouts — default at 992px, and tablet, mobile and wide mobile sizes — based on a grid system and including a selection of typography presets. Because Less Framework is one of the most popular options, there’s a range of supporting tools such as a Rails gem, OmniGraffle stencil and Compass plugin built around Less.</div><h2 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; clear: left; color: #fc7600; font-family: Helvetica, Arial, sans-serif; font-size: 2.25em; font-style: normal; font-variant: normal; font-weight: inherit; letter-spacing: normal; line-height: 1.15em; margin: 20px 100px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">BluCSS</h2><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.designlunatic.com/projects/blucss/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="blucss" class="size-full wp-image-1459 aligncenter" height="289" src="http://fuelyourcoding.com/files/blucss.jpg" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 15px; vertical-align: baseline;" title="blucss" width="592" /></a></div><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.designlunatic.com/projects/blucss/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">BluCSS<span class="Apple-converted-space"> </span></a>is a CSS framework that, as usual, uses a flexible grid to facilitate responsive design. One feature that stands out is its responsive images, something many of these frameworks leave out; apply a class to your images and they’ll scale with your design. No need to include multiple files at multiple sizes, though be wary of unnecessary load on mobile devices with this approach.</div><h2 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; clear: left; color: #fc7600; font-family: Helvetica, Arial, sans-serif; font-size: 2.25em; font-style: normal; font-variant: normal; font-weight: inherit; letter-spacing: normal; line-height: 1.15em; margin: 20px 100px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Mobile Boilerplate</h2><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://html5boilerplate.com/mobile" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="mobileboilerplate" class="size-full wp-image-1460 aligncenter" height="186" src="http://fuelyourcoding.com/files/mobileboilerplate.jpg" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 15px; vertical-align: baseline;" title="mobileboilerplate" width="592" /></a></div><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">From the developers behind the famous HTML5 Boilerplate comes<span class="Apple-converted-space"> </span><a href="http://html5boilerplate.com/mobile" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Mobile Boilerplate</a>, a responsive template that puts the focus on mobile devices, namely those running Android, iOS, Blackberry and Symbian software. Everything from viewport scaling to HTML5 offline caching to home screen icons are ready to go.</div><h2 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; clear: left; color: #fc7600; font-family: Helvetica, Arial, sans-serif; font-size: 2.25em; font-style: normal; font-variant: normal; font-weight: inherit; letter-spacing: normal; line-height: 1.15em; margin: 20px 100px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Tiny Fluid Grid</h2><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://www.tinyfluidgrid.com/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="tinyfluidgrid" class="size-full wp-image-1461 aligncenter" height="265" src="http://fuelyourcoding.com/files/tinyfluidgrid.jpg" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 15px; vertical-align: baseline;" title="tinyfluidgrid" width="592" /></a></div><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">If you find all these CSS frameworks to be too much for your needs,<span class="Apple-converted-space"> </span><a href="http://www.tinyfluidgrid.com/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Tiny Fluid Grid</a><span class="Apple-converted-space"> </span>may be the alternative you’re looking for. Simply tell it how many columns your grid will need, how big you want your gutters and how wide the site will be, and this site will spit out a responsive fluid grid you can use right away.</div><h2 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; clear: left; color: #fc7600; font-family: Helvetica, Arial, sans-serif; font-size: 2.25em; font-style: normal; font-variant: normal; font-weight: inherit; letter-spacing: normal; line-height: 1.15em; margin: 20px 100px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Golden Grid System</h2><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://goldengridsystem.com/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="goldengrid" class="size-full wp-image-1462 aligncenter" height="217" src="http://fuelyourcoding.com/files/goldengrid.jpg" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 15px; vertical-align: baseline;" title="goldengrid" width="592" /></a></div><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">The<span class="Apple-converted-space"> </span><a href="http://goldengridsystem.com/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Golden Grid System</a><span class="Apple-converted-space"> </span>is a 16 column grid that uses a folding method inspired by the DIN paper system to collapse down to 8 columns on tablet-size screens and 4 columns on mobile screens, making it work for designs that range from 240 to 2560 pixels wide. The GGS developers say their folding method is superior to others because the gutters are better at staying in proportion with the content, producing less of a squeezed (or sparse, depending on direction) look.</div><h2 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; clear: left; color: #fc7600; font-family: Helvetica, Arial, sans-serif; font-size: 2.25em; font-style: normal; font-variant: normal; font-weight: inherit; letter-spacing: normal; line-height: 1.15em; margin: 20px 100px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">1140 CSS Grid</h2><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: center; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><a href="http://cssgrid.net/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="1140" class="size-full wp-image-1463 aligncenter" height="247" src="http://fuelyourcoding.com/files/1140.jpg" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 15px; vertical-align: baseline;" title="1140" width="592" /></a></div><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">The<span class="Apple-converted-space"> </span><a href="http://cssgrid.net/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">1140 CSS Grid</a><span class="Apple-converted-space"> </span>takes the opposite approach of the 320 and up system. This is primarily aimed at people who really want to design for a wider 1280 pixel screen, and are sick of catering to a 1024 pixel baseline. 1140 CSS Grid allows them to do that while fluidly re-arranging to fit on smaller screens all the way down to mobile.</div><h2 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; clear: left; color: #fc7600; font-family: Helvetica, Arial, sans-serif; font-size: 2.25em; font-style: normal; font-variant: normal; font-weight: inherit; letter-spacing: normal; line-height: 1.15em; margin: 20px 100px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Respond.js</h2><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Even before you start working on a responsive design, you may be worried about visitors using browsers that don’t support media queries, the CSS3 feature that responsive sites depend on. With<span class="Apple-converted-space"> </span><a href="https://github.com/scottjehl/Respond" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" target="_blank">Respond.js</a>, this problem is easily solved; the script makes min-width and max-width work in Internet Explorer 6, 7 and 8, and should work with other browsers lacking support.</div><h2 style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; clear: left; color: #fc7600; font-family: Helvetica, Arial, sans-serif; font-size: 2.25em; font-style: normal; font-variant: normal; font-weight: inherit; letter-spacing: normal; line-height: 1.15em; margin: 20px 100px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">Bonus: ZURB Foundation</h2><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;"><img alt="foundation" class="aligncenter size-full wp-image-1472" height="412" src="http://fuelyourcoding.com/files/foundation.jpg" style="background-color: white; background-position: initial initial; background-repeat: initial initial; border: 1px solid rgb(221, 221, 221); font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 15px; vertical-align: baseline;" title="foundation" width="592" /></div><div style="-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: #f8f8f8; border: 0px; color: #555555; font-family: Helvetica, Arial, sans-serif; font-size: 1.4em; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 1.4em; margin: 0px 20px 15px 0px; orphans: auto; outline: 0px; padding: 0px; text-align: start; text-indent: 0px; text-transform: none; vertical-align: baseline; white-space: normal; widows: auto; word-spacing: 0px;">ZURB’s<span class="Apple-converted-space"> </span><a href="http://foundation.zurb.com/" style="border: 0px; color: #fc7600; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Foundation</a><span class="Apple-converted-space"> </span>is a newer entry among responsive design frameworks, and is one of the most promising, having already won over many users of other frameworks. Billed as an easy-to-use yet powerful framework for building both prototypes and production deployments that work across all kinds of devices, Foundation makes use of a flexible grid, a library of styles and elements for rapid prototyping, and professes to take the pain out of creating layouts for different formats with the same markup.<br /><br />courtesy :http://speckyboy.com/2012/11/05/10-lightweight-minimal-responsive-grid-frameworks/ </div>

10 Tools & Frameworks for Responsive Design

Like webfonts,   responsive design   wasn’t something you heard much about until CSS3 specs started making it into popular browsers. Now, it...

Read more »

7 Exciting Web Development Trends for 2011

At the end of December, you read Andrew’s list of the <a href="http://net.tutsplus.com/articles/web-roundups/the-top-150-web-development-highlights-from-2010/">hottest technologies, tools, and resources</a> to come from 2010. Today, we’re going to look forward, and take a peek at some exciting emerging technologies and trends.<br /><span id="more-17385"></span><br /><hr /><h2>A Word from the Author</h2>The tools and technologies that we, as web developers, work with is in a state of constant flux, much like every other industry. What separates us from the rest is that we have to learn, unlearn and relearn new developments at a much faster rate, much more frequently.<br /><blockquote>Today, I’d like to talk about a few technologies and trends that I think are going to be quite important in the coming year: a pseudo prediction/wish list/<em>what we’re going to cover this year</em> post of sorts.</blockquote>The technologies listed below weren’t exactly hatched recently. In fact, some are quite old and have been in use for a while now, in their insular niches. That said, I do feel that this is the year they gain even more <em>mainstream awareness</em>. As a great man once said, <em>An invasion of armies can be resisted, but not an idea whose time has come</em>. Let’s get started!<br /><hr /><h2><span>1. </span>noSQL</h2><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/just-say-nosql.png" style="display: inline;" /></div>Why are people excited about noSQL? And by people, I mean some of the big fishes including Google, Facebook and Twitter. For one, the concept of noSQL has redefined the way we perceive databases and the corresponding interactions.<br /><blockquote class="pullquote">Sometimes, you simply want to store and have access to your data, with low latency and excellent scalability.</blockquote>Databases, historically, have almost always been about implementing the relational model and being fully ACID-compliant. If your transactions weren’t ACID, or your database wasn’t relational, people scoffed at you for being a “kiddie” database.<br />The issue is the relational model isn’t really necessary everywhere. Neither is ACID, though many noSQL implementations enforce some sort of data integrity and consistency. Sometimes, you simply want to store and have access to your data, with low latency and excellent scalability. Applications with massive amounts of read/write operations are an excellent choice.<br />Another big factor for me is the simplicity it brings to my schema: your data models can now become a lot more sane. I can’t wait to <em>not</em> muck around with my models just to make it fit into the relational model.<br /><hr /><h2>Implementations of Interest</h2><h3>noSQL at Facebook</h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/cassandra.png" style="display: inline;" /></div>There maybe no better example than Facebook when it comes to how to handle enormous traffic. It’s no surprise that traditional methods of scaling won’t quite work for Facebook.<br />Now part of the Apache Foundation, Cassandra, a noSQL implementation, was developed in-house to help with searching data. Currently, it powers Facebook’s inbox search.<br />Facebook also makes use of another noSQL solution, HBase, for its messaging platform.<br /><h3>noSQL at Twitter</h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/hadoop-hbase.gif" style="display: inline;" /></div>Twitter’s reliability used to be, well, infamous. On of the main reasons was that their setup wasn’t really scaling all that well. Twitter now uses a mix of SQL and noSQL to manage their data.<br />Just like Facebook, Twitter uses a mix of Cassandra and HBase. Cassandra is used for all the front facing applications while HBase is used to data mining, analysis and analytics.<br /><hr /><h2><span>2. </span>Serverside JavaScript</h2>JavaScript is, arguably, the most important language for the next few years — and for good reason. Much of the cruft and idiosyncrasies associated with the language is more due to browser quirks, and less due to the design of the language itself.<br />It has been satisfied with residing merely in the browser for a long time, however, this trend is changing. Implementations and interest in server side JavaScript has been growing over the past year and I fully expect it to explode even further this year, thanks to the screamingly fast JavaScript engines to run your code on.<br />To the people questioning the need for JavaScript on the server side, I present you with this single situation, among lots of others.<br /><blockquote>Whatever your backend language of choice is, you’re ultimately going to come back to JavaScript for constructing the frontend. Wouldn’t it be easier to simply use JavaScript universally?</blockquote><hr /><h2>Technologies of Interest</h2><h3><a href="http://nodejs.org/">node.js</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/nodejs.png" style="display: inline;" /></div>node.js makes creating real-time, high performance, scalable applications a cinch. It’s primarily event-driven and runs on V8, the JavaScript engine that powers Chrome and makes it freakishly fast.<br />It doesn’t spawn a separate thread for each connection like most others. Instead it works through asynchronous operation which significantly minimizes latency. If it has stopped making sense, remember to read a <a href="http://net.tutsplus.com/tutorials/javascript-ajax/learning-serverside-javascript-with-node-js/">primer on node.js</a> published right here on Nettuts+. We’ll also be covering this topic extensively over the next few months so stay tuned!<br /><hr /><h2><span>3. </span>Easier Hosting, Deployment and Scaling</h2><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/cloud-computing.jpg" style="display: inline;" /></div><blockquote class="pullquote">Bottom line, scaling is a pain.</blockquote>The rise of <em>as a service</em> businesses have only helped developer tangentially in the past. Most of them were ports of functionality that we <em>required</em>, with the exception of maybe project and bug tracking. Recently, a number of services have opened up that significantly ease up a developer’s life.<br />Deployment has always been an issue with non-trivial web applications since you need to do more than copy over the files to the server. Scaling, too, has been an issue — not just in bandwidth, but in computing capacity as well. We must setup load balancers, a caching system, maybe even a lightweight server to serve up static content. Bottom line, scaling is a pain. It’s a rather involved activity, especially when you’re strapped for time.<br /><em>Platforms as a service</em>, as they’re popularly called, remove almost all of the hassle for a developer. Deploying? Merely push to a git repo and everything is handled for you. Expecting a massive rush of traffic and worried whether your application will buckle down? Merely add more nodes or workers to your instance and you’re done.<br /><hr /><h2>Services of Interest</h2><h3><a href="http://heroku.com/">Heroku</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/7tdkj69n.jpg" style="display: inline;" /></div>Heroku is a perfect example of the simplicity services like these can bring to the table. Deploying to my app is really just pushing code to my github repo. Computing capacity and memory, among others, can be dynamically allocated as well. As an added incentive, a lot of noSQL solutions are available as well to be used, including Redis and MongoDB.<br /><h3><a href="http://aws.amazon.com/">Amazon’s Web Services</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/bzb2b2v8.jpg" style="display: inline;" /></div>Amazon Web Services is an umbrella term for a number of awesome services they run. The ones of interest today are:<br /><ul><li><em>Amazon Elastic Compute Cloud</em> [EC2] let’s you create virtual servers that are incredibly scalable. You just need to choose the amount of power you require.</li><li><em>Amazon Simple Storage Service </em>[S3] provides cheap, reliable web based storage. All Envato sites and marketplaces use S3 almost exclusively to store and serve content.</li></ul><hr /><h2><span>4. </span>Utility JS Libraries</h2>Even though we have a massive number of JavaScript libraries that abstract away some of the more mundane tasks, like DOM manipulation and AJAX, they leave a lot of functionality untouched.<br />We saw a number of utility libraries, such as <a href="http://www.modernizr.com/">Modernizr</a> that gained immense popularity last year — a sign that developers are always looking for nifty libraries that let them use cutting edge technology whilst saving time. This year should be even. Here are a few tools that might pique your interest.<br /><hr /><h2>Libraries of Interest</h2><h3><a href="http://headjs.com/">Head.JS</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/headjs.jpg" style="display: inline;" /></div>This library is a true powerhouse. It takes care of loading your scripts in a parallel nature, mimics Modernizr by adding specific classes to your document and much more. Definitely a much watch!<br /><div class="tutorial_image"> <ins style="border: none; display: inline-table; height: 250px; margin: 0; padding: 0; position: relative; visibility: visible; width: 300px;"><ins id="aswift_0_anchor" style="border: none; display: block; height: 250px; margin: 0; padding: 0; position: relative; visibility: visible; width: 300px;"></ins></ins></div><h3><a href="http://documentcloud.github.com/underscore/">underscore.JS</a></h3><div class="tutorial_image"><img alt="Tutorial Image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/underscore.jpg" style="display: inline;" /></div>This is pure utility library that brings a powerful set of utility methods to JavaScript without extending the native types underneath. Similar to how jQuery maps to the <code>$</code> characters by default, underscore maps to the <code>_</code> character. Check out the site for a full rundown of the utility functions it contains.<br /><h3><a href="http://mustache.github.com/">mustache.JS</a></h3><div class="tutorial_image"> </div>This is a simple templating library that should make handling data much more simpler. You simply need to create a custom template, map it to your data and run the code. If you’re even the least bit interested, you should check out a <a href="http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-using-the-mustache-template-library/">quick tip</a> we published a couple of months ago!<br /><hr /><h2><span>5. </span>Better Unit Testing for JavaScript</h2>Testing is an integral, intrinsic part of the software development process.<br /><blockquote>Unit testing, specifically, is the testing of individual software components.</blockquote>The difference is that these tests are performed by the developer, since writing tests, in general, requires knowledge of the source.<br />JavaScript has lagged behind other development platforms when it comes to proper testing. Even now, unit testing is not an oft heard statement among typical JavaScript developers and part of the reason is the lack of proper tools to do so. Here are a few tools that should make it significantly easier for you to test your code:<br /><hr /><h2>Tools of Interest</h2><h3><a href="http://docs.jquery.com/Qunit">QUnit</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/how-to-test-your-javascript-code-with-qunit-2010020309015624-iseven%20test%20png.png" style="display: inline;" /></div>Made by the jQuery team and used as the official test suite for the platform, QUnit is a powerful unit testing framework. It can test any generic piece of JavaScript code, even code that needs to be executed inside a JavaScript engine.<br /><h3><a href="http://fireunit.org/">FireUnit</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/fireunit-ui-thumb.png" style="display: inline;" /></div>FireUnit is implemented as a Firefox extension and requires Firebug. This may be good or bad depending on your perspective. For me, since Firebug already is a big part of my development workflow, this is a boon. FireUnit adds an additional <em>test</em> tab to Firebug through which you can access your tests and results.<br /><h3><a href="http://www.jsunit.net/">JsUnit</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/JSUnit.jpg" style="display: inline;" /></div>JsUnit is an open source testing framework for JavaScript. Inspired by JUnit, it’s written entirely in JavaScript and runs inside your browser. It also includes a platform for automating the execution of tests.<br /><hr /><h2><span>6. </span>Raphael-esque Libraries for Canvas</h2>HTML5 brought us the canvas element which opened up new vistas for us. It provided low level, per pixel control over the drawing area which was unheard of before. Previously, you’d usually have to resort to either rendering an image in the backend and relay it or using a browser plugin.<br /><blockquote>Canvas is a game changer in that aspect.</blockquote>The issue here is that it is <em>truly low level</em>. Per pixel control is nice but when you’re trying to create something bigger, you’ll want these details abstracted from you. Kind of like how Raphael abstracts the details from the SVG element. And mind you, SVG is a lot more easier to work with.<br />Libraries like the one I’m looking for aren’t really limited to merely providing interfaces for shapes and so on. A number of <em>game</em> libraries have even been released which let you work at an ever higher level.<br /><hr /><h2>Libraries of Interest</h2><h3><a href="http://processingjs.org/">Processing.JS</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/banner1.png" style="display: inline;" /></div>Processing.JS is an excellent library that provides a high level interface to the canvas element. It’s a JavaScript port of the Processing, a fun, little language to help non-programmers understand programming.<br />The library completely abstracts you from the initialization and other trivialities of the canvas element and let’s you create incredibly suave content.<br /><h3><a href="http://www.kesiev.com/akihabara/">Akihabara</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/4810592758_26afaf2689_b.jpg" style="display: inline;" /><a href="http://www.lostdecadegames.com/onslaught_arena">Onslaught! Arena, a HTML5 canvas game</a></div>Akihabara is an extensive library that let’s you create games rapidly. As expected, it makes use of the canvas element.<br />It helps you with a large number of tasks including rendering, collisions and input. Even, relatively, esoteric features like z-indexed objects and double buffering* are supported.<br /><div style="font-size: 8px; margin-top: -15px;">* If you understand what this means, you get a cookie!</div><hr /><h2><span>7. </span>True JavaScript Frameworks</h2><blockquote class="pullquote">Server side development has it good.</blockquote>Server side development has it good. You have plenty of choices, regardless of which language you’ve chosen to work with; you can choose anything between a modular pick-your-component frameworks, to all encompassing full stack frameworks, to everything in between.<br />In the front end though, we’ve had to work with <em>libraries</em> instead of <em>frameworks</em>, even though there is only one language to deal with: JavaScript. DOM manipulation and other assorted functionalities are abstracted away, sure, but when building a complete UI for an application, low level functions like these are but a fraction of your worries.<br />Usually, you’d have to choose something for your templating needs, UI and widgets, dependency management, DOM manipulation, MVC and other assorted functionalities. A number of frameworks have been slowly gaining momentum that, even though aren’t quite all encompassing, promise a much better front end development experience.<br /><hr /><h2>Technologies of Interest</h2><h3><a href="http://www.sproutcore.com/">SproutCore</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/mobileme.jpg" style="display: inline;" /></div>SproutCore is a JavaScript framework, originating from Apple, that lets users create desktop like web applications rapidly. Needless to say, the entire frontend requires only JavaScript.<br />The framework consists of a number of parts including a widget system to handle different parts of the UI and a key value observing system to wire up each part which significantly reduces the amount of glue code in your application.<br /><blockquote>One of the most public facing applications of SproutCore is Apple’s MobileMe.</blockquote><h3><a href="http://cappuccino.org/">Cappucino</a></h3><div class="tutorial_image"><img alt="Tutorial image" src="http://d2o0t5hpnwv4c1.cloudfront.net/892_trends2011/cocoa-cappuccino.jpg" style="display: inline;" /></div>Cappucino, developed by 20North which is now owned by Motorola, takes a completely different approach to such a framework. Cappuccino introduces a focused, small superset of JavaScript called Objective-J.<br />The platform itself consists of the language itself, Objective-J, and a comprehensive library which is a port of the Cocoa frameworks on OS X.<br /><hr /><h2>And That’s a Wrap!</h2>And there we go. I’ve listed seven trends that I’m hoping <em>truly</em> gains <em>mainstream awareness</em> this year. Did I miss anything important? Let us know in the comments. Thank you so much for reading

7 Exciting Web Development Trends for 2011

At the end of December, you read Andrew’s list of the hottest technologies, tools, and resources to come from 2010. Today, we’re going to l...

Read more »