UI Components
Stacked Bar Chart with Gap – Apache ECharts I created an example to create a gap between stacked bars using Apache ECharts. See the Pen Bar Charts with Two datasets – using Apache ECharts by Puneet Sharma (@webdevpuneet) on CodePen. Donut Chart with Apache...
Layouts
Here is a simple responsive example with a demo and code for slide layout. You can use this as a starter template to achieve any demanding animation-heavy slides. DEMO See the Pen Slides Layout by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div...
Code Snippets, CSS
@media (max-width:1800px) { } @media (max-width:1400px) { } @media (max-width:1300px) { } @media (max-width: 1199.98px) { } @media (max-width: 1199.98px) { } @media (max-width: 991.98px) { } @media (max-width: 767.98px) { } @media (max-width: 575.98px) {...
JavaScript
JavaScript to equalize element heights To achieve equal heights for child elements with the class equalize within a parent element with the class equalize-columns, you can use CSS and possibly a bit of JavaScript. One common approach is using Flexbox or Grid layout...
UI Components
Here is a custom range slider I created to use gradients in the slided part and the thumb itself. DEMO See the Pen Custom Range Sliders by Puneet Sharma (@webdevpuneet) on CodePen. HTML <div class=”slider”> <span...
Blog