Select Page

Category: Misc

Tips, Scripts, Tools, Bookmarks, and Inspiration for Web Designers and Developers.

Retina Display Media Query

Retina Display Media Query

For including high-res graphics, but only for screens that can make use of them. “Retina” being “2x”: Difference between normal display and retina display CSS – Media Query @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (...
Fluid Text, Fluid Typography – CSS

Fluid Text, Fluid Typography – CSS

The following code scale font-size from a minimum of 16px (at a 320px viewport) to a maximum of 22px (at a 1000px viewport). CSS html { font-size: 16px; } @media screen and (min-width: 320px) { html { font-size: calc(16px + 6 * ((100vw – 320px) / 680)); } }...
CSS Grid Layout

CSS Grid Layout

Here is a layout using CSS Grid. grid layout – css You can design a CSS Grid-based layout with the help of an intuitive graphical user interface and generate HTML and CSS. – https://tools.webdevpuneet.com/css-grid-layout-generator/ Demo Open demo in a full...
CSS Loading Spinners

CSS Loading Spinners

Here are some cool examples of loading animations / spinners. DEMO Open demo in a full window – https://demos.webdevpuneet.com/css/css-spinners/index.html HTML <!DOCTYPE html> <html> <head> <title>SpinKit Examples</title> <link...
Google Charts – powerful, simple to use, and free

Google Charts – powerful, simple to use, and free

Google charts provide a variety of charts designed to address your data visualization needs. These charts are based on pure HTML5/SVG technology (adopting VML for old IE versions), so no plugins are required. All of them are interactive, and many are pannable and...
Lorem Ipsum – Text

Lorem Ipsum – Text

lorem ipsum text The standard Lorem Ipsum passage, used since the 1500s Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi...