Grid Based Web Design Resources

30 Interesting Twitter Accounts for Designers to Follow When looking for inspiration or resources is always a good idea to look at other designers work or what they're up to, even if it's not design related. Lucky for us, some of the most amazing professionals and publications are kind enough to share their findings and thoughts through social networks.Today we suggest you 30 Twitter accounts that may be interesting to follow if you are a web designer. Enjoy them and share your favourites in the comments section. Smashing Magazine Vitaly Friedman, editor-in-chief of Smashing Magazine, an online magazine for professional Web designers and developers.Chris Kaufman Software designer with a passion for business. Co-Founder and Chief Product Officer at UpTo.Chris Spooner Creative designer, avid blogger and crazy about pretty colours and shapes. Web Developer.

Responsive Web Design just got Easier with the Responsive Grid System 5 Simple and Practical CSS List Styles You Can Copy and Paste Who doesn’t love a good list? We use them constantly in our markup for a variety of different situations. Today we’re going to take a look at a few simple and practical examples that you can steal and use in your own work. We start off with a fun animated vertical list, then style up a list with thumbnails and text, another with just images and finally an ordered list where the numbers are styled differently than the rest of the type. There’s a ton of great things to learn here so let’s jump in! HelvetiList For our first list, we’re going to start with a simple, minimal but super attractive design that’s heavily dependent on the beauty of the typography. Demo: Check out the demo and code on CodePen. Our markup here is dead simple. <div><h2>HelvetiList</h2><ul><li><a href="#">Zurich</a></li><li><a href="#">Geneva</a></li><li><a href="#">Winterthur</a></li><li><a href="#">Lausanne</a></li><li><a href="#">Lucerne</a></li></ul></div> Thumbnail List Demo: Check out the demo and code on CodePen.

Responsive Tables Demo A quick and dirty look at some techniques for designing responsive table layouts. This was put together in haste (and with the aid of Twitter Bootstrap) for What Do You Know Brisbane hosted by Web Directions. I work for a really great little web design agency in Brisbane, and you should say hello. The Unseen Column This technique, first described by Stuart Curry (@irishstu) involves simply hiding less important columns on smaller screen sizes. Example Code The approach I've presented here assumes you know the index of the columns to be hidden. <table> <thead> <tr> <th>Code</th> <th>Company</th> <th class="numeric">Price</th> <th class="numeric">Change</th> <th class="numeric">Change %</th> <th class="numeric">Open</th> <th class="numeric">High</th> <th class="numeric">Low</th> <th class="numeric">Volume</th> </tr> </thead> <tbody> <tr> <td>AAC</td> <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED. Flip Scroll This technique was first published by David Bushell (@dbushell). No More Tables

37 Best Wireframing, Prototyping and Mockup Tools for Web Design and Planning EmailShare 38EmailShare The process of wireframing plays an important role in any web projects especially in the initial stage of the development. It requires web designers and developers to define a skeletal outline of page elements such as header, navigation bar, content area and footer. Here’s a roundup of 37 useful wireframing, prototyping and mockup tools for all areas of design including web pages, software programs and mobile apps. Balsamiq Mockups Balsamiq Mockups is another wireframing tool for web designers and developers. Axure RP Axure RP is the standard in interactive wireframe software and gives you the power to quickly and easily deliver much more than typical mockup tools. Gliffy Gliffy.com is a web-based diagram editor. Omnigraffle Omnigraffle is a diagramming, charting, and visualization software for Mac OS X. Mockflow MockFlow is a full featured wireframe software to design, collaborate user interface mockups for software and websites. (Image Source: Flickr.com) share

Bootstrap 3 Grid Introduction | Hello Erik - User Experience @Erik_UX IMPORTANT NOTE: Bootstrap 4 will be out soon, and it will be moving to Sass for its CSS instead of Less. Most of the principles of this article will still apply – but I will do my best to quickly either rewrite the post for Sass, or just update this post for both. I do not expect huge changes to how the grid HTML classes are applied. Read more here: After over 9-months of work, Bootstrap 3 is here. Bootstrap 2’s grid was very straight forward. Bootstrap 3 has been heavily publicized as being mobile first. Update 8/25/13: There’s been some questions around the ‘net about 100% width sites, “liquid” as we called it in the 90’s. Update 9/27/13: If you like this article, be sure to read the Part 2 about a Bootstrap Less workflow here Bootstrap 3 Less Workflow Tutorial and the Subtle Magic Behind Why the Bootstrap 3 Grid Works. Mobile First CSS Great. Here’s an example of this: See, the actual base style is the mobile style. Mixin