Posts Tagged ‘CSS’

We are pleased to present below all posts tagged with ‘CSS’.

Faster UI Animations With Velocity.js

From a motion design perspective, Facebook.com is phenomenally static. It's purposefully dumbed down for the broadest levels of compatibility and user comfort. Facebook’s iOS apps, on the other hand, are fluid. They prioritize the design of motion; they feel like living, breathing apps.

Faster UI Animations With Velocity.js

This article serves to demonstrate that this dichotomy does not need to exist; websites can benefit from the same level of interactive and performant motion design found on mobile apps. Before diving into examples, let's first address why motion design is so beneficial.

Read more...

Sassy Z-Index Management For Complex Layouts

Z-index is an inherently tricky thing, and maintaining z-index order in a complex layout is notoriously difficult. With different stacking orders and contexts, keeping track of them as their numbers increase can be hard — and once they start to spread across CSS files, forget about it! Because z-index can make or break a UI element’s visibility and usability, keeping your website’s UI in working order can be a delicate balance.

Sassy Z-Index Management For Complex Layouts

Because z-index is contextual, once you start using it, requiring it for other elements as well is easy. Finding z-index: 99999 rules scattered throughout a website is not uncommon, but the infamous 99999 was born of frustration. It’s an easy way to get an element just to be on top of everything else. But it’s not entirely scalable: What if you need to add something on top of that?

Read more...

Picturefill 2.0: Responsive Images And The Perfect Polyfill

Not since the early days of web standards have I seen our community rally around a seemingly small issue: responsive images. Over the last four years (yeah, it’s been about four years), we’ve seen many permutations of images in responsive design.

Responsive Images And The Perfect Polyfill

From the lazier days of setting max-width: 100% (the absolute minimum you should be doing) to more full-featured JavaScript implementations, such as Picturefill and Zurb’s data-interchange method, we’ve spent a lot of time spinning our wheels, banging our heads and screaming at the wall. I’m happy to say that our tireless journey is coming to a close. The W3C and browser makers got the hint.

Read more...

Understanding CSS Timing Functions

People of the world, strap yourself in and hold on tight, for you are about to experience truly hair-raising excitement as you get to grips with the intricacies of the hugely interesting CSS timing function!

Understanding CSS Timing Functions

OK, so the subject matter of this article probably hasn’t sent your blood racing, but all jokes aside, the timing function is a bit of a hidden gem when it comes to CSS animation, and you could well be surprised by just how much you can do with it.

Read more...

Frizz-Free JavaScript With ConditionerJS

Setting up JavaScript-based functionality to work across multiple devices can be tricky. When is the right time to load which script? Do your media queries matches tests, your geolocation popups tests and your viewport orientation tests provide the best possible results for your website? ConditionerJS will help you combine all of this contextual information to pinpoint the right moment to load the functionality you need.

Frizz-Free JavaScript With ConditionerJS

Before we jump into the ConditionerJS demo, let’s quickly take a look at the Web and how it’s changing, because it’s this change that drove the development of ConditionerJS in the first place. In the meantime, think of it as a shampoo but also as an orchestra conductor; instead of giving cues to musicians, ConditionerJS tells your JavaScript when to act up and when to tune down a bit.

Read more...

Rethinking Responsive SVG

If you haven’t seen Joe Harrison’s responsive icons technique yet, you’ll most probably be impressed as much as I was when I first discovered it. In this article, I’d like to explore what we can do with SVG beyond “traditional” scalable vector graphics that are used to replace bitmap PNGs.

Rethinking Responsive SVG

In fact, we can see SVG as an independent module that encapsulates CSS for the customization of views as well as the responsive behavior that also encapsulates JavaScript for the interaction logic. Now, let’s dig a bit deeper into this technique.

Read more...

Responsive Design Frameworks: Just Because You Can, Should You?

Responsive design is about building a website with a grid-based layout, images that resize and media queries, as described by Ethan Marcotte. After Marcotte defined the technique, responsive design frameworks began to emerge that incorporated these principles.

Responsive Design Frameworks: Just Because You Can, Should You?

Mostly based on CSS and JavaScript, many of these frameworks are open-source, free to download and quickly customizable. Some of the most popular today are Bootstrap and Foundation, which we’ll focus on in this article. As responsive design frameworks became popular, a big debate emerged: Why would a professional designer use a responsive design framework?

Read more...

Writing A Better JavaScript Library For The DOM

At present, jQuery is the de facto library for working with the document object model (DOM). It can be used with popular client-side MV* frameworks (such as Backbone), and it has a ton of plugins and a very large community.

Writing A Better JavaScript Library For The DOM

As developers’ interest in JavaScript increases by the minute, a lot of people are becoming curious about how native APIs really work and about when we can just use them instead of including an extra library. Lately, I have started to see more and more problems with jQuery, at least my use of it.

Read more...

↑ Back to top