The art of simplicity

I'm working on upgrading an existing application from Bootstrap 4 to Bootstrap 5. I used the occasion to clean up the CSS logic. One thing I had in the original application was an image in the header that should be cropped on smaller screens. This how the header looks like on bigger screens: And this is on smaller screens: The trick I used originally was by using a media queries: However with the upgrade to Bootstrap 5 I would try to achieve the same thing using the built-in grid system and breakpoints. Breakpoints Breakpoints are the building blocks of responsive design in Bootstrap. You can use them to control when your layout can be adapted at a particular viewport or device size. Bootstrap includes six default breakpoints, sometimes referred to as grid tiers , for building responsively. These breakpoints can be customized if you’re using our source Sass files. Breakpoint Class infix Dimensions X-Small No...

If you are new to front-end web development and have no clue where to start, I can recommend the Front-end Handbook written by Cody Lindley. The book briefly discusses all the topics relevant for front-end development, what’s important and what not and links to a large set of resources to help you grasp and understand each of these topics in more detail. It is the perfect learning path to help you getting started with front-end web development. More information: GitBook page: https://www.gitbook.com/book/frontendmasters/front-end-handbook/details Start reading: http://www.frontendhandbook.com/

In web applications you can embed images into a html page by base64 encoding an image and add it to the css on your page by using Data URI. Data URI is just a URI scheme that provides a way to include data in-line. Usage is simple, you create an ASCII string format representation from your binary data using Base64 encoding. The generated string is then stored in the css. Instead of using an URI to an image, you use the Data URI instead. The format of this URI looks like this: data:[<mediatype>][;base64],<data> An example of an encoded image looks like this: This is nothing new, but did you know that you can do the same thing for fonts?