Posts Tagged ‘CSS’

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

Absolute Horizontal And Vertical Centering In CSS

In this article, Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. The techniques works with percentage-based width/height, min-/max- width, images, position: fixed and even variable content heights. — Ed.

We've all seen margin: 0 auto; for horizontal centering, but margin: auto; has refused to work for vertical centering... until now! But actually (spoiler alert!) absolute centering only requires a declared (variable) height and these styles.

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

I'm not the pioneer of this method (yet I have dared to name it Absolute Centering), and it may even be a common technique, however, most vertical centering articles never mention it and I had never seen it until I dug through the comments section of a particular article.

Read more...

Introducing LiveStyle: Better, Stronger And Smarter CSS Live Reload

In the past, we featured some exciting tools and libraries: PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin and CSSComb. All of them have been developed and released by active members of the Web design community as open-source projects. Today, we present LiveStyle, a plugin for live bi-directional (editor ↔ browser) CSS editing of the new generation! — Ed.

Tools for live CSS editing aren't new these days. You may already be familiar with tools like LiveReload, CodeKit and Brackets. So, why would someone ever need to create yet another tool and even call it a "live CSS editor of the new generation"?

Introducing LiveStyle: Better, Stronger And Smarter CSS Live Reload

The tool I'd like to introduce to you today is Emmet LiveStyle. This plugin takes a completely different approach on updating CSS. Unlike other live editors, it doesn't simply replace a whole CSS file in a browser or an editor, but rather maps changes from one CSS file to the other.

Read more...

The “Other” Interface: Atomic Design With Sass

As front-end developers and designers, we’re constantly refining two interfaces simultaneously: one for visitors who load the website, the other for developers who have to tackle the code in the future, when adjustments or full-scale redesigns must be made.

Yet we tend to assign the role of “user” to the first group, often forgetting that the code we write must work for developers in a similar way. We shouldn’t forget that developers are users, too.

Read more...

Simple Responsive Images With CSS Background Images

With all the talk of new HTML5 standards such as the srcset attribute and <picture> element, as well as server-side techniques such as Responsive Web Design + Server Side Components (RESS), you'd be forgiven for concluding that simple, static websites can’t support responsive images today.

Simple Responsive Images With CSS Background Images

That conclusion might be premature, however. In fact, there’s an easy, straightforward way to deliver responsive images that’s supported by all of today’s Web browsers: CSS background images.

Read more...

Media Queries Are Not The Answer: Element Query Polyfill

Responsive Web design has transformed how websites are designed and built. It has inspired us to think beyond device classifications and to use media queries to adapt a layout to the browser’s viewport size. This, however, deviates from the hierarchical structure of CSS and characterizes elements relative to the viewport, instead of to their container.

Media Queries Are Not The Answer: Element Query Polyfill

Extensive use of media queries might be the answer for today, but it is not a viable long-term solution. Media queries do not allow for reusable modules that adapt based on their containers’ size.

Read more...

Clown Car Technique: Solving Adaptive Images In Responsive Web Design

Adaptive images are the current hot topic in conversations about adaptive and responsive Web design. Why? Because no one likes any of the solutions thus far. New elements and attributes are being discussed as a solution for what is, for most of us, a big headache: to provide every user with one image optimized for their display size and resolution, without wasting time, memory or bandwidth with a client-side solution.

Clown Car Technique

We have foreground and background images. We have large and small displays. We have regular and high-resolution displays. We have high-bandwidth and low-bandwidth connections. We have portrait and landscape orientations.

Read more...

Building The New Financial Times Web App (A Case Study)

When the mockups for the new Financial Times application hit our desks in mid-2012, we knew we had a real challenge on our hands. Many of us on the team (including me) swore that parts of interface would not be possible in HTML5.

Building The New Financial Times Web App: A Case Study

Given the product team’s passion for the new UI, we rolled up our sleeves and gave it our best shot. We were tasked with implementing a far more challenging product, without compromising the reliable, performant experience that made the first app so successful.

Read more...

↑ Back to top