Category Archives: responsive design

Responsive images with srcset and sizes attributes vs picture element – Learnedia

Good tutorial with examples.   srcset syntax So how to properly use srcset and sizes attributes? This is the code I used for displaying Example 1 Hero images on the sample page: <img src=”hero-big.jpg” srcset=”hero-small.jpg 450w, hero-medium.jpg 960w, hero-big.jpg 1500w” sizes=”(max-width: 552px) 450px, (max-width: 1062px) 960px, 1500px” alt=”Learnedia Hero” /> The first line is pretty […]

Recreating the Google Images Search Layout with CSS — SitePoint

Great tutorial from SitePoint explaining how to create a dynamic Google Images style User Interface. See the Pen Google Images search in CSS by Steven Collins (@stelco74) on CodePen. Edit: Better version which allows inline content (html) and has a built in carousel to navigate through the cards whilst in expanded mode 🙂 https://github.com/oriongunning/gridder Demo: […]

Everything I know about Responsive Web Typography | Zell Liew

Responsive typography is a tough nut to crack. This was the best meth Source: Everything I know about Responsive Web Typography | Zell Liew

Lity – Lightweight, accessible and responsive lightbox

Lity is a ultra-lightweight, accessible and responsive lightbox plugin which supports images, iframes and inline content out of the box. Source: Lity – Lightweight, accessible and responsive lightbox

Unsemantic CSS Framework (Responsive)

Unsemantic is a fluid grid system that is the successor to the 960 Grid System. It works in a similar way, but instead of being a set number of columns, it’s entirely based on percentages. via Unsemantic CSS Framework.