Dark Mode Toggle

Dark Mode Toggle Template #506

Flexbox

Flexbox is just another tool that you can add to your web development arsenal.

It takes all the work out of structuring a page with multiple columns. No more left, right, middle , inner-left or inner-third and sitting with a calculator figuring margins and padding. See: Columns with Flexbox

Optimize Images

The best way to optimize your images these days is to convert them to one of the newer file formats. We demonstrate using a webP image format and providing the fallback jpg image for older browsers.

There are a lot of fallback codes out there that don't work. This one does.

The New Image File Formats

The pictures below are examples of why to use the new image file formats. The jpg versions of the same pictures are twice the size of the webp versions.

responsive image

Less is More

I've tried to construct these templates with as little HTML code as possible.

Flexbox is the same. With flexbox, less is more. Let it do the work of controlling page structure. It isn't designed for text flow or image placement.

 responsive image

Drop down Menu

The style sheet for the drop down menus is one from our free navbar collection. It was installed by adding a linked style sheet in the head section of the template document.

It is coupled with the Modal Menu that kicks in for smaller devices when the drop down menu is hidden.

 responsive image

Image Swapping

The 506 template kit uses a different method of swapping images using the picture element.

The ugly border (which you can remove) is added so that you can see what flexbox does when the picture element is used.(stretch and shrink the browser window)

The Clamp Function

I can't stress enough the need for beginners to learn to use the Clamp Function in the early stage of development.

I include a mini tutorial on its use for setting font-size, margins and padding on the Modern Design page.