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


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
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
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 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...