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
UI Animation and UX: A Not-So-Secret Friendship · An A List Apart Article Using the words “animation” and “the web” together tends to conjure up memories of frantic searches for the “skip intro” button to save ourselves from a terrible sensory assault. Animation on the web has hit some pretty sad lows, there’s no arguing that. But adding motion to our work can be meaningful and functional—when we find the right circumstances. Article Continues Below When used as more than just a subtle design detail, animation can provide cues, guide the eye, and soften the sometimes-hard edges of web interactions. It can improve the user experience. A CSS animation refresher#section1 This article uses CSS animations and transitions in the associated examples. CSS animations are what we most closely associate with traditional animation. CSS also has transitions—which, as it happens, can also be used to make things move. In practice, animations and transitions are often used together, so I’ll use the term animation in a general sense to indicate them both. 1. 2. 3.
Responsive Web Design just got Easier with the Responsive Grid System CSS Animated Hamburger Icon · Elijah Manor 04 Mar 2014 Problem I’ve been working more on mobile web these days and thought it would be fun to animate the prolific hamburger nav icon. Non-Animated CSS Hamburger Icon You could use Font Awesome or an image to represent the hamburger, but those aren’t necessary. Instead, you can create a version of the hamburger only using CSS and the following markup. The following CSS will make the span the meat of the hamburger and the before and after pseudo-elements will serve as the buns. The above HTML and CSS are visually represented in the following CodePen. Animated CSS Hamburger Icon Now, we get to the fun stuff… let’s animate this hamburger icon! In CSS we are using a transition and transform to rotate the before and after psuedo-elements and fade-out the middle bar to create our X shape. Note: I am using transition and transform, which is supported in IE10+ & other browsers. Note: The CodePen is using -prefix-free, which automatically adds any necessary vendor prefixes. Conclusion
Grid Based Web Design Resources As a complement to our prior post "30 Grid-Based Websites", we've made a selection of indispensable resources like layout frameworks, tutorials, books, templates and useful tools that can help you understand and implement grid based design in your projects. Let's start with a little history. Many of you know who Massimo Vignelli is, a known designer with a solid modernist influence who developed his career in numerous areas of design. In 1977, he designed the Unigrid System for the National Park Service. The module grid system allowed the creation of brochures in ten basic formats keeping a consistent, recognizable structure. Who knew that 30 years later his work would be the inspiration of a discipline that he couldn't even dream of at that time. Tools & Online Layouts Generators The 892 unique ways to partition a 3 x 4 grid The 3 × 4 grid poster is a computation-based design. Photoshop Grids and Plugins Frameworks Books & Geekeries This notebook is designed for digital designers.
CSS3 Animation Cheat Sheet - Justin Aguilar How it works The CSS3 Animation Cheat Sheet is a set of preset, plug-and-play animations for your web projects. All you need to do is add the stylesheet to your website and apply the premade CSS classes to the elements you want animated. The CSS3 Animation Cheat Sheet uses CSS3 @keyframes and works on all the latest browsers (that's IE 10). Using CSS3 @keyframes, you don't have to worry about positioning the element to accomodate the animations - it will animate into place. Also for users with older browsers, the animated element will be visible and in place, even if the animation doesn't trigger. Add the animation stylesheet to the <head> element of your webpage: Replace css with the name of the directory where the animation stylesheet is. Add an animation class to the element you want animated: Replace slideUp with the desired animation class. For entrance animations, you need to make them invisible by adding the visibility: hidden property to the animated element: Adding effects
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
Transit - CSS transitions and transformations for jQuery What about older browsers? Transit degrades older browsers by simply not doing the transformations (rotate, scale, etc) while still doing standard CSS (opacity, marginLeft, etc) without any animation. Delays and durations will be ignored. // Delegate .transition() calls to .animate()// if the browser can't do CSS transitions.if (!$.support.transition) $.fn.transition = $.fn.animate; Fallback to frame-based animation If you would like to fallback to classic animation when transitions aren't supported, just manually redefine .transitition to .animate. (Note: if you're using custom easing, you may need to also use jQuery Easing, and restrict your use of easing options to the ones defined there.) $.fx.speeds. Default duration Transit honors jQuery's default speed, $.fx.speeds. Custom easing Define custom easing aliases in $.cssEase. Webkit: prevent flickers Having flickering problems in Webkit? Antialias problems in Webkit? Force hardware-acceleration in Webkits to prevent text flickering.