#286: Firefox 53, and Replacing a Bootstrap Layout with CSS Grid

Datetime:2017-04-20 05:23:01         Topic: Bootstrap          Share        Original >>
Here to See The Original Article!!!

It's Time To Start Using CSS Custom Properties

CSS Custom Properties (aka CSS variables) are now supported in all major browsers and they offer a lot of possibilities to Web developers, as seen in this thorough overview.

Serg Hospodarets

Replacing a Bootstrap Layout with CSS Grid

“Now that CSS Grid Layout is a reality, I wanted to see what it would take to replace an existing grid framework with CSS Grid.”

Dan Brown

Firefox 53 Released: New WebExtensions and CSS Features

New support for CSS Masks and display: flow-root , plus several pre-existing Chrome WebExtension APIs are now supported.


A Netflix like Live and VoD Streaming Experience in HTML5

An easy to integrate and versatile HTML5 based MPEG-DASH and HLS player for desktop, mobile, VR Headsets, Chromecast, AirPlay, AppleTV and SmartTVs. Including a WebGL based VR and 360 video component and a completely customizable HTML5/CSS UI.

Bitmovin    Sponsor

Personalization with CSS Variables and React

How and why Geckoboard uses CSS Variables in combination with React to re-style their web app on the fly.

Dan Bahrami

A Brief Overview of Responsive Navigation Patterns

Responsive Web design has changed the way we build sites. Here, Smashing Magazine looks at responsive navigation techniques, in particular.

Chris Poteet

Smooth Scrolling and Accessibility

Heather Migliorisi covers two accessibility issues to keep in mind when implementing smooth scrolling: focus management and animations.

CSS Tricks

Stickybits: An Alternative to 'position: sticky' Polyfills

position: sticky doesn’t work in Edge yet, but this provides similar ‘sticky header’-style functionality in under 2KB.

Dollar Shave Club

Firefox Simplifying Its Release Channels

The Firefox team are getting rid of the Aurora channel and basing the Developer Edition on the beta build.

Mozilla Hacks


  • Frontend Developer at X-Team (Remote) We seek a developer with extensive Frontend knowledge. We're 100% remote and provide the funding needed to help you achieve your goals and grow.   X-Team
  • Frontend Engineer at FR8Star We are looking for a Frontend Engineer to help us revolutionize the trucking industry.   FR8Star
  • Frontend Web Developer Create an exceptional community experience for over 100 million Runtastic.com users. Join our team now!   Runtastic GmbH

Can't find the right job? Want companies to apply to you? Try Hired.com.

In Brief

CSS3 Pseudo-Classes: The Basics tutorial

Some uncommon ones here such as :read-only and :in-range

Goldstein, Lazaris and Weyl

Focusing a background-image on a Precise Location with %ages tutorial

Jay Sitter

On Hiding Content tutorial

How the hidden attribute works, how it differs from aria-hidden and how it relates to just hiding with CSS.

Hidde de Vries

Creating Testable, Modularized Chrome Extensions tutorial

Nathaniel Woodthorpe

Encoding Data in CSS to Be Reused in JavaScript tutorial

Alex Gyoshev

Building a CSS Grid Overlay tutorial

Andreas Larsen

Full-day Workshop: Using ES6 and React with Netflix's Brian Holt course

React eschews the traditional MVC architecture, a counter-intuitive approach Brian explains along with JSX, React best practices, and the React component lifecycle.

Forward Courses   Sponsor

A Modern Front-End Workflow video

In 30 minutes, learn various DevTool secrets and how to adopt a modern development and debugging workflow.

Umar Hansa

The Benefits of Server-Side Rendering Over Client-Side Rendering opinion

Walmart Labs

Stop Using Device Breakpoints opinion

Content breakpoints give people better experiences no matter what size device they have.”

Adam Silver

cssnano: A Modular Minifier, Built On Top of The PostCSS Ecosystem tools

Ben Briggs

CSSPeeper: A Smart CSS Viewer Tailored for Designers tools

A Chrome extension for inspecting items and styles.

Dawid Młynarz and Jędrzej Sadowski

SQL Source Control: track each change to your SQL Server database tools

Get a full history in your source control system. See who made changes, what they did & why. See how.

Red Gate   Sponsor

RAGrid.css: A Grid Framework with Auto-Layout Features code

Adam Argyle

WebVR Experiments demo

Google recently launched WebVR Experiments, a site featuring a dozen or so interactive WebVR apps and their source code. Associated blog post here .


A Pure CSS Crossword using CSS Grid demo

Adrian Roworth