Flexbox Template #001
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
Actually, the term Flexbox Template is a misnomer.
To get started right you need to think of Flexbox as just another tool that makes structuring web pages with columns easier.
Only the header and the footer were built using flexbox in this template. The main division is plain ole HTML/CSS.
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.
The Modal Menu
The Modal Menu is activated for navigation on smaller devices, when the drop down menu is hidden. If you are viewing this page on a device with a viewport width less than 768 pixels, you are using the Modal 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 and in our 500 Series mini site templates.
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 (javascript) that kicks in for smaller devices when the drop down menu is hidden.
Other Features
Both the Modal 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 read, you can use the float property to position images in flexbox. See: Template #501 - Columns
**Viewing with a Chrome browser? Put it in the Trash where it belongs and get Edge!