CategoryCSS

August 8, 2013 — Tools for live CSS editing aren’t new these days. So, why would someone ever need to create yet another tool and even call it a “live CSS editor of the new generation”? In this article, Sergey Chikuyonok would like to introduce 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…

August 2, 2013 — 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. But we shouldn’t forget that developers are users, too. Therefore, our convention for naming and organizing files is critical if we are to ensure active development in the future. But do we really design the partials, files and directories that make up this interface with a particular set of users in mind? Read more…

July 22, 2013 — There’s an easy, straightforward way to deliver responsive images that’s supported by all of today’s Web browsers: A CSS background image. However, the approach has some limitations, and it doesn’t work in all cases. But if your requirements aren’t complicated, and if you’re willing to make an extra effort to ensure your images are accessible, CSS background images may be all you need! Read more…

June 25, 2013 — Extensive use of media queries is not a viable long-term solution. Media queries do not allow for reusable modules that adapt based on their containers’ size. Responsive Web design has inspired us to think beyond device classifications and to use media queries to adapt a layout to the browser’s viewport size. But this deviates from the hierarchical structure of CSS and characterizes elements relative to the viewport, instead of to their container. Read more…

June 3, 2013 — Some people waste bandwidth by sending high-resolution images to all devices. Others send regular-resolution images, looking less crisp on high-resolution displays. But what we really want to do is find the one solution that sends the image with the most appropriate size and resolution based on the browser and device making the request that can also be made accessible. Read more…

May 23, 2013 — When the mockups for the new Financial Times application hit FT Labs desk, Wilson Page knew he and his team had a real challenge on their hands. They were tasked with implementing a far more challenging product, without compromising the performant experience that made the first app so successful. In this article, Wilson Page will discuss some of the changes he made in the latest release and the decision-making behind them. Read more…

May 22, 2013 — Flexible box layout is a new box model optimized for UI layout, and it makes a lot of tasks much easier, or even possible at all. Flexbox’s repertoire includes the simple centering of elements, the expansion and contraction of elements to fill available space, and source-code independent layout, among others abilities. Read more…

May 2, 2013 — A lightbox is one of those tools that work great on the desktop but often fail on small mobile devices. These days, finding a plugin that is responsive and that displays content right away is hard. For this reason, I created Magnific Popup, an open-source lightbox plugin focused on performance. Read more…

April 26, 2013 — This article is packed with a number of quirks and issues you should be aware of when working with CSS3 transitions. Please note that I’m not showing any workarounds or giving advice on how to circumvent the issues discussed. Read more…

April 12, 2013 — For several years, Generated content was used by relatively few Web authors due to inconsistent browser support. But in 2009, the feature was rediscovered, and many interesting implementations were adopted for the first time. In this article Gabriele Romanato will show us some possible uses of generated content. Read more…