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 (...
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)); } }...
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...
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 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 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...
BEM – Block Element Modifier Problem: There are only two hard problems in Computer Science: cache invalidation and naming things — Phil Karlton Solution: BEM — Block Element Modifier is a methodology that helps you to create reusable components and code...
Blog
