Flexbox Template #002
Flexbox
Believe it or not the first draft of Flexbox Layout was added in 2008. Since then it has been revised several times and become more efficient and user friendly.
It was completely rewritten in 2013 and minor revisions have been added since that time.
Easy HTML5 Construction
I've tried to construct these templates with as little HTML code as possible. I advise novice web developers to spend more time studying CSS , especially the clamp function and nesting in style sheets.
You shouldn't be using pixels in your designs anymore. Our templates use rems and viewport calculations as should you.
Toggle Menu
The Toggle Menu is activated for navigation on smaller devices. The drop down menu is hidden. If you are viewing this page on a device with a viewport width less than 700 pixels, you are using the Toggle Menu to navigate.
Media Queries
Media Queries were the mainstay of responsive design for years.
In modern design the goal is to eliminate the need for multiple breakpoints and media queries. Learn to preset your font-size, line-height, margins and padding using the clamp function
We provide a short tutorial on our main menu under Flexbox Tutor
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 Toggle Menu (javascript) that kicks in for smaller devices when the drop down menu is hidden.
Other Features
Both the Toggle menu and the top button are fixed to the viewport. Whatever device a user accesses the site with they have constant access to both.
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 an avif image and providing the fallback png image for older browsers.
There are a lot of fallback codes out there that don't work. This one does.
Linux users: Use XnConvert to create your optimized images. It's in the repository and easy to use. If you can't see your avifs after you create them, install gThumb(also in the repository).
Contrary to what you've probably read about using the float property in flexbox, you can use it to position images.