Real easy responsiveness with CSS Grid
/in CSS3, HTML5/by GénesisCSS Grid is the easiest, cleanest and powerful way to deal with responsiveness, a completely new approach baked in the last years and ready to use.
CSS Grid changes how you used to layout your documents, instead of divitis (plenty of divs) and JavaScript to change div positions depending on screens (what Bootstrap does nowadays), you can use pure CSS grid layouts with just the meaningful divs and independently of document source order.
You don’t need to touch HTML or JavaScript, you don’t need Bootstrap, forget about flexbox in CSS or even complex CSS rules, what you see in your CSS is what you get on your screen.
Play stretching your browser to check the JSFiddle result.
I would recommend you to do these examples: https://gridbyexample.com/examples/
Fall in love with templates like I did ❤
Tumblr’s images viewer
/in CSS3, HTML5, JavaScript/by GénesisIt shows up one image every 5 seconds (one per post). You can go forward and backward using cursor arrows (click inside first to be in context).
You could extend this example adding up and down cursor arrows to switch between different tumblrs.
HTML input time
/in CSS3, HTML5, JavaScript/by GénesisFirefox Nightly version (at least) is going to support (but poorly) HTML input date and HTML input time. You will be able to use natively widgets in updated browsers without depending on third party libraries. However, there are some limitations, if you have ever dealt with an HTML input time you know what it is about, try to set up maximum or minimum hours/minutes and/or change from 12 hours format to 24 hours and viceversa. By now, the best solution to avoid headaches or wastes of time is to use 2 inputs of the type number and a pinch of JS.