---
title: "#320: Making HTML Responsive with a Single Line of CSS"
publication: "Frontend Focus"
issue: 320
published_at: "2017-12-13"
canonical_url: "https://frontendfoc.us/issues/320"
---
#320: Making HTML Responsive with a Single Line of CSS
This Week's HTML5, CSS, Browser, and Frontend News — [Read this e-mail on the Web](http://frontendfoc.us/issues/320)
Frontend FocusIssue 320 — December 13, 2017[Understanding CSS Layout and the Block Formatting Context](https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/?utm_source=frontendfocus&utm_medium=email)_“Understanding what a BFC (Block Formatting Context) is, why it works, and how to create one is useful and can help you to understand how layout works in CSS.”_ If you’ve ever wondered what `overflow: auto` actually does, you need this article.. Rachel Andrew
[Design Systems and CSS Grid](https://24ways.org/2017/design-systems-and-css-grid/?utm_source=frontendfocus&utm_medium=email)A look at the thorny issue of integrating modern CSS Grid layouts into an existing design system, (and how you’ll reap the benefits of leaner, more maintainable markup to boot). Stuart Robson
[Making HTML Responsive with a Single Line of CSS](https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431?utm_source=frontendfocus&utm_medium=email)The responsiveness happens in a single CSS Grid-related property, namely `grid-template-columns` coupled with the `auto-fit` keyword. Per Harald Borgen
[](https://learn.percona.com/cp-how-scale-mongodb-recording?utm_source=frontendfocus&utm_medium=email)[How to Scale with MongoDB](https://learn.percona.com/cp-how-scale-mongodb-recording?utm_source=frontendfocus&utm_medium=email)Percona's webinar walks through scaling situations, the steps needed to deploy a sharded cluster: from a single instance to a sharded environment. Common mistakes/pitfalls a company encounters when scaling its database – and how to avoid such situations. PerconaSponsor
[Parcel: A Fast, Zero-Configuration Webapp Bundler](https://parceljs.org/?utm_source=frontendfocus&utm_medium=email)In [this introductory article](https://hackernoon.com/announcing-parcel-a-blazing-fast-zero-configuration-web-application-bundler-feac43aac0f1), Parcel’s creator explains how it solves key problems with existing bundlers like Browserify and Webpack: performance and complex configs. Devon Govett
[6 Ways to Clear the Browser's Cache](https://calendar.perfplanet.com/2017/clearing-cache-in-the-browser/?utm_source=frontendfocus&utm_medium=email)_“At some point every developer accidentally makes a bad release of an asset with a long cache lifetime. There is a way back.”_ Andrew Betts
[Using CSS Counters](https://pineco.de/using-css-counters/?utm_source=frontendfocus&utm_medium=email)Supported in all browsers, CSS counters provide a way to control number values in generated content. Here’s a look at three use cases. Adam Laki
[A Recap of Frontend Development in 2017](https://levelup.gitconnected.com/a-recap-of-front-end-development-in-2017-7072ce99e727?utm_source=frontendfocus&utm_medium=email)_“Frontend engineering once again evolved at a feverish pace in 2017. Here’s a list of the most notable events of the past year.”_ Trey Huffine
Jobs
- [Software Engineer – Web Clients, ReactJS+Redux](https://careers-discovery.icims.com/jobs/18956/software-engineer---web-clients/job?utm_source=frontendfocus&utm_medium=email)Join a growing engineering team that builds highly performant video apps across Web, iOS, Android, FireTV, Roku, tvOS, Xbox and more. Discovery Digital Media
- [Senior OSS JavaScript Developer (EU only, remote)](https://www.deque.com/about-us/join-team/senior-oss-javascript-developer-eu/?utm_source=frontendfocus&utm_medium=email)Interested in accessibility standards and open source test tools? Deque Systems
- [Front-End Engineer](https://www.indeed.com/prime?sid=cooperpress&kw=frontend12.13)Indeed Prime is a free service that connects you to hundreds of companies. Indeed Prime
In Brief
[Google Shuts Down The Chrome Web Store Section](https://arstechnica.com/gadgets/2017/12/google-shuts-down-the-apps-section-of-the-chrome-web-store/?utm_source=frontendfocus&utm_medium=email) news
Google says Progressive Web Apps are the future of app-like webpages.
Ars Technica
[WebXR Is Going to Bring VR and AR to The Masses. Here’s Why.](https://blog.bigscreenvr.com/webxr-is-going-to-bring-vr-and-ar-to-the-masses-heres-why-ad2b790065fa?utm_source=frontendfocus&utm_medium=email) news
What was WebVR 2.0 has now officially become WebXR.
Owen Williams
[The Way the WHATWG Works Is Improving](https://blog.whatwg.org/working-mode-changes?utm_source=frontendfocus&utm_medium=email) news
Slightly dry, but significant news for day-to-day work on Web standards.
WHATWG
[Creating a Calendar Layout with CSS Grid](https://snook.ca/archives/html_and_css/calendar-css-grid?utm_source=frontendfocus&utm_medium=email) tutorial
Jonathan Snook
[The 'Blur Up' Technique for Loading Background Images](https://css-tricks.com/the-blur-up-technique-for-loading-background-images/?utm_source=frontendfocus&utm_medium=email) tutorial
Elegantly going from a 40x22 pixel preview up to a full photo.
Emil Björklund
[Building a Voice-Activated Movie Search App Powered by Amazon Lex, Lambda, and MongoDB Atlas (Part 1)](https://www.mongodb.com/blog/post/aws-lex-lambda-mongodb-atlas-movie-search-app-part-1?jmp=cpress&utm_campaign=WW_CP_newsletter_sponsorship_FY17Q4&utm_content=sponsored&utm_medium=display&utm_source=frontendfocus1213) tutorial
This post includes a Lex overview, demo scenario and data layer setup.
mongodbSponsor
[How To Iterate Your Way to a Winning Content-Driven Website](https://www.smashingmagazine.com/2017/12/iterating-content-driven-websites/?utm_source=frontendfocus&utm_medium=email) tutorial
Smashing Magazine
[Automating Your Accessibility Tests](https://24ways.org/2017/automating-your-accessibility-tests/?utm_source=frontendfocus&utm_medium=email) tutorial
A reminder to carry out regular accessibility testing, and pointers on how you can automate it.
Seren Davies
[Measuring Actions with the User Timing API](https://advent2017.digitpaint.nl/12/?utm_source=frontendfocus&utm_medium=email) tutorial
Includes a neat live example.
Digitpaint
[Mutating Web Content using DOM Ranges](https://calendar.perfplanet.com/2017/mutating-web-content-using-dom-ranges/?utm_source=frontendfocus&utm_medium=email) tutorial
Andrea Giammarchi
[Popular CSS Button Hover Effects Explained](http://blog.dynamicdrive.com/popular-css-button-hover-effects-explained/?utm_source=frontendfocus&utm_medium=email) tutorial
Dynamic Drive
[Font Awesome 5 Released: The Popular Web Icon Set and Toolkit](https://fontawesome.com/?utm_source=frontendfocus&utm_medium=email) tools
[Analyze and Optimize Web App Performance with Datadog](https://www.datadoghq.com/dg/apm/lpg/?utm_source=Advertisement&utm_medium=CooperPress&utm_campaign=CooperPress-FrontEndFocusS) tools
Start collecting, monitoring & correlating real-time metrics from 200+ technologies in minutes. [Try it free](https://www.datadoghq.com/dg/apm/lpg/?utm_source=Advertisement&utm_medium=CooperPress&utm_campaign=CooperPress-FrontEndFocusS).
DatadogSponsor
[Specificity Visualizer: Analyze CSS Selector Specificity](https://isellsoap.github.io/specificity-visualizer/?utm_source=frontendfocus&utm_medium=email) tools
Paste in your CSS and get a bird’s-eye view of selector specificity - particularly handy for ensuring larger style sheets work efficiently.
Francesco Schwarz
Curated by [Peter Cooper](http://twitter.com/peterc) and [Chris Brandrick](http://twitter.com/chrisbrandrick) and published by [Cooperpress](https://cooperpress.com/).
[Stop getting FrontEnd Focus](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://frontendfoc.us/issues/320)
Cooper Press Ltd. Office 30, Lincoln Way, Louth, LN11 0LS, UK