--- title: "New CSS features that are changing web design" publication: "Frontend Focus" issue: 339 published_at: "2018-05-09" canonical_url: "https://frontendfoc.us/issues/339" --- This Week's HTML5, CSS, Browser, and Frontend News #339 — May 9, 2018 [Read on the Web](https://frontendfoc.us/issues/339) Frontend Focus [New CSS Features That Are Changing Web Design](https://www.smashingmagazine.com/2018/05/future-of-web-design/) — Widely available, but relatively new, Web technologies like CSS Grid, CSS custom properties, CSS shapes and CSS writing-mode are allowing designers to exercise creativity in all new ways. Zell Liew explains how. Zell Liew [Container-Adapting Tabs, with a "More" Button](https://css-tricks.com/container-adapting-tabs-with-more-button/) — You could call this a ‘progressively collapsing’ navigation menu. It’s a neat way to handle a wide variation of horizontal viewport widths if you have a lot of items you need to present in your navigation. Osvaldas Valutis [![\](https://copm.s3.amazonaws.com/50a2a9b2.png)](https://monday.com/lp/mb/status-video?utm_source=mb&utm_campaign=newsletters&utm_medium=frontend_focus_may18&utm_bdg=exp) [The New Generation of Project Management Tools Is Here and It’s Visual](https://monday.com/lp/mb/status-video?utm_source=mb&utm_campaign=newsletters&utm_medium=frontend_focus_may18&utm_bdg=exp) — [monday.com](https://monday.com) is a visual tool your team will actually enjoy using. It makes it fun and easy for everyone to collaborate, focus on what's important, and get more done. A project management tool that’ll help you and your team collaborate and achieve more together. monday.com sponsor [layerJS: UI Composition and Animation in Pure HTML](https://layerjs.org/) — Work with UX patterns and controls like menus, sliders, parallax effects, and zoom effects by declaring them as visual effects in HTML attributes. Handorf, Tordeur, and Onutchin ['I Used The Web For A Day With JavaScript Turned Off'](https://www.smashingmagazine.com/2018/05/using-the-web-with-javascript-turned-off/) — Is it possible to do anything on the web without JavaScript nowadays? This is not only a neat journey to answer that question but there are plenty of insights on how to improve your own sites and apps. Chris Ashton [Creating Responsive Layouts & Components with CSS Grid](https://medium.com/deemaze-software/css-grid-responsive-layouts-and-components-eee1badd5a2f) — _“Let’s make a photo gallery responsive quickly ...using very few lines of CSS.”_ Rafaela Ferro [Inspecting Animations in Chrome DevTools](https://css-tricks.com/inspecting-animations-in-devtools/) — A quick demo of what Chrome’s _Animation_ panel has to offer if you want to spy on how CSS animations/transitions work. Robin Rendle [Welcome to the Immersive Web](https://developers.google.com/web/updates/2018/05/welcome-to-immersive) — A look at how the browser is becoming a platform for virtual world experiences thanks to WebXR (and, once, WebVR). Joseph Medley 💻 Jobs [Front-end Developer With Strong UI/UX Focus](https://www.helical-levity.com/careers) — Help our growing team build amazing tools, games and websites used by thousands of people every day. Near Oxford and/or UK remote. Helical Levity [Software Engineer - London, UK](https://www.workable.com/j/FE322C5C0C) — Frontend engineer wanted to help build the future of online trust. Join our group of engineers who take pride in the software we ship. Onfido [Front-End Expert? Sign Up for Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-24216) — Top companies use Vettery to find the best tech talent. Create your profile to get started. Vettery 📘 Tutorials [A Deep Dive into the Bootstrap Form Component](https://www.sitepoint.com/deep-dive-bootstrap-form-component/) Ilya Bodrov-Krukowski [Decorating Lines of Text with 'box-decoration-break'](https://css-tricks.com/decorating-lines-of-text-with-box-decoration-break/) — Styling inline boxes split over multiple lines can be tricky, but `box-decoration-break` can give you more options. Preethi Sam [Extracting a React Component: On Demand Tutorial](https://www2.bignerdranch.com/webinar?utm_source=PaidAd_FrontEndFocus&utm_medium=PaidAd&utm_campaign=2018_05_09_PaidAd_Publication) — Attendees couldn’t believe we offered this at no cost - catch up here with Josh Skeen's tutorial replay. Big Nerd Ranch sponsor [A Look at the Resize Observer JavaScript API](https://alligator.io/js/resize-observer/) — Rather than relying on `window.resize` to check if certain elements have changed size, the Resize Observer API makes it possible to be notified directly. [Chrome only](https://caniuse.com/#feat=resizeobserver) for now, but there’s [a polyfill.](https://github.com/que-etc/resize-observer-polyfill) Alligator [HTML5's Global 'hidden' Attribute](https://www.impressivewebs.com/html5-global-hidden-attribute/) — `hidden` is an attribute you can use on any HTML element to, well, hide it, and a worthwhile alternative to `display: none` in many situations. Louis Lazaris [The Relative Units of CSS: em, rem, vw, vh, ex, and ch](https://pineco.de/the-relative-units-of-css/) Adam Laki [An Intro to CSS 3D Transforms](https://3dtransforms.desandro.com/) David DeSandro [Cheat Sheet: Functional Programming with JavaScript](https://www.telerik.com/campaigns/kendo-ui/wp-functional-programming-with-js-cheat-sheet?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-jquery-whitepaper-funcwithjs&utm_content=brieflink) Progress Kendo UI sponsor [5 Basic Console Tips to Debug Webapps with Chrome DevTools](https://www.nan-labs.com/blog/5-console-tips-to-debug-your-web-apps-with-chrome-dev-tools/) Mailen Mancuso 🔧 Code and Tools [Introducing Elmstatic: An Elm-to-HTML Static Site Generator](https://korban.net/posts/elm/2018-05-03-introducing-elmstatic-elm-static-site-generator/) Alex S. Korban tutorial [Selection: A Library to Enable Visual DOM Selection](https://github.com/Simonwep/selection) — For example, if you want users to be able to drag a box around various elements they want to select. Touch device friendly. Simon Reinisch [Announcing Babylon.js v3.2](https://blogs.windows.com/buildingapps/2018/05/01/announcing-babylon-js-v3-2/) — An open source framework for creating powerful 3D experiences in the browser. David Catuhe (Microsoft) [Impact, the HTML5 Game Engine, Open Sourced](https://github.com/phoboslab/Impact) — Anyone building HTML5 games a few years ago will have heard of this popular game engine. It was a paid-for product but has just been MIT licensed. Dominic Szablewski [Themify: CSS Theming Made Easy](https://github.com/datorama/themify) — A PostCSS plugin for generating site themes during build. datorama [Linux Cloud Hosting Starting at 1GB of RAM for $5/mo](https://welcome.linode.com/frontendfocus/?utm_source=cooperpress&utm_medium=sponsored&utm_campaign=frontendfocus-brief) Linode Cloud Hosting sponsor [Responsive Type: A One-Size-Fits-All SCSS Type Solution](https://github.com/kyle-villeneuve/responsive_type) Kyle Villeneuve [Particle Effects for Buttons](https://tympanus.net/codrops/2018/04/25/particle-effects-for-buttons/) — Disintegrate elements into particles to make them disappear (or vice versa). Luis Manuel [Ideas for Proximity Feedback with Progressive Hover Effects](https://tympanus.net/codrops/2018/05/02/ideas-for-proximity-feedback-with-progressive-hover-effects/) — Experimenting with hover effects that trigger when an element is _approached_. Team Codrops A **[Cooperpress](https://cooperpress.com/)** publication. [Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom