New CSS features that are changing web design

#339 — May 9, 2018 Read on the Web Frontend Focus New CSS Features That Are Changing 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 — 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 The New Generation of Project Management Tools Is Here and It’s Visual — 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 — 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' — 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 — “Let’s make a photo gallery responsive quickly ...using very few lines of CSS.” Rafaela Ferro Inspecting Animations in Chrome 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 — 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 — 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 — 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 — 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 Ilya Bodrov-Krukowski 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 — 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 — 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 for now, but there’s a polyfill. Alligator HTML5's 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 Adam Laki An Intro to CSS 3D Transforms David DeSandro Cheat Sheet: Functional Programming with JavaScript Progress Kendo UI sponsor 5 Basic Console Tips to Debug Webapps with Chrome DevTools Mailen Mancuso 🔧 Code and Tools Introducing Elmstatic: An Elm-to-HTML Static Site Generator Alex S. Korban tutorial Selection: A Library to Enable Visual DOM 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 — An open source framework for creating powerful 3D experiences in the browser. David Catuhe (Microsoft) Impact, the HTML5 Game Engine, Open Sourced — 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 — A PostCSS plugin for generating site themes during build. datorama Linux Cloud Hosting Starting at 1GB of RAM for $5/mo Linode Cloud Hosting sponsor Responsive Type: A One-Size-Fits-All SCSS Type Solution Kyle Villeneuve 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 — Experimenting with hover effects that trigger when an element is approached. Team Codrops

by via Frontend Focus