Frontend Focus Issue 325 — January 31, 2018 How to Use Variable Fonts in the Real World Using variable fonts (now supported across multiple browsers) in a real production context can be tricky. Here’s how studio Clearleft achieved it for a new conference website. Richard Rutter Recreating the GitHub Contribution Graph with CSS Grid Recreating… Read More

Frontend Focus Issue 324 — January 24, 2018 Bootstrap 4 Released After a lengthy beta, the final release of the fourth version of popular frontend toolkit Bootstrap is here. No breaking changes. Mark Otto, Jacob Thornton, and Bootstrap contributors Using CSS Clip Path to Create Interactive Effects As a kid, did you ever cut out… Read More

Frontend Focus Issue 323 — January 17, 2018 How Big Is That Box? Understanding Sizing in CSS Layouts A great introduction to the concepts around lengths, units, and content-based sizing with layouts based on Grid and Flexbox. Rachel Andrew Meet HTML 5.2’s New ‘dialog’ Element An introduction to HTML’s new dialog element for adding native… Read More

Frontend Focus Issue 322 — January 10, 2018 What’s New in HTML 5.2? HTML 5.2 became an official W3C Recommendation (REC) a month ago, but what did it introduce and change? Ire Aderinokun CSS Grid Explained in 7 Minutes (with Diagrams and Code) A quick and easy high level introduction to the main concepts of… Read More

Frontend Focus Issue 321 — December 19, 2017 In this issue, we’re taking a look back at the most popular links of 2017. It’s a great opportunity to catch up with the bigger stories that caught everyone’s imagination in the world of frontend development this year. We’re now taking a break for Christmas and will… Read More

Frontend Focus Issue 320 — December 13, 2017 Understanding CSS Layout and the Block Formatting Context “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… Read More

Frontend Focus Issue 319 — December 6, 2017 Web Content Accessibility Guidelines For People Who Haven’t Read Them A detailed look over the WCAG – a starting point in making your sites work better for all. Alan Dalton How Stripe Designs Beautiful Websites Examining the tips and tricks used to make Stripe’s frequently copied site… Read More

Frontend Focus Issue 318 — November 29, 2017 Building Accessible Web Menu Systems A deep exploration of creating accessible menus for the Web, starting from defining exactly what a menu even is. Smashing Magazine Generating Wireframe Boxes with CSS and HTML5 A really neat look at a technique for using CSS and data attributes to… Read More

Frontend Focus Issue 317 — November 22, 2017 Using CSS Grid: Supporting Browsers Without Grid CSS Grid might provide one of the biggest recent improvements in front-end development, but how can we gracefully deal with browsers that don’t support it? Rachel Andrew What’s New in Firefox 58: Developer Edition After the successful launch of Quantum,… Read More

Frontend Focus Issue 316 — November 15, 2017 Introducing the New Firefox (57): Quantum A major update that’s “over twice as fast as Firefox from 6 months ago, built on a completely overhauled core engine.” It’s time to revisit Firefox if you haven’t recently. Mark Mayo Using SVGs as Placeholders, and Other Image Loading Techniques… Read More