5 Useful CSS Tricks for Responsive Design

Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I’m going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They are simple CSS properties such as min-width, max-width, overflow, and relative value — but these properties play an important part in responsive design. View Demos 1. This responsive video CSS trick was discovered by tjkdesign.com. 2. Max-width property allows you to set the max width of the element. Max-Width Container In the example below, I specify the container to display at 800px if possible, but it should not exceed 90% of the boundary width. Responsive Image You can make the image auto resize to the max width of the boundary by using max-width:100% and height:auto. The above responsive image CSS works on IE7 and IE9, but doesn’t work on IE8. Min-Width 3. Relative Margin 4.

Troubleshooting CSS Sometimes CSS can be frustrating. Learn about some tricky properties, the common issues they can cause and how to solve them. CSS is a mess. First introduced in ~1995, it was meant to style basic text documents. A lot of things were not intended in the first place like multi-column layouts, responsive web design and more; this is why it has become a language full of hacks and glitches, like some kind of odd steam machine with a bunch of extensions. On the bright side, this is what makes CSS fun (or kinda)! Photo credits Anyway, I’m not here to talk about my convictions but about CSS. Among others, I picked some really common yet annoying issues: Float clearing, an old battle I think this has to be the most common wat? Basically, when an element only contains floated elements, it collapses on itself. There are a number of ways to fix this. Then Nicolas Gallagher came with a new way to clear floats from the parent without touching the markup at all. How to fight inline-block spacing? Why?

Details | Adaptive Images Limitations I think this is one of the most flexible, future-proof, retro-fittable, and easy to use solutions available today. But, there are problems with this approach as there are with all of the one’s I’ve seen so far. This is a PHP solution. I wish I was smarter and knew some fancy modern languages the cool kids discuss at parties, but I don’t. Content Delivery Networks. Adaptive Images relies on the server being able to intercept requests for images, do some logic, and then send one of a given number of responses. A minor but interesting Cookie setting issue. As Yoav Veiss pointed out in his article Pre-loaders, Cookies, and race-conditions there is no way to guarantee that a cookie will be set before images are requested - even though the JavaScript that sets the cookie is loaded by the browser before it finds any <img> tags. Adaptive Images checks the User Agent String for the presence of 'mobile'. The Future For today, this is a pretty good solution.

Using Custom Data Attributes and Pseudo-Elements A tutorial on how to (ab)use custom data attributes and pseudo-elements for creating image captions. In today’s tutorial I want to show you some simple CSS tricks using data attributes and pseudo-elements. The aim is to create an image caption using only an anchor and an image as markup. We’ll be exploring how to create pseudo-elements from some data attribute values and use them in a hover effect or simply show them next to the image. Using (more) semantic markup is of course what you should be doing, especially for data that is important to be shown. If you’d like to explore some fancy image caption hover effects with “real” markup, check out the Caption Hover Effects. And if you are interested in some really cool animations and transitions with pseudo-elements, then check out this article by Marco Barria: Examples of Pseudo-Elements Animations and Transitions. The demos feature some beautiful artwork by Jaime Martinez. Let’s start with the markup. Example 1: Caption next to image

Tips & Tools for Grid-based Layouts Developing a vertical (and responsive) grid can help maintain consistency in website design and ease the creation of responsive layouts. When you first start planning a web design project where do you start? Color scheme, fonts? Probably not. Most of us start with a sketch outline of the site’s structure. And a big part of this structure lies in the grid – a vertical set of guidelines that help determine shape, placement of items and overall look of each website. There are a variety of grid-based structures. Column Grid Every vertical grid is comprised of two things – columns and gutters. Web grids vary widely and there is no magic formula for number of columns or width of gutters. When using a vertical column-based grid, the lines are typically invisible and only known to the designer or developer. Build a Grid The first step in creating a grid is to set your constraints. When designing the grid, think about how elements will live within the columns. Then it is time to do the math. Analysis