by Kris Bulman

Front-end Rapport #1

Use Cases and Requirements for Element Queries

Topics: Element Queries, RICG

On the heels of the highly successful picture element Indiegogo project, the Responsive Images Community Group (RICG) continues to revise a draft spec for Element Queries. This document defines the need for syntax to control layouts based on the size of the component itself rather than the viewport, removing the need to create complex code for every possible exception that may arise.

Our Take

Have you ever put a lot of time into a component to get it just right, then move it around to different contexts and get unexpected results? Yeah, it happens and we feel the pain, components take a lot of work to get just right to handle all use cases. There are a few JavaScript solutions here, here, and here, however not without their limitations, and we can all agree there is nothing better than a solid browser implementation. As shown by their past work on getting the picture element into Chrome, if there is any one group that can move this forward, it's the RICG. Information on how to contribute can be found on their GitHub repo.

@Target Your CSS

Topics: gulp.js, CSS, Sass

There has been a long standing request in the Sass issue queue for separating out specific rules into their own stylesheet during compile. This is particularly useful for keeping all your conditional styles in one place while developing, but separating them out into their own stylesheet later using an automated task. Sam Richards solved this problem outside of Sass with a gulp plugin called gulp-css-target. The plugin works by parsing special CSS comments, and Sam has offered up a simple mixin to integrate into your Sass project for ease of use with the plugin.

All You Ever Need to Know About Sass Interpolation

Topics: Sass

Through several useful and reusable examples, this article explains interpolation in Sass. In great detail, Hugo Giraudel shows us benefits of variable interpolation with strings, inside CSS functions, CSS at-directives, and generating CSS selectors.

Giving Animations Life

Topics: animation, CSS, JavaScript, tutorial

An article on applying classical animation principles to the web with JavaScript and CSS3 keyframe animations. Using his own library called bounce.js, Joel Besada takes us through several iterations of animation, resulting in a truly impressive login experience.

What happened recently

It's been a big week for developer tool improvements!

  • Chrome DevTools added media query viewer and network throttling (including offline) to mobile emulation. — @f12devtools
  • Firefox Nightly added support for the newly named color: rebeccapurple@Browserphile
  • Debug Safari and Chrome on iOS and Android via Firefox's WebIDE in Developer Tools (soon) — @robertnyman
  • Chrome DevTools added the ability to search styles, domain filtering, and edit Shadow DOM content — @umaar
  • NYC Times dropped IE8 support, visitors prompted to upgrade. — @mericson

Daily News

Craving more? Subscribe to our Flipboard mag for daily updates or sign up for our newsletter below.

Front-end Rapport

Enter your email address

powered by TinyLetter