Posts Tagged ‘CSS’

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

CSS-Only Solution For UI Tracking

The web is growing up. We are building applications that work entirely in the browser. They are responsive; they have tons of features and work under many devices. We enjoy providing high-quality code that is well structured and tested.

CSS-Only Solution For UI Tracking

But what matters in the end is the impact for clients. Are they getting more products sold or are there more visitors for their campaign sites? The final results usually show if our project is successful. And we rely on statistics as a measuring tool. We all use instruments like Google Analytics. It is a powerful way to collect data. In this article, we will see a CSS-only approach for tracking UI interactions using Google Analytics.

Read more...

Improving Smashing Magazine’s Performance: A Case Study

Today Smashing Magazine turns eight years old. Eight years is a long time on the web, yet for us it really doesn't feel like a long journey at all. Things have changed, evolved and moved on, and we gratefully take on new challenges one at a time. To mark this special little day, we’d love to share a few things that we’ve learned over the last year about the performance challenges of this very website and about the work we’ve done recently. If you want to craft a fast responsive website, you might find a few interesting nuggets worth considering. – Ed.

Improving Smashing Magazine's Performance: A Case Study

Improvement is a matter of steady, ongoing iteration. When we redesigned Smashing Magazine back in 2012, our main goal was to establish trustworthy branding that would reflect the ambitious editorial direction of the magazine. We did that primarily by focusing on crafting a delightful reading experience. Over the years, our focus hasn't changed a bit; however, that very asset that helped to establish our branding turned into a major performance bottleneck.

Read more...

Scaling Down The BEM Methodology For Small Projects

Front-end development is no longer about individual frameworks. Tools are available — we merely have to choose. To make the right choices for your project, you need to start with a general approach, or methodology. But most methodologies have been created by big companies? Are they still useful for small companies, or do we need to reinvent them at a small scale?

Scaling Down The BEM Methodology For Small Projects

You probably already know of BEM, one of those methodologies developed by a big company — namely, Yandex. BEM posits that three basic entities (blocks, elements and modifiers) are enough to define how to author HTML and CSS, structure code and components, describe interfaces and scale a project up to an industry-leading service.

Read more...

Breakpoints And The Future Of Websites

When the iPhone came out in 2007, the demonstration of its web browser by the late great Steve Jobs gave the not-so-subtle impression that Apple wasn’t too perturbed about its users pinching to zoom and swiping to scroll as part of the browsing experience. Responsive web design aimed to solve this problem by smartly applying flexible grids, fluid layouts and, of course, media queries.

Breakpoints And The Future Of Websites

However, responsive web design has turned out to be somewhat of a case study in the law of unintended consequences, with one of the perverse unanticipated effects being breakpoint paranoia. But even without the undue influence that media queries exerts on your selection of these breakpoints, it dawns on you after much introspection that these might not be the droids we’re looking for.

Read more...

CSS-Driven Internationalization In JavaScript

Writing front-end code often requires developers to address the problem of internationalization at some level. Despite the current standard, which introduces a bunch of new tags, simply adding support for different languages in a JavaScript plugin is still complicated. As a result, for any new project, you have to build a solution from scratch or adapt various existing APIs from other plugins that you use.

CSS-Driven Internationalization In JavaScript

In this article, I’ll describe my approach with better-dom to solve the internationalization problem. Since the last article about this, “Writing a Better JavaScript Library for the DOM,” I’ve revisited the concept to solve the issues raised through feedback.

Read more...

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

↑ Back to top