Search

Nalezeno "responsive": 32

The New CSS Media Query Range Syntax


The Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators, like , and =, that make more sense syntactically while writing less code for responsive web design. The New CSS Media Query Range Syntax...

Avoiding the Pitfalls of Nested Components in a Design System


When creating a component-based, front-end infrastructure, one of the biggest pain points I’ve personally encountered is making components that are both reusable and responsive when there are nested components within components. Take the following “call to action” (<CTA />… Avoiding...

Responsive Layouts, Fewer Media Queries


We cannot talk about web development without talking about Responsive Design. It’s just a given these days and has been for many years. Media queries are a part of Responsive Design and they aren’t going anywhere. Since the introduction of … The post Responsive Layouts, Fewer Media Queries...

Are we in a new era of web design? What do we call it?


Una is calling it the new responsive. A nod to the era we were most certainly in, the era of responsive design. Where responsive design was fluid grids, flexible media, and media queries, the new responsive is those things … The post Are we in a new era of web design? What do we call...

Intrinsic Typography is the Future of Styling Text on the Web


The way we style text hasn’t changed much over the years. There have been numerous advancements to help make things more flexible, like layouts, but in terms of styling, most finite aspects of our designs, like text, remain relatively unchanged. … The post Intrinsic Typography is the Future...

Barebones CSS for Fluid Images


Zach takes a look at some fundamental HTML+CSS usage for fluid, responsive images. Most of it, I’d say, is what you’d expect, but things get weird when srcset gets involved. I poked my way through, and in addition to the … The post Barebones CSS for Fluid Images appeared first...

Use CSS Clamp to create a more flexible wrapper utility


I like Andy’s idea here: .wrapper { width: clamp(16rem, 90vw, 70rem); margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } Normally I’d just set a max-width there, but as Andy says: This becomes a slight issue in mid-sized viewports, such...

Under-Engineered Responsive Tables


I first blogged about responsive data tables in 2011. When responsive web design was first becoming a thing, there were little hurdles like data tables that had to be jumped. The nature of <table> elements are that they have something a minimum width depending on the content they contain...

The Raven Technique: One Step Closer to Container Queries


For the millionth time: We need container queries in CSS! And guess what, it looks like we’re heading in that direction. When building components for a website, you don’t always know how that component will be used. Maybe it will be render as wide as the browser window is. Maybe two of them...

Comparing Browsers for Responsive Design


There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing CSS and making sure it’s working across all the viewports in a single glance. They are all very similar. For example, they...

How to Make a Media Query-less Card Component


Fun fact: it’s possible to create responsive components without any media queries at all. Certainly, if we had container queries, those would be very useful for responsive design at the component level. But we don’t. Still, with or without container queries, we can do things to make our components...

Fluid Images in a Variable Proportion Layout


Creating fluid images when they stand alone in a layout is easy enough nowadays. However, with more sophisticated interfaces we often have to place images inside responsive elements, like this card: For now, let’s say this image is not semantic content, but only decoration. That’s...

Responsive web design turns ten.


Ethan on the thinking and research that inspired the term: Around that time, my partner Elizabeth visited the High Line in New York City shortly after it opened. When she got back, she told me about these wheeled lounge chairs she saw in one section, and how people would move them apart for a...

Responsive web design turns ten.


Ethan on the thinking and research that inspired the term: Around that time, my partner Elizabeth visited the High Line in New York City shortly after it opened. When she got back, she told me about these wheeled lounge chairs she saw in one section, and how people...

A Guide to the Responsive Images Syntax in HTML


This guide is about the HTML syntax for responsive images (and a little bit of CSS for good measure). We'll go over srcset and , plus a whole bunch of things to consider to help you get the best performance and design control from your images. The post A Guide to the Responsive Images Syntax...

Turning a Fixed-Size Object into a Responsive Element


I was in a situation recently where I wanted to show an iPhone on a website. I wanted users to be able to interact with an application demo on this “mock” phone, so it had to be rendered in CSS, not an image. I found a great library called marvelapp/devices.css. The library implemented the device...

Fluid Width Video


IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video. There are lots of ways in which video can be displayed on your site. You might be self-hosting the video and presenting it via the HTML5 <video tag. You might...

10+ Examples of Responsive Websites That Got It Right


How do you make sure your website will look good on every browser and device? Take a look at these responsive web designs and you’ll discover how. 10+ Examples of Responsive Websites That Got It Right was written by Bogdan Sandu and published on Codrops

Making Tables Responsive With Minimal CSS


Here’s a fabulous CSS trick from Bradley Taunt in which he shows how to make tables work on mobile with just a little bit of extra code. He styles each table row into a card that looks something like this: See the Pen Responsive Tables #2.5: Flexbox by Bradley Taunt (@bradleytaunt) ...

Workflow Considerations for Using an Image Management Service


There are all these sites out there that want to help you with your images. They do things like optimize your images and help you serve them performantly. That's a very good thing. By any metric, images are a major slice of the resources on websites, and we're notoriously bad at optimizing them...

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace