Category Archives: responsive design

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.

Kurt Schindler » Flexible, dynamically resizing images with CSS

Use the following code to resize images and p text keeping their aspect ratio. Ideal for responsive design. img, p { max-width: 100%; height: auto; width: auto\9; /* ie8 */ } Use this class to center p text: p.blocktext { margin-left: auto; margin-right: auto; margin-top: 20px; width: 32em; text-align:center; } ..and images: img.centered { display: […]