Tag Archives: Media Queries

Getting to know CSS Grid Layout

CSS Grids may reduce your need for media queries

 

CSS Grid is the most critical layout feature to come to browsers since Flexbox. It allows us to escape some of the magic numbers, hacks, and workarounds that we’ve grown accustomed to using for the last 15 years. It brings simplicity to declaring layouts that will tear a chunk out of most of the major CSS frameworks, and reduce bloat in our own hand crafted styles.

If you’re not familiar with what CSS Grid is, and you’ve made it this far, it’s a layout tool that applies to a containing element which then manages how the child elements are spaced, sized, and aligned.

CSS Grid gives us powerful new abilities — most notably for layout to be aware of both horizontal and vertical space at the same time, for changes to layout not to impact markup, and the ability adapt to available space without the need for media queries.

Read more from the source: Campaign Monitor Engineering

Enquire.js – Media Query Callbacks in JavaScript | CSS-Tricks

CSS Media Queries are great, but sometimes you need JavaScript events to fire when media queries change

 

A guest post by Nick Williams. Nick walks through his new mini JavaScript library for providing callbacks when specified media queries match (or don’t!).

Download Enquire.js at http://wicky.nillia.ms/enquire.js/

Read the article at CSS-Tricks