Posts Tagged ‘CSS’

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

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

The Future Of Video In Web Design

Federico was the only other kid on the block with a dedicated ISDN line, so I gave him a call. It had taken six hours of interminable waiting (peppered with frantic bouts of cursing), but I had just watched 60 choppy seconds of the original Macintosh TV commercial in Firefox, and I had to tell someone. It blew my mind.

The Future Of Video In Web Design

Video on the Web has improved quite a bit since that first jittery low-res commercial I watched on my Quadra 605 back in 7th grade. But for the most part, videos are still separate from the Web, cordoned off by iframes and Flash and bottled up in little windows in the center of the page. They’re a missed opportunity for Web designers everywhere.

Read more...

Killer Responsive Layouts With CSS Regions

As Web designers, we are largely constrained by the layout features available to us. Content placed inside a container will often naturally extend the container vertically, wrapping the content. If a design requires elements to remain a certain height, then our options are limited. In these cases, we can only add a scroll bar or hide the overflow. The CSS Regions specification provides a new option.

Killer Responsive Layouts With CSS Regions

Regions are a new part of the CSS specification, so not all browsers have implemented them, and in some cases you might have to enable a flag to use them. They have recently gained support in iOS7 and Safari 7, as well as Safari 6.1+. Adobe maintains a list of supported browsers and instructions on enabling regions and other features.

Read more...

Challenging CSS Best Practices

Editor’s Note: This article features techniques that are used in practice by Yahoo! and question coding techniques that we are used to today. You might be interested in reading Decoupling HTML From CSS by Jonathan Snook, On HTML Elements Identifiers by Tim Huegdon and Atomic Design With Sass by Robin Rendle as well. Please keep in mind: some of the mentioned techniques are not considered to be best practices.

When it comes to CSS, I believe that the sacred principle of “separation of concerns” (SoC) has lead us to accept bloat, obsolescence, redundancy, poor caching and more. Now, I’m convinced that the only way to improve how we author style sheets is by moving away from this principle.

Challenging CSS Best Practices

For those of you who have never heard of the SoC principle in the context of Web design, it relates to something commonly known as the “separation of the three layers”: structure, presentation, behavior.

Read more...

Building An Online Magazine App For Windows 8, Part 2: The Web Back End

In part one of this series, we got a customized magazine app for Windows 8 up and running. In this second and last part, we will shift our focus to the server and content. We will look at how our magazine app obtains the articles to be shown, examine the transport protocol and set up a live content host.

Building An Online Magazine App For Windows 8, Part 2: The Web Back End

When done, you will have a cloud-based content management system running on a free hosting plan from where you can manage and publish articles.

Read more...

↑ Back to top