Scenario: Build a pagination partial consisting of 3 parts – the item range (e.g. “Showing 1 – 10 of 30 results”), a dropdown to select the page and a dropdown to select the number of items per page. The 3 parts will be displayed in a different order and have different text alignment on mobile …
Continue reading “Different alignment and order of columns on mobile/desktop using Bootstrap 5”
Result (drawn using ASCIIFlow Legacy): +————————————————–+ | | | 1) This text is left. This text is right. | | 2) This text is left. This text is right. | | | +————————————————–+ Sample HTML and CSS: <style> .split { display: block; } .split span { display: block; float: right; } div { left: 200px; …
Continue reading “Split text into left and right columns using CSS”
Came across this tutorial Let’s Make a Multi-Thumb Slider That Calculates The Width Between Thumbs which was written in React and TypeScript. Decided to convert it to vanilla (plain) CSS and JavaScript 🙂 First up, a working demo below. Move the slider thumbs and an event will be emitted, which will be output to the …
Continue reading “Multi-thumb slider in vanilla CSS and JavaScript”
Eons ago, it used to be that, positioning of elements in the center/corner of a div required JavaScript code, to calculate the offset based on the width/height of the element itself as well as its parent. Things are much easier now with CSS transform. A simple demo is shown below, with 9 squares positioned at …
Continue reading “Positioning elements using CSS transform without JavaScript”
Let’s say you own a website with 2 webpages and you wish to install a third-party plugin to create a newsfeed on each page. In this case, I am the author of the newsfeed plugin that you have chosen. Below is a sample of how the plugin is embedded: <div class=”container”> <!– container element provided …
Continue reading “Responsible CSS – your plugin is only a tenant renting a room in someone’s house”
In today’s edition (Fri 04 Jul 2014) of the TODAY newspaper, there is an article in the Comment & Analysis section titled “How to teach children computer programming”. It mentions that more and more countries are introducing programming, also known as coding, into their schools. This brought to mind the famous Youtube video by code.org in Feb 2013, …
